CODEWITHSUNDEEP
react-nativereact-native-flatlist
Basit
Basit

Reputation: 367

How to pass data in react native FlatList as props while navigating screens

I am creating list of data using react native FlatList, in RootStack navigator passing FlatList component as Home screen, while Details component as DetailsScreen. I want details screen show dynamic data, whatever the id and text of the flatlist item will display in details screen. I know how to go to the new screen but I am unable to figure out how to pass List component state data as props to Details component.

I am also getting an error "Failed child context type".

I hope I am clear. Its been three hours I am trying to solve this problem. This would so nice of you if you help me figure out this problem.

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

class List extends Component {
  state = {
    rows: [
      { id: 0, text: 'View' },
      { id: 1, text: 'Text' },
      { id: 2, text: 'Image' },
      { id: 3, text: 'ScrollView' },
      { id: 4, text: 'ListView' }
    ]
  };

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate(
            'Details',
            {
              /*how to pass data here*/
            }
          )}
      >
        <Text style={styles.row}>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  render() {
    const extractKey = ({ id }) => id;
    return (
      <FlatList
        style={styles.container}
        data={this.state.rows}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>The id is {this.props.id} /*how to get data here*/</Text>
        <Text>you are in {this.props.text} /*how to get data here*/</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator({
  List: List,
  Details: DetailsScreen
});

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flex: 1
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue'
  }
});

You can get the immediate result by pasting this code in Expo

Upvotes: 1

Views: 3650

Answers (1)

RegularGuy
RegularGuy

Reputation: 3676

 <TouchableOpacity
    onPress={() =>
      this.props.navigation.navigate(
        'Details',
        {
          /*how to pass data here*/
          Name:'Jhon Lennon',
          Age: 58 
          Male: true
        }
      )}
  >

In details screen 

class DetailsScreen extends React.Component {

  componentDidMount() {
     this.getInfo();
  }

  getInfo(){
  //you can do it this way or access it directly 
  //var Name =this.props.navigation.getParam('Name ', 'No Name'); //second parameter is a callback
  //var Age=this.props.navigation.getParam('Age', 20);
  //var Male=this.props.navigation.getParam('Male', false);
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>The Name is {this.props.navigation.state.params.Name||'NoName'} /*NoName is also a callback*/</Text>
        <Text>you are {this.props.navigation.state.params.Age||'0'} years old /*0 is the callback*/</Text>
      </View>
    );
  }
}

More information here

Also, you should avoid wraping the root navigator inside a component

const AppContainer = createAppContainer(RootStack);

    export default class App extends React.Component {
      render() {
        return <AppContainer />;
      }
    }

Should be just 

export default createAppContainer(RootStack);

Upvotes: 1

Related Questions