Vertical and Horizontal Scroll View Like Google Play Store in React Native

This is an Example to make Vertical and Horizontal Scroll View Like Google Play Store in React Native. You can easily scroll vertically or horizontally and can click view more to see more items of that category.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X

react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

For this example we need react-native-elements react-native-vector-icons dependency.

To install this open the terminal and jump into your project

cd ProjectName

1	cd ProjectName

Run the following command

npm install react-native-elements --save

1	npm install react-native-elements --save

npm install react-native-vector-icons --save

1	npm install react-native-vector-icons --save

These commands will copy all the dependencies into your node_module directory.

Linking of Dependency

After the updation of React Native 0.60, they have introduced autolinking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases. So for that we need to link the library using

react-native link react-native-vector-icons

1	react-native link react-native-vector-icons

CocoaPods Installation

Now we need to install pods

cd ios && pod install && cd ..

1	cd ios && pod install && cd ..

Open App.js in any code editor and replace the code with the following code.

App.js

// This is an Example to make Vertical+Horizontal Scroll View Like Google Play Store in RN
import * as React from 'react';
import { Text, View, StyleSheet, Image, ScrollView } from 'react-native';
import { Card } from 'react-native-elements';

export default class App extends React.Component {
  render() {
    return (
      <ScrollView>
        <View style={{ marginTop: 25 }}>
          <SingleRow />
          <SingleRow />
          <SingleRow />
          <SingleRow />
          <SingleRow />
        </View>
      </ScrollView>
    );
  }
}
class SingleRow extends React.Component {
  constructor(props) {
    super(props);
    const slides = [
      {
        key: '11 MB',
        text: 'FREE ',
        title: 'Mobile ',
        uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
        backgroundColor: '#20d2bb',
      },
      {
        key: '52 MB',
        title: 'Flight ',
        uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
        backgroundColor: '#febe29',
      },
      {
        key: '14 MB',
        text: 'FREE',
        title: 'Great ',
        uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
        backgroundColor: '#22bcb5',
      },
      {
        key: '45 MB',
        title: 'Best ',
        uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
        backgroundColor: '#3395ff',
      },
      {
        key: '33 MB',
        title: 'Bus ',
        text: 'FREE',
        uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
        backgroundColor: '#f6437b',
      },
      {
        key: '77 MB',
        title: 'Train ',
        uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
        backgroundColor: '#febe29',
      },
    ];
    global.slides = slides;
  }
  onPressLearnMore() {
    alert('Hello');
  }
  render() {
    return (
      <View>
        <Card
          containerStyle={{
            backgroundColor: '#FFFFFF',
            padding: 10,
            marginLeft: 0,
            marginRight: 0,
            marginTop: 0,
          }}>
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text style={{ color: '#606070', fontWeight: 'bold' }}>
              Recommended for You
            </Text>
            <Text style={{ color: '#228B22' }} onPress={() => alert('MORE')}>
              MORE
            </Text>
          </View>
          <View style={{ flexDirection: 'row', width: '100%' }}>
            <ScrollView
              horizontal={true}
              showsHorizontalScrollIndicator={false}>
              {global.slides.map((item, key) => (
                <View style={{ margin: 5 }} key={key}>
                  <Image
                    source={{
                      uri: item.uri,
                    }}
                    style={{ width: 70, height: 70, margin: 10 }}
                  />
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}>
                    <Text
                      style={{ color: '#494949', fontWeight: '200' }}
                      onPress={() => {
                        alert('Title ' + item.title + ' Clicked');
                      }}>
                      {item.title}
                    </Text>
                    <Text style={{ color: '#228B22' }}>⋮</Text>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}>
                    <Text style={{ color: '#606070', fontWeight: '200' }}>
                      {item.key}
                    </Text>
                    <Text style={{ color: '#228B22' }}>{item.text}</Text>
                  </View>
                </View>
              ))}
            </ScrollView>
          </View>
        </Card>
      </View>
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

// This is an Example to make Vertical+Horizontal Scroll View Like Google Play Store in RN

import * as React from 'react';

import { Text, View, StyleSheet, Image, ScrollView } from 'react-native';

import { Card } from 'react-native-elements';

export default class App extends React.Component {

render() {

return (

</View>

</ScrollView>

);

}

class SingleRow extends React.Component {

constructor(props) {

super(props);

const slides = [

{

key: '11 MB',

text: 'FREE ',

title: 'Mobile ',