FlatList onClick navigate to next screen

Question

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

Formulary

This is NOT full code! No render() function? what is props.navigation? – Seitz

it's in the index.android.js – Formulary

even it is in index.android.js, this won't work without render function! – Seitz

render() { const { navigation } = this.props; here is the render in the index sr – Formulary

sorry im very new to react native – Formulary

render() function must return sth! I think you need go through react basics first before you ask questions here. – Seitz

Answer 1

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

Ultramontane

gives me an error sir, saying a valid react element (or null) must be returned – Formulary

why you put Button in the bottom of TouchableHighlight ? you can just use TouchableHighlight, not needed Button again – Ultramontane

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 :) – Ultramontane

lol got it working earlier, then reloaded the app. It gives me like this Rawtext "onpress=" must be wrapped in explicit text – Formulary