react-native-geometrical-shapes/src/components/ShapeLister.js

import and use geometical shapes

import { Text, View, FlatList, TouchableOpacity } from "react-native"

const ShapesLister = ({data, selectedshape}) =>{

const selectedshapefun = (item) =>{
    selectedshape(item)
}
  return(
    <View style={{ justifyContent: 'center', 
    alignItems: 'center', width: '100%',
    marginTop: 60 }} >
      <FlatList
        data={data}
        style={{ alignSelf: 'auto' }}
        numColumns={2}
        renderItem={({item, index})=>{
             return(
                <TouchableOpacity onPress={()=>{selectedshapefun(item)}} style={{ width: 100, height: 30, backgroundColor: 'red',
                 justifyContent: 'center', alignItems: 'center', marginRight: 20,
                  marginBottom: 50, marginLeft: index == data.length-1 ? 60 : 0  }}
                  >
                  <Text style={{ color: 'white', fontWeight: 'bold' }} >{item}</Text>
                </TouchableOpacity>
             )
        }}
      />
    </View>
  )
}

export default ShapesLister