react-native-reanimated-zoom 🔎
Component for zooming react native views. 🧐
https://user-images.githubusercontent.com/23293248/155864802-a81cf3a3-9f08-4399-abee-64bc94049c8b.mp4
Features
- Simple API.
- Performant. No state triggered re-renders. ⚡️
- Can be used with Image/Video or any kind of View.
- Works with FlatList/ScrollView.
- Consistent on Android and iOS.
https://user-images.githubusercontent.com/23293248/174450283-e05684ed-9963-448b-8efc-bf33973aae0a.MP4
Installation
# npm
npm install react-native-reanimated-zoom
# yarn
yarn add react-native-reanimated-zoom
Peer dependencies
Make sure you have installed react-native-gesture-handler > 2 and react-native-reanimated > 2.
Usage
Simple zoom view
import { Zoom } from 'react-native-reanimated-zoom';
export default function App() {
return (
<Zoom>
<Image
source={{
uri: 'your image uri',
}}
style={{ width: 300, height: 400 }}
/>
</Zoom>
);
}
With FlatList or ScrollView
import { FlatList } from 'react-native';
import { Zoom, createZoomListComponent } from 'react-native-reanimated-zoom';
const ZoomFlatList = createZoomListComponent(FlatList);
const ListExample = () => {
const renderItem = React.useCallback(
({ item }) => {
return (
<Zoom>
<Image
source={{
uri: item,
}}
style={{
width: 400,
height: 400,
}}
/>
</Zoom>
);
},
[dimension]
);
return (
<ZoomFlatList
data={data}
pagingEnabled
horizontal
keyExtractor={(item) => item}
renderItem={renderItem}
/>
);
};
Props
minimumZoomScale - Determines minimum scale value the component should zoom out. Defaults to 1.maximumZoomScale - Determines maximum scale value the component should zoom in. Defaults to 8.onZoomBegin - Callback. Gets called when view is zoomed in.onZoomEnd - Callback. Gets called when view zoom is restored.
Examples
- You can find examples of a simple zoom view and zoomable items in list here
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Known issues
Credits
Built with react-native-builder-bob ❤️
