Passing Data from FlatList item to Another Screen in react-native expo

Before Started:

You shoud have basic knowledge about:

 

Wanted:

If i press a list item such as “I’tikaf di Masjid” then the list item data is passing to Isi Do’a screen like image below:

pass_data_flatlist
 

Question:

How to do that … ?

Answer:

We will do three step:

  • Create listDoa File for defining Do’a Harian
  • Create SecondScreen File for defining Isi Do’a
  • Create navList file for Main Navigation
  • Modify App.js

Create listDoa

Create listDoa filename under views folder and fill with this code:

import React,{ Component } from ‘react’;
import { FlatList, Text, StyleSheet, View } from ‘react-native’;

const baris = [

{ id: ‘1’, text: ‘Menuju Masjid’ },
{ id: ‘2’, text: ‘I\’tikaf di Masjid’ },
{ id: ‘3’, text: ‘Keluar Masjid’ },

]

const extractKey = ({id})=>id

export default class ListDoa extends Component {

isiDoa = arg => {

this.props.navigation.navigate(“Second”, {
itemId: arg.id,
itemTeks: arg.text

});

};

render() {

return (

<View style={styles.container}>

<FlatList

data={baris}
keyExtractor={extractKey}
renderItem={({item}) =>

<Text style={styles.tengah} onPress={this.isiDoa.bind(this,item)}>{item.text}</Text>

}

/>

</View>

)

}

}

const styles = StyleSheet.create({

container: {

flex: 1,
paddingTop: 25,

},

tengah:{

height:44,
textAlign:’center’,
marginBottom:1,
paddingTop:3,
fontSize:16,
backgroundColor:’#CCC’

}

});

Explain:

isiDoa = arg =>, this code is a function called isiDoa with arg as an argument, arg will accept item variable from this.isiDoa.bind(this, item)

 

Create SecondScreen

Create SecondScreen filename under views folder and fill with this code:

import React from ‘react’;
import { Text, View, StyleSheet } from ‘react-native’;const SecondScreen = (props) => {

const { navigation } = props
const itemId = navigation.getParam(‘itemId’)
const itemTeks = navigation.getParam(‘itemTeks’)
return(

<View style={styles.container}>
<Text onPress={()=>props.navigation.navigate(‘List’)}
style= {styles.text}>{itemTeks}</Text>
</View>

)

}
const styles = StyleSheet.create({

container: {

flex: 1,
alignItems: ‘center’,

},

text:{

marginTop:10,
color:’red’

}

})

export default SecondScreen;

Explain:

  • const { navigation } = props, this code mean all props value is assign to navigation const, this assignment called destructuring assignment
  • navigation.getParam(‘itemId’), this code is used to get ‘itemId’ parameter

 

Create navList File

Create navList filename under views folder and fill with this code:

import { createStackNavigator, createAppContainer } from ‘react-navigation’;
import React from ‘react’;import ListDoa from ‘./listDoa’;
import SecondScreen from ‘./SecondScreen’;const stackNav = createStackNavigator({

List: {

screen: ListDoa,
navigationOptions: {

title: ‘Do\a Harian’

},

},
Second: {

screen: SecondScreen,
navigationOptions: {

title: ‘Isi Do\’a’

},

},

},{headerLayoutPreset: ‘center’});

const Nav=createAppContainer(stackNav)

export default Nav;

 

Modify App.js

Modify App.js like this code below:

import React from ‘react’;import Nav from ‘./views/navList’;
const App = () => {

return (

<Nav />

)

}

export default App;

 

Thanks For Reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *