React Native Listview

React Native listview is an easy and reusable React component to render lists of items. ListView in React Native is a view component that shows a list of items in a vertical scrollable list. For example, react listview can be used to render a list of contacts, purchases, messages, or other items. Here is how you can handle the ListView (and any other element) in your own app.

Example

// App.js

import React, {Component} from 'react';  
import {Text, View } from 'react-native';
import Display from './Display'

export default class App extends Component {  

render() {    
return (
    <View>
      <Display/>
    </View>
  );
}
}

Lets create another component

// Display.js 

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

class Display extends Component {
    state = {
        alphabets: [
          {
             id: 0,
             name: 'A',
          },
          {
             id: 1,
             name: 'B',
          },
          {
             id: 2,
             name: 'C',
          },
          {
             id: 3,
             name: 'D',
          },
          {
            id: 4,
            name: 'E',
         }
       ]
    }
    alertItemName = (alphabets) => {
       alert(alphabets.name)
    }
    render() {
       return (
          <View>
             {
                this.state.alphabets.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 Display
 
 const styles = StyleSheet.create ({
    container: {
       padding: 10,
       marginTop: 3,
       backgroundColor: '#F9A18E',
       alignItems: 'center',
    },
    text: {
       color: '#201E1E'
    }
 })

Output

onClick