react-native-reanimated-zoom 🔎

Component for zooming react native views. 🧐

demo.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.

RPReplay_Final1655573956.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.

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

• software-mansion/react-native-gesture-handler#1804 (comment) 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 ❤️