React Native - ListView


Advertisements


In this chapter, we will show you how to create a list in React Native. We will import List in our Home component and show it on screen.

src/components/home/Home.js

import React from 'react'
import List from './List.js'

const Home = () => {
   return (
      <List />
   )
}
export default Home

To create a list, we will use the map() method. This will iterate over an array of items, and render each one.

src/components/home/List.js

import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'

class List extends Component {
   state = {
      names: [
         {
            id: 0,
            name: 'Ben',
         },
         {
            id: 1,
            name: 'Susan',
         },
         {
            id: 2,
            name: 'Robert',
         },
         {
            id: 3,
            name: 'Mary',
         }
      ]
   }
   alertItemName = (item) => {
      alert(item.name)
   }
   render() {
      return (
         <View> 
            {
               this.state.names.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.container}
                     onPress = {() => this.alertItemName(item)}>
                     
                     <Text style = {styles.text}>
                        {item.name}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
      )
   }
}
export default List

const styles = StyleSheet.create ({
   container: {
      padding: 10,
      marginTop: 3,
      backgroundColor: '#d9f9b1',
      alignItems: 'center',
   },
   text: {
      color: '#4f603c'
   }
})

When we run the app, we will see the list of names.

React Native ListView

You can click on each item in the list to trigger an alert with the name.

React Native Alert Box

Advertisements
E-Books Store