React Native Image Zoom Viewer Example

Sep 02, 2022 . Admin

This post is focused on react native image zoom viewer. This article goes in detailed on expo image viewer. you can see react-image-zoom example. it's simple example of zoom image example. Let's get started with react-native image viewer with zoom and swiper.

In this example,We will image zoom in react natice.You can install to react native zoom library.The complete example below shows you how to do that.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: Install library

Install expo-linear-gradient by running the following command in your project:

expo install react-native-image-zoom-viewer

Step 3: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { SafeAreaView, StyleSheet, View,Text } from 'react-native';
//import ImageViewer which will help us to zoom Image
import ImageViewer from 'react-native-image-zoom-viewer';

const App = () => {
  const images = [
    {
      url:
        'https://raw.githubusercontent.com/AboutReact/sampleresource/master/sample_img.png',
    },
    {
      url:
        'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
    },
  ];

  return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <ImageViewer imageUrls={images} renderIndicator={() => null} />
        </View>
      </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    flex: 1,
  },
});

export default App;

Step 4: Run Project

In the last step run your project using the below command.