How to hide Scroll Indicator in React Native

Hiding Scroll Indicator – React Native – Example

In React Native, you can hide the scroll indicator for a ScrollView component by setting the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props to false. This will prevent the vertical and horizontal scroll indicators from being displayed. Here’s an example of how to do this:

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

const App = () => {
  return (
    <View style={styles.container}>
      <ScrollView
        showsVerticalScrollIndicator={false} // Hide vertical scroll indicator
        showsHorizontalScrollIndicator={false} // Hide horizontal scroll indicator
      >
        {/* Your scrollable content goes here */}
        <Text style={styles.text}>Scrollable Content</Text>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    padding: 20,
  },
});

export default App;

1. We import the necessary components from ‘react-native’.
2. We create a functional component called App.
3. Inside the App component, we define a ScrollView component.
4. We set the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props to false to hide both the vertical and horizontal scroll indicators.
5. You can place any scrollable content inside the ScrollView.

By setting showsVerticalScrollIndicator and showsHorizontalScrollIndicator to false, the scroll indicators will not be displayed, giving you a scrollable view without the indicators.