How To Create Animated Gallery View In React Native?

Hello guys, In this example, we will see how you can create animated gallery view in React Native app. It is very easy so let's start with it without wasting any time.



So first of all we need to create a fresh project using cli.
npx react-native init galleryView
Go to the project directory.
cd galleryView
After this, try to run that blank project on both iOS and android devices.
npx react-native run-ios  (mac only)
npx react-native run-android
If everything ok, you will see blank React Native app as shown in image.

Now, install required dependencies to create animated gallery view.
yarn add native-base react-native-animatable
Now you have to install cocoa-pods dependencies and link the project.
cd ios; pod install; cd ..
npx react-native link
So after that you need to replace App.js with this code.
import React, {Component} from 'react';
import {Container, Header, Title, Content, Body} from 'native-base';
import {FlatList, Image, Dimensions} from 'react-native';
import * as Animatable from 'react-native-animatable';
let users = require('./userList.json');

let {width: screenWidth} = Dimensions.get('window');

class AnimatedImages extends Component {
  render() {
    return (
      <Animatable.View
        style={{flex: 1, alignItems: 'center'}}
        animation="zoomIn"
        delay={this.props.imageIndex * 100}
        useNativeDriver={true}>
        {this.props.children}
      </Animatable.View>
    );
  }
}
export default class App extends Component {
  renderImages = item => {
    return (
      <AnimatedImages imageIndex={item.index}>
        <Image
          source={{uri: item.item.image}}
          style={{
            height: screenWidth / 4,
            width: screenWidth / 4,
          }}
        />
      </AnimatedImages>
    );
  };
  render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Header</Title>
          </Body>
        </Header>
        <Content>
          <FlatList
            horizontal={false}
            numColumns={4}
            data={users}
            keyExtractor={(item, index) => index.toString()}
            renderItem={this.renderImages}
          />
        </Content>
      </Container>
    );
  }
}
In above code you can see we import a userList.json file; that's why because we need images url for gallery to show images. It is for testing purposes and pass image URL in flatlist. Here is the sample view of that json file.
Save everything and run the project again by using following commands.
npx react-native run-ios  (mac only)
npx react-native run-android
You will see your gallery view is ready and showing in the simulators (or devices). Output images are attached and link to the video of the project's coding as given below.
I hope you like the article regarding animated gallery view. This is how you can create animated gallery view in the React Native app for Android and iOS. If you have any questions or you want to get a tutorial on some topic, you can comment below.
There will be more posts coming soon. Stay tuned! Bye. 🙂

Post a Comment

0 Comments