React Native Flatlist Hide Scrollbar Example

Sep 09, 2022 . Admin

Today, I will let you know example of Hide scrollbar in FlatList React Native. We will use How to hide scrollbar in expo web React Native. I’m going to show you about React Native Flatlist Hide Scrollbar With Code Examples. This post will give you simple example of How to hide scroll indicator in react native.

In this example,we want to hide the scrollbar in a FlatList with React Native in Android.you can hide the scrollbar in a FlatList with React Native in Android, we can set the showsVerticalScrollIndicator value false.let's below example.

Step 1: Download Project

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

expo init ExampleApp

Step 2: App.js

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

import React from 'react';
 
import { Alert, View, StyleSheet, SafeAreaView, FlatList, Text } from 'react-native';
 
export default function App() {
 
  const Countries  = [
    {
      id: 1,
      name: 'India',
    },
    {
      id: 2,
      name: 'Australia',
    },
    {
      id: 3,
      name: 'Bangladesh',
    },
    {
      id: 4,
      name: 'Brazil',
    },
    {
      id: 5,
      name: 'Canada',
    },
    {
      id: 6,
      name: 'China',
    },
    {
      id: 7,
      name: 'France',
    },
    {
      id: 8,
      name: 'Japan',
    },
    {
      id: 9,
      name: 'Kenya',
    },
    {
      id: 10,
      name: 'Malaysia',
    },
    {
      id: 11,
      name: 'Maldives',
    },
    {
      id: 12,
      name: 'Mali',
    },
    {
      id: 13,
      name: 'Mexico',
    },
    {
      id: 14,
      name: 'New Zealand',
    },
    {
      id: 15,
      name: 'North Korea',
    },
    {
      id: 16,
      name: 'Pakistan',
    },
    {
      id: 17,
      name: 'Poland',
    },
    {
      id: 18,
      name: 'Russia',
    },
    {
      id: 19,
      name: 'South Africa',
    },
    {
      id: 20,
      name: 'South Korea',
    }
  ];
 
  const ItemRender = ({ name }) => (
    <View style={styleSheet.item}>
      <Text style={styleSheet.itemText}>{name}</Text>
    </View>
  );
 
  const ItemDivider = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

  return (
    <SafeAreaView style={styleSheet.MainContainer}>
 
      <FlatList
        data={Countries}
        renderItem={({ item }) => <ItemRender name={item.name} />}
        keyExtractor={item => item.id}
        ItemSeparatorComponent={ItemDivider}
        showsVerticalScrollIndicator={false}
      />
 
    </SafeAreaView>
  );
}
 
const styleSheet = StyleSheet.create({
 
  MainContainer: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 35,
  },
 
  item: {
    paddingLeft: 15,
    paddingTop: 8,
    paddingBottom: 8
  },
 
  itemText: {
    fontSize: 24,
    color: 'black'
  }
 
});

Step 3: Run Project

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