CODEWITHSUNDEEP
react-native
ggnoredo
ggnoredo

Reputation: 821

React Native Navigation between screens from a FlatList

I want to navigate to a second screen with data from a FlatList but couldn't achieve this. Here is my code

Main Screen:

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 { createBottomTabNavigator, SafeAreaView } from "react-navigation";

class MainScreen extends React.Component {
    render() {
        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: "#ed6b21" }}>
                <CatalogList />
            </SafeAreaView>
        );
    }
}

class SecondScreen extends React.Component {
    render() {
        const { navigation } = this.props;
        const text = navigation.getParam("text", "ERROR");
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <Text>
                    PASSED DATA IS!
                    {JSON.stringify(text)}
                </Text>
            </View>
        );
    }
}

export default createBottomTabNavigator({
    .. some icons and colors ..
})

And CatalogList Module which draws the Main Screen

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);

        this.state = {
            loading: false,
            data: [],
            error: null,
            refreshing: false,
            noData: false,
            tempData: []
        };
    }

    componentDidMount() {
        this.makeRemoteRequest();
    }

    makeRemoteRequest = () => {
      .. fetch some data from url ..
    };

    render() {
        return (
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        <TouchableOpacity onPress={item.onItemPressed}>
                            <ListItem
                                title={`${item.name}`}
                                subtitle={`${item.companyname}`}
                                onPress={() => {
                                    this.props.navigation.navigate("Second", {
                                        text: `${item.name}`
                                    });
                                }}
                                containerStyle={{ borderBottomWidth: 0 }}
                            />
                        </TouchableOpacity>
                    )}
                    keyExtractor={item => item.name}
                />
            </List>
        );
    }
}

export default FlatListDemo;
module.exports = FlatListDemo;

This can render FlatList but upon click on a ListItem it throws error of

undefined is not an object (evaluating 'this2.props.navigation.navigate')

couldn't figure it out the logic behind this. I don't want to write all of my code in a single page.

Upvotes: 2

Views: 1737

Answers (2)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You need to either pass the navigation props to your Flatlist component or use withNavigator HOC to get access to the navigation props

<SafeAreaView style={{ flex: 1, backgroundColor: '#ed6b21' }}>
  <CatalogList navigation={this.props.navigation} />
</SafeAreaView>

Upvotes: 1

Manikanta Adimulam
Manikanta Adimulam

Reputation: 25

Try this



 <FlatList 
         data={this.state.data}
         renderItem={({ item }) => (
              <TouchableOpacity onPress={() => {this.props.navigation.navigate('Second'{text:`${item.name}`})}}>
        <ListItem 
        title={`${item.name}`}
        subtitle={`${item.companyname}`}
        containerStyle={{ borderBottomWidth: 0 }}
        />

    </TouchableOpacity>
    )}
    keyExtractor={item => item.name}
    />

Upvotes: 0

Related Questions