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 ponent, I code like this:

export default class App extends React.Component {
  cb() {
    this.props.navigator.push({
      ponent: 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!

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 ponent, I code like this:

export default class App extends React.Component {
  cb() {
    this.props.navigator.push({
      ponent: 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!

• javascript
• reactjs
• react-native

• are you using react-navigation? – Anthony Commented Feb 13, 2018 at 11:50
• no, I don't know how to use it. In fact, I want to render a list using FlatList, and when clicking each item, the page will go to another ponent – hanzichi Commented Feb 13, 2018 at 13:07

2 Answers 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 />;
  }
}

export default class App extends React.Component {
  cb() {
    this.props.navigator.push({
      ponent: 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.