Scrolling not working in Horizontal FlatList with multiple rows in React Native

Question

I want to create horizontal flatlist with multiple row in react native, so i have written this code, the flatlist is getting rendered but horizontal scrolling is not working so can anyone help me with what's the issue?

I want to create flatlist which has 2 rows and user can scroll horizontally also

<FlatList
          contentContainerStyle={{ alignSelf: 'flex-start' }}
          numColumns={this.state.data.length / 2}
          showsVerticalScrollIndicator={false}
          horizontal={false}
          showsHorizontalScrollIndicator={false}
          data={this.state.data}
          style={styles.listView}
          renderItem={({ item }) => (

            <TouchableWithoutFeedback onPress={() => this.onPressHandler(item.id)}>

              <View style={item.selected == true ?
                styles.SelectedPopularServiceView : styles.NormalPopularServiceView}>

                <View style={styles.PopularServiceTopView}>

                  <View style={styles.ViewTopName}>
                    <Text numberOfLines={33} style={styles.TextName}>
                      {item.Name}
                    </Text>
                    <Image source={imageShareData1} style={styles.ImageInfo} />
                  </View>

                  <View style={styles.ViewDiscount}>
                    <ImageBackground source={images.imageFlagGray} style={styles.BackGroundDiscount} >
                      <Text style={styles.TextDiscount}> {item.Discount}</Text>
                    </ImageBackground>
                  </View>

                </View>



                <View style={styles.ViewBottom}>

                  <View style={styles.ViewPrice}>
                    <Text style={styles.TextNewPrice}>
                      {item.NewPrice}
                    </Text>
                    <Text style={styles.TextOldPrice}>
                      {item.OldPrice}
                    </Text>
                  </View>

                  <View style={styles.ViewAdd}>
                    <Image source={images.imageButtonAdded} style={styles.ImageAdd} />
                  </View>

                </View>
              </View>
            </TouchableWithoutFeedback>

          )}

        />

Answer 1

Just need to add ScrollView wrapping the flat list like this :

<ScrollView horizontal>
    <FlatList
              contentContainerStyle={{ alignSelf: 'flex-start' }}
              numColumns={this.state.data.length / 2}
              showsVerticalScrollIndicator={false}
              horizontal={false}
              showsHorizontalScrollIndicator={false}
              data={this.state.data}
              style={styles.listView}
              renderItem={({ item }) => (

                <TouchableWithoutFeedback onPress={() => this.onPressHandler(item.id)}>

                  <View style={item.selected == true ?
                    styles.SelectedPopularServiceView : styles.NormalPopularServiceView}>

                    <View style={styles.PopularServiceTopView}>

                      <View style={styles.ViewTopName}>
                        <Text numberOfLines={33} style={styles.TextName}>
                          {item.Name}
                        </Text>
                        <Image source={imageShareData1} style={styles.ImageInfo} />
                      </View>

                      <View style={styles.ViewDiscount}>
                        <ImageBackground source={images.imageFlagGray} style={styles.BackGroundDiscount} >
                          <Text style={styles.TextDiscount}> {item.Discount}</Text>
                        </ImageBackground>
                      </View>

                    </View>



                    <View style={styles.ViewBottom}>

                      <View style={styles.ViewPrice}>
                        <Text style={styles.TextNewPrice}>
                          {item.NewPrice}
                        </Text>
                        <Text style={styles.TextOldPrice}>
                          {item.OldPrice}
                        </Text>
                      </View>

                      <View style={styles.ViewAdd}>
                        <Image source={images.imageButtonAdded} style={styles.ImageAdd} />
                      </View>

                    </View>
                  </View>
                </TouchableWithoutFeedback>

              )}

            />
</ScrollView>