React-Native_Codes

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 DetailsScreen from " ./DetailsScreen " ; import CreatePostScreen from " ./CreatePostScreen " ; import RecyclerList from " ./RecyclerView " ; const Stack = createStackNavigator (); function App () { return ( < NavigationContainer > < Stack.Navigator > < Stack.Screen name = " Home " component ={ HomeScreen } /> < Stack.Screen name = " Details " component ={ DetailsScreen } /> < Stack.Screen name = " CreatePostScreen " component ={ CreatePostScreen } /> < Stack.Screen name = " RecyclerList " component ={ RecyclerList } /> </...

 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 ....

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...