React Native – ListView

In this example we will create array of color. On click event we will display the object name.

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

export default class App extends Component {  
  state = {
    color: [
       {
          id: 0,
          name: 'Red',
       },
       {
          id: 1,
          name: 'Green',
       },
       {
          id: 2,
          name: 'Yellow',
       },
       {
          id: 3,
          name: 'Blue',
       }
    ]
 }
 displayItemName = (item) => {
    alert(item.name)
 }

 render() {
  return (
     <View>
        {
           this.state.color.map((item) => (
              <TouchableOpacity
                 key = {item.id}
                 style = {styles.container}
                 onPress = {() => this.displayItemName(item)}>
                 <Text style = {styles.text}>
                    {item.name}
                 </Text>
              </TouchableOpacity>
           ))
        }
     </View>
  )
}
}

const styles = StyleSheet.create ({
  container: {
     padding: 30,
     marginTop: 3,
     
     backgroundColor: '#F9E79F',
     alignItems: 'center',
  },
  text: {
     color: '#BA4A00',
     fontSize:30
  }
}) 
Output