Create Flatlist

 Flatlist

 


import React, { Component } from 'react';
import { View, FlatList, StyleSheet, Text, StatusBar, Dimensions } from 'react-native';

const datalist=[{key:'1'}, {key:'2'}, {key:'3'}, {key:'4'}, {key:'5'}]

const numColumns=2;
const WIDTH=Dimensions.get('window').width

export default class RecyclerView extends Component{
formatData= (datalist, numColumns) =>{
const totalRows = Math.floor(datalist.length / numColumns)
let totalLastRow=datalist.length-(totalRows * numColumns)
while(totalLastRow !== 0 && totalLastRow !==numColumns){
datalist.push({key:"blank", empty: true})
totalLastRow++
}
return datalist
}

_renderItem=({item, index}) => {
let {itemStyle, itemText, itemInvisible} = styles
if(item.empty){
return <View style={[itemStyle, itemInvisible]}></View>
}
return(
<View style={itemStyle}>
<Text style={itemText}>{item.key}</Text>
</View>
)
}

render(){
let {container, itemText}= styles
return(
<View style={container}>
<FlatList
data={this.formatData(datalist, numColumns)}
renderItem={this._renderItem}
keyExtractor={(item, index)=> index.toString()}
numColumns={numColumns}
/>
</View>
)
}
}

const styles= StyleSheet.create({
container:{
flex: 1,
paddingTop:40
},

itemStyle:{
backgroundColor:"#3232ff",
alignItems:"baseline",
justifyContent:"center",
height:100,
flex:1,
margin:1,
height: WIDTH / numColumns
},

itemText:{
color:'#fff',
fontSize:30,
alignItems:"flex-end"
},

itemInvisible:{
backgroundColor: 'transparent'
}

})

Comments

Post a Comment

Popular posts from this blog

RecyclerView Complete App

App.js // In App.js in a new project import * as React from ' react ' ; import { NavigationContainer } from ' @react-navigation/native ' ; import { createStackNavigator } from ' @react-navigation/stack ' ; import HomeScreen from " ./HomeScreen " ; import RecyclerView from " ./RecyclerView " ; const Stack = createStackNavigator (); function App () { return ( < NavigationContainer > < Stack.Navigator > < Stack.Screen name = " Home " component ={ HomeScreen } /> < Stack.Screen name = " RecyclerView " component ={ RecyclerView } /> </ Stack.Navigator > </ NavigationContainer > ); } export default App ;      Recyclerview.js import React, {Component} from ' react ' ; import { StyleSheet, View, Dimensions, Text, Image, MaskedViewBase } from ' react-native ' ; import faker from ' faker ' ; import { Recycl...
Read more
  import  React ,  { Component ,  useEffect }  from   'react' ; import  { AsyncStorage }  from   'react-native' ; import  { useIsFocused }  from   "@react-navigation/native" ; import  { Card, Icon}  from   'react-native-elements' import  PouchDB  from   'pouchdb-react-native' import  {TouchableOpacity, View, FlatList, StyleSheet, Text, StatusBar, Dimensions, Image, Alert}  from   'react-native' ; //------Deside how many grid Display in main Activity---- var  db  =   PouchDB ( 'todo' ); export   default   function   MainActivity ( { navigation ,  route ,  props} ) {    const  isFocused  =   useIsFocused (); //----define State----    const  [id, setId]  =  React . ...
Read more

Integrating Google maps with React native

Image
Integrating Google maps with React native   React Native Map React Native Map Example  is to integrate the Google Map into your React Native Application. To integrate the Map in our example we will use a very good library called  react-native-maps . Which provides MapView component which is very easy to use. So let’s get started. To Make a React Native App Getting started with React Native  will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the  react-native-cli  command line utility. Open the terminal and go to the workspace and run npm install -g react-native-cli Run the following commands to create a new React Native project react-native init ProjectName If you want to start a new project with a specific React Native version, you can use the — version argument: react-native init ProjectName --ver...
Read more