Show Image Second Screen with id in Flatlist

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} />
</Stack.Navigator>
</NavigationContainer>
);
}

export default App;

 

 

RecyclerView.js

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

const datalist=[
{key:'1', image:require("./img1.png")},
{key:'2', image:require("./img2.png")},
{key:'3', image:require("./img3.jpeg")},
{key:'4', image:require("./img1.png")},

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

function RecyclerList({ navigation, route}) {
//Empty row handle
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", image:"blank", empty: true })
totalLastRow++
}
return datalist
}
//
_renderItem=({item, index}) => {
let {itemStyle, itemText, itemInvisible, itemimg} = styles
if(item.empty){
return <View style={[itemStyle, itemInvisible]}></View>
}
return(
<View style={itemStyle}>
<TouchableOpacity style={itemimg} onPress={() =>navigation.navigate('Details',
{
imgname:item.image
})}>
<Image style={itemimg} source={item.image}/>
</TouchableOpacity>
</View>
)
}

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

const styles= StyleSheet.create({
container:{
flex: 1,
paddingTop:5,
},
container2:{
flex: 1,
margin: 10
},

itemStyle:{
padding:5,
alignItems:"center",
justifyContent:"center",
height:100,
flex:1,
margin:1,
height: WIDTH / numColumns
},

itemText:{
color:'#fff',
fontSize:30,
alignItems:"center"
},

itemimg:{
borderWidth:2,
width:"100%",
height: "100%",
alignItems:"center",
justifyContent:"center",
},

itemInvisible:{
backgroundColor: 'transparent'
}

})
export default RecyclerList;

 

 

DetailsScreen.js

import * as React from 'react';
import { View, Text, Button, Image, StyleSheet } from 'react-native';


function DetailsScreen({ navigation , route}) {
const{imgname}= route.params;
let {container, itemStyle} = styles

return (
<View style={container}>
<Text style={{fontSize:20}}>Details Screen</Text>
<Text></Text>
<Text style={{fontSize:20}}>{imgname}</Text>
<Text></Text>
<Image style={itemStyle} source={imgname}/>
<Button
title="Go to Home Screen"
onPress={() => navigation.navigate('Home')}
/>
</View>
);
}
export default DetailsScreen;
const styles= StyleSheet.create({
container:{
flex: 1,
paddingTop:5,
},
itemStyle:{
alignItems:"center",
justifyContent:"center",
height:300,
width:"100%",
},
})

 

 

 

HomeScreen.js

import * as React from 'react';
import { View, Text, Button } from 'react-native';
function HomeScreen({ navigation, route}) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Create post"
onPress={() => navigation.navigate('CreatePostScreen')}
/>
<Text></Text>
<Button
title="Recycler View Screen"
onPress={() => navigation.navigate('RecyclerList')}
/>
<Text></Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
navigation.navigate('Details', {
itemid: route.params?.id,
name: route.params?.name,
post: route.params?.post
});
}}
/>
</View>
);
}
export default HomeScreen;

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