How to navigate to next screen with data in react native

user_15257538 0
Viewed 543

I am very newly in react native app developement. I have problem is am try to navigate to first screen to second screen with data(String and image) also. but will try to navigate error. The error was navigate is not defined. Please solve my issues and edit my code . I have attached my code for your reference .

    import React from 'react';
    import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity } from 'react-native';
function Item({ item }) {
  return (
    <View style={styles.listItem}>
      <Image source={{uri:item.photo}}  style={{width:60, height:60,borderRadius:30}} />
      <View style={{alignItems:"center",flex:1}}>
        <Text style={{fontWeight:"bold"}}>{item.name}</Text>
        <Text>{item.position}</Text>
      </View>
      <TouchableOpacity 
      onPress={() => getItem(item)}
      style={{height:50,width:50, justifyContent:"center",alignItems:"center"}}>
        <Text style={{color:"green"}}>Call</Text>
      </TouchableOpacity>
    </View>
  );
}
 const getItem = (item) => {
    // Function for click on an item
    alert('Id : ' + item.id + ' Title : ' + item.position);
  };
  
 const getpress=(item)=> {
    this.props.navigation.navigate('SecondPage', {
      itemId: item.name,
      title: item.position.rendered,
    });
  }


export default class FirstPage extends React.Component {
  state = {
    data:[
        {
            "name": "Miyah Myles",
            "email": "miyah.myles@gmail.com",
            "position": "Data Entry Clerk",
            "photo": "https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
        },
        {
            "name": "June Cha",
            "email": "june.cha@gmail.com",
            "position": "Sales Manager",
            "photo": "https:\/\/randomuser.me\/api\/portraits\/women\/44.jpg"
        }
    ]
  }

  render(){
    //const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>navigate('SecondPage')}>
        <FlatList
          style={{flex:1}}
          data={this.state.data}
          renderItem={({ item }) => <Item item={item}/>}
          keyExtractor={item => item.email}
        />
        </TouchableOpacity>
      </View>
    );
  } 
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F7F7F7',
    marginTop:60
  },
  listItem:{
    margin:10,
    padding:10,
    backgroundColor:"#FFF",
    width:"80%",
    flex:1,
    alignSelf:"center",
    flexDirection:"row",
    borderRadius:5
  }
});
react-native-flatlist react-native reactjs onclick javascript
2 Answers

I assume that you want to navigate to the Second page when your Flatlist item press with the params. So don't put complete flatlist in a Touchable despite only wrap the Item with Touchable and pass the onPress as props to the Item From the Parent.

Here is the code:

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

function Item({item, onPress}) {
  return (
    <View style={styles.listItem}>
      <Image
        source={{uri: item.photo}}
        style={{width: 60, height: 60, borderRadius: 30}}
      />
      <View style={{alignItems: 'center', flex: 1}}>
        <Text style={{fontWeight: 'bold'}}>{item.name}</Text>
        <Text>{item.position}</Text>
      </View>
      <TouchableOpacity
        onPress={() => onPress(item)}
        style={{
          height: 50,
          width: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{color: 'green'}}>Call</Text>
      </TouchableOpacity>
    </View>
  );
}
const getItem = item => {
  // Function for click on an item
  alert('Id : ' + item.id + ' Title : ' + item.position);
};

export default class FirstPage extends React.Component {
  state = {
    data: [
      {
        name: 'Miyah Myles',
        email: 'miyah.myles@gmail.com',
        position: 'Data Entry Clerk',
        photo:
          'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6',
      },
      {
        name: 'June Cha',
        email: 'june.cha@gmail.com',
        position: 'Sales Manager',
        photo: 'https://randomuser.me/api/portraits/women/44.jpg',
      },
    ],
  };

  getpress = item => {
    this.props.navigation.navigate('SecondPage', {
      itemId: item.name,
      title: item.position.rendered,
    });
  };

  render() {
    //const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <FlatList
          style={{flex: 1}}
          data={this.state.data}
          renderItem={({item}) => <Item item={item} onPress={this.getpress} />}
          keyExtractor={item => item.email}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F7F7F7',
    marginTop: 60,
  },
  listItem: {
    margin: 10,
    padding: 10,
    backgroundColor: '#FFF',
    width: '80%',
    flex: 1,
    alignSelf: 'center',
    flexDirection: 'row',
    borderRadius: 5,
  },
});
user_137950890

In your first page:

const getpress = (item) => {
        this.props.navigation.navigate('SecondPage', {
          itemId: item.name,
          title: item.position.rendered
        });
      }

In your second page:

function SecondPage({ route, navigation }) {
      const { itemId, title } = route.params;
      return (
         //...
      );
    }
user_117800400
Related