Advance components for react native
npm install react-native-advance-components
or
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
or
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.
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>
);
}
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>
);
}
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>
);
}
- 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>
);
}
- 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>
);
}
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT