React-native-advance-components NPM

react-native-advance-components

Advance components for react native

Content

Installation

npm install react-native-advance-components

yarn add react-native-advance-components

We are using MaterialCommunityIcon from react-native-vector-icons. So, you need to add this package in your project also.

npm install react-native-vector-icons

yarn add react-native-vector-icons

The library has specified dedicated steps for each platform. Please follow their installation guide in order to properly use icon fonts.

Usage

Setup theme

Add RNAdvanceComponentProvider in your app entry point (generally App.js).

import { RNAdvanceComponentProvider } from 'react-native-advance-components';

// ...

export default function App() {
  const themeMode = useColorScheme();
  return (
    <RNAdvanceComponentProvider mode={themeMode ?? 'light'}>
      <View>
        <ImageViewer />
      </View>
    </RNAdvanceComponentProvider>
  );
}

Components

1. Center

It will vertically and horizontally center the children element.

check our demo

import { Center } from 'react-native-advance-components';

// ...
export function CenterDemo() {
  return (
    <Center>
      <Text>This text will be vertically and horizontally center.</Text>
    </Center>
  );
}

2. ImageZoomViewer

It will make you image zoom enable.

check our demo

import { ImageZoomViewer } from 'react-native-advance-components';

// ...
export function ImageZoomViewerDemo() {
  return (
    <ImageZoomViewer
      cropWidth={Dimensions.get('window').width}
      cropHeight={Dimensions.get('window').height}
      imageWidth={200}
      imageHeight={200}
    >
      <Image
        style={{ width: 200, height: 200 }}
        resizeMode="contain"
        source={{
          uri: 'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg',
        }}
      />
    </ImageZoomViewer>
  );
}

Modules

1. ImageViewerModal

check our demo

import { ImageViewerModal } from 'react-native-advance-components';

// ...

export function ImageViewer() {
  const ref = React.useRef<ImageViewerModal>(null);

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <ImageViewerModal
        ref={ref}
        modalAnimationType="fade"
        backgroundColor="#6ebef855"
        color="#ffbf00"
        defaultIconColor="black"
      >
        <Image
          style={{ width: 300, height: 150 }}
          resizeMode="cover"
          source={{
            uri: 'https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg',
          }}
        />
      </ImageViewerModal>
    </View>
  );
}

2. Snackbar

check our demo

import { Snackbar } from 'react-native-advance-components';

// ...

export function SnackbarDemo() {
  const [isVisible, setIsVisible] = React.useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show" onPress={() => setIsVisible(true)} />
      <Button title="Close" onPress={() => setIsVisible(false)} />
      <Snackbar
        isVisible={isVisible}
        status="success"
        message="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type."
        onClose={() => setIsVisible(false)}
        autoClose
        anchorOrigin="top"
        variant="solid"
      />
    </View>
  );
}