How to create a simple ScrollView in React Native? Code Example

In React native, a scrollview can be created using <ScrollView> component. Below are some of it’s properties –

1. It creates scrolling view which helps in displaying the components away from screen view.

2. Works both horizontally and vertically.

3. Works in both Android and iOS Mobiles.

4. Renders all the children at once. So, it can have performance issues if the children are bulky or they are in large numbers.

5. It needs to have a height either through css height property or through flex.

6. FlatList is preferred over ScrollView because they are much better in performance and can handle very large lists or components.

7. Use ScrollView when there are only few components and you are unsure if all will fit in various screen sizes.

Code Example

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
        <Text style={styles.text}>https://akashmittal.com</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    marginVertical: 20
  },
});

export default App;

Output

In the above image you can see the vertical scroll bars at the right size of both iOS and Android frames. This is because all the text components are within the ScrollView.

In the code we defined ScrollView at line 7 and enclosed Text components in it.

Live Demo

Conclusion

It is simple to define a ScrollView in React Native. All we need to do is to use <ScrollView> component and put all the content as it’s children. It works in both Android and iOS phones.