React Native – ScrollView

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, ScrollView } 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',
       },
       {
        id: 4,
        name: 'Orange',
     },
      {
        id: 5,
        name: 'Pink',
      }
    ]
 }


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

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