9

How do I make a Flatlist navigate to the next screen when a row is clicked inside the Flatlist in react-native?

Edited: I posted all the codes inside my JS file.

Here is my flatlist code:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    FlatList,
    Button,
    TouchableOpacity,
    TouchableHighlight
} from 'react-native'

const Tasks = (props) => {
     const { navigate } = props.navigation;
     return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Task 1'},
            {key: 'Task 2'},
            {key: 'Task 3'},
            {key: 'Task 4'},
            {key: 'Task 5'},
          ]}
          renderItem={({item}) => <TouchableHighlight onPress={() => this.goToNextScreen()}>
      <Text style={styles.item}>{item.key}</Text>}
</TouchableHighlight>}
        />
          <TouchableOpacity style={{ height: 50, marginTop: 5, marginLeft: 100, marginRight: 100 }}>
         <Button
              onPress={()=>navigate('Steps')}
              title="Steps"
              />  
              </TouchableOpacity>
      </View>
    );
  }


const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

Tasks.navigationOptions = {
    title: 'Task Order',
};

export default Tasks
6
  • This is NOT full code! No render() function? what is props.navigation?
    – David
    Jul 31, 2017 at 5:31
  • it's in the index.android.js
    – orange
    Jul 31, 2017 at 5:32
  • even it is in index.android.js, this won't work without render function!
    – David
    Jul 31, 2017 at 5:33
  • render() { const { navigation } = this.props; here is the render in the index sr
    – orange
    Jul 31, 2017 at 5:35
  • sorry im very new to react native
    – orange
    Jul 31, 2017 at 5:36

1 Answer 1

17

i have simple example for that :

//Tasks Component
const Tasks = (props) => {
     const { navigate } = props.navigation;
     //function to go to next screen
     goToNextScreen = () => {
         return navigate('Detail');
     }
     return (
      <View>
        <FlatList
          data={[
            {key: 'Task 1'},
            {key: 'Task 2'},
            {key: 'Task 3'},
            {key: 'Task 4'},
            {key: 'Task 5'},
          ]}
          renderItem={({item}) => {
              return(
                <TouchableHighlight onPress={() => this.goToNextScreen()}>
                     <Text >{item.key}</Text>
                </TouchableHighlight>
              )
            }
          }
        />
      </View>
    );
}

//example for detail screen
const Detail = (props) => {
    const { navigate } = props.navigation;
    return(
        <View><Text>Detail Screen</Text></View>
    );
}

//initial screen
const App = StackNavigator({
  Tasks: {screen: Tasks},
  Detail: {screen: Detail},
})

maybe can help you, thanks :)

4
  • gives me an error sir, saying a valid react element (or null) must be returned
    – orange
    Jul 31, 2017 at 5:11
  • why you put Button in the bottom of TouchableHighlight ? you can just use TouchableHighlight, not needed Button again Jul 31, 2017 at 5:43
  • i have try my code first before answer your question, and there is working on my device, i think there's another error with your code :) Jul 31, 2017 at 6:45
  • lol got it working earlier, then reloaded the app. It gives me like this Rawtext "onpress=" must be wrapped in explicit text
    – orange
    Jul 31, 2017 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.