...

Big Data - React Native

Back to Course

Lesson Description


Lession - #1038 React Native ScrollView


In this , we will learn how to work with the ScrollView element.

We need to again create ScrollViewExample.js and import it in Home.

App.js

import React from 'react';
import ScrollViewExample from './scroll_view.js';

const App = (>
=> { return ( <ScrollViewExample /> >
}export default App
Scrollview will render a list of names. We will create it in state.

ScrollView.js

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

class ScrollViewExample extends Component {
   state = {
      names: [
         {'name': 'Ben', 'id': 1},
         {'name': 'Susan', 'id': 2},
         {'name': 'Robert', 'id': 3},
         {'name': 'Mary', 'id': 4},
         {'name': 'Daniel', 'id': 5},
         {'name': 'Laura', 'id': 6},
         {'name': 'John', 'id': 7},
         {'name': 'Debra', 'id': 8},
         {'name': 'Aron', 'id': 9},
         {'name': 'Ann', 'id': 10},
         {'name': 'Steve', 'id': 11},
         {'name': 'Olivia', 'id': 12}
      ]
   }
   render(>
{ return ( <View> <ScrollView> { this.state.names.map((item, index>
=> ( <View key = {item.id} style = {styles.item}> <Text>{item.name}</Text> </View> >
>
} </ScrollView> </View> >
} } export default ScrollViewExample const styles = StyleSheet.create ({ item: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 30, margin: 2, borderColor: '#2a4944', borderWidth: 1, backgroundColor: '#d2f7f1' } }>
When we run the app, we will see the scrollable list of names.

React Native ScrollView