react-native-reanimated-zoom
v0.3.3
Published
Component to add zoom in react native views.
Downloads
46,831
Readme
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
- https://github.com/software-mansion/react-native-gesture-handler/issues/1804#issuecomment-1019819191 Currently pan and pinch gesture are not triggering simultaneously in expo managed workflow. I'll look into it when I have some time. This issue doesn't happen on bare react native, release or expo dev client builds.
Credits
Built with react-native-builder-bob ❤️