CODEWITHSUNDEEP
react-native
ggnoredo
ggnoredo

Reputation: 821

can't pass data from FlatList via react navigation

Recently i fix the issue on navigation between pages but now i just can't pass data from FlatList to another screen via react navigation

snack link

navigation occurs but never passes the data. I include both screens, CatalogScreen and PDFScreen, in App.js. Initial screen appears with daha no issue here but i want to pass a variable to another screen so i can get some other data with that variable query from remote server. But it always fails no matter what i tried so far from documentation and examples.

App.js

import React, { Component } from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import Ionicons from 'react-native-vector-icons/Ionicons';
var CatalogList = require('./catalogFlatList');
import {  SafeAreaView, createStackNavigator } from 'react-navigation';
import { ReactiveTest } from "rx";
import PDFExample from "./catalogPDF";

class CatalogScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: '#ed6b21' }}>
        <CatalogList navigation={this.props.navigation}/>
      </SafeAreaView>
    );
  }
}
class PDFScreen extends React.Component {
  render () {
    const { navigation } = this.props;
    const qtext = navigation.getParam('qtext', 'NO-ID');
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: '#ed621' }}>
        <PDFExample />
      </SafeAreaView>
    )
  }
}
const RootStack = createStackNavigator(
  {
    Home: CatalogScreen,
    Details: PDFScreen,
  },
  {
    initialRouteName: 'Home',
  }
);
export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

Main Screen (in App.js)

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";

class FlatListDemo extends Component {
  constructor(props) {
    super(props);
    .. some working code here ..
    return (
  render() {
    const { navigate } = this.props.navigation;   
    return (
        <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
          <FlatList
            data={this.state.data}
            renderItem={({ item }) => (
              <TouchableOpacity onPress={() => {this.props.navigation.navigate('Detais', {qtext:`${item.first}`})}}>
              <ListItem
                title={item.first}
                subtitle={item.email}
                containerStyle={{ borderBottomWidth: 0 }}
              />
              </TouchableOpacity>
            )}
            keyExtractor={item => item.name}
            ItemSeparatorComponent={this.renderSeparator}
            ListHeaderComponent={this.renderHeader}
            ListFooterComponent={this.renderFooter}
          />
        </List>
    );
  }
}

export default FlatListDemo;
module.exports = FlatListDemo;

Details Screen -> Final Screen

import React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import Pdf from 'react-native-pdf';

class PDFExample extends React.Component {
    componentDidMount() {
        this.makeRemoteRequest();
      }
      makeRemoteRequest = () => {
        const url = `some other url/${this.props.navigation.params.qtext}`;
        .. some other code that won't run because i can't get qtext ..
    render() {
        return (
           .....
        )
  }
}

Upvotes: 1

Views: 271

Answers (1)

Ross Allen
Ross Allen

Reputation: 44880

The navigation prop is only passed to Screens, the components that you configure in your ReactRouter. PDFExample is not being used as a screen, so it will not get navigation as a prop. You can either pass the entire navigation object explicitly from PDFScreen or pass just the qtext value to it:

class PDFScreen extends React.Component {
  render () {
    const { navigation } = this.props;
    const qtext = navigation.getParam('qtext', 'NO-ID');
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: '#ed621' }}>
        <PDFExample
          navigation={navigation}
          qtext={qtext}
        />
      </SafeAreaView>
    )
  }
}

Upvotes: 2

Related Questions