How to make a navigation from an item of FlatList in React Native?

Question

I am developing an APP using React Native now, and I want to make a navigation from every item of a FlatList.

for instance, using create-react-native-app. In App.js, the code below:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <FlatList
          data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({item}) => <Text>{item.key}</Text>}
        />
      </View>
    );
  }
}

when I click an item of FlatList, I want to navigate to another component, I code like this:

export default class App extends React.Component {
  cb() {
    this.props.navigator.push({
      component: QuestionDetail
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <FlatList
          data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({item}) => <Text onPress={this.cb.bind(this)}>{item.key}</Text>}
        />
      </View>
    );
  }
}

but there is an error.

can anyone how to make an navigator from an item of FlatList? in fact, every item of FlatList should make an navigator when clicked.

thanks!

Answer 1

export default class App extends React.Component {
  cb() {
    this.props.navigator.push({
      component: QuestionDetail
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <FlatList
          data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({item}) => 
                <TouchableOpacity onPress={() => this.cb()}> 
                    <Text>{item.key}</Text> 
                </TouchableOpacity>}
        />
      </View>
    );
  }
}

You can call the navigation function i.e cb() using a arrow function. I have used a TouchableOpacity to give the text element onPress functionality.

Answer 2

Using react-navigation (if you want to use react-native-navigation the flow is pretty similar):

Import StackNavigator:

imports...
import { Text, View, Button, FlatList, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';

Create your stack of screens/containers:

class QuestionDetailScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>QuestionDetail Screen</Text>
        <Button
          title="Go to List"
          onPress={() => this.props.navigation.navigate('List')}
        />
      </View>
    );
  }
}

In your List:

class ListScreen extends React.Component {

  cb = () => {
    this.props.navigation.push('QuestionDetail');
  }
  render() {
    return (
      <View>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <FlatList
          data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({item}) => 
             <TouchableOpacity onPress={() => this.cb()}> 
                 <Text>{item.key}</Text> 
             </TouchableOpacity>}
        />
      </View>
    );
  }
}

And finally export your stacknavigator:

const RootStack = StackNavigator(
  {
    List: {
      screen: ListScreen,
    },
    QuestionDetail: {
      screen: QuestionDetailScreen,
    },
  },
  {
    initialRouteName: 'List',
  }
);

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