CODEWITHSUNDEEP
react-native
Harjinder Singh Bobby
Harjinder Singh Bobby

Reputation: 27

FlatList Navigate to New Screen on press item React Native

I want when I press on each item of flat list its need to navigate to new page. Example if I press Devin I need to navigate to page 1, if I press Jackson It need to navigate to page 2 , and so on in my Flatlist

I do not Know How can i Achieve this, I have tried with below code, But this code Do not work and it shows Error Cant find Variable key

    if(key == 'Devin)
    {

       // Navigate to new page
    }

MY Home.js file is Below

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


export class Home extends Component {
onclick_item()
{
  if(key == 'Devin')
  {
    // navigate to Devin page
  }
  else if(key == 'Jackson')
  {
    // navigate to page 2
  }
  else if(key == 'james')
  {
   // navigate to page 3
  }

  }

  render() {
    return (
      <View>
         <FlatList
            data={[
              {key: 'Devin'},
              {key: 'Jackson'},
              {key: 'James'},
              {key: 'Joel'},
              {key: 'John'},
              {key: 'Jillian'},
              {key: 'Jimmy'},
              {key: 'Julie'},
                 ]}
              renderItem={({item}) => <TouchableOpacity onPress={() => this.onclick_item()}><Text>{item.key}</Text></TouchableOpacity>}

   </FlatList>
  </View>
  )
  }
  }

  export default Home

Upvotes: 0

Views: 3543

Answers (3)

octobus
octobus

Reputation: 1276

Assuming you will display same type of data, you should not create a page for every item. Just build one page and display the data you get from props. For example;

    <View>
      <Text>{item.name}</Text>
      <Text>{item.surname}</Text>
      <Text>{item.number} </Text>
    </View>

and you should send data as

    onclick_item(item) {
navigate("YourScreenKey",{item})
}

I would suggest to use React Navigation for if you didn't choose something yet. Here is a tutorial link giving you details how you send data and how do you fetch those data https://reactnavigation.org/docs/en/params.html

Upvotes: 1

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

Better if you use switch case rather than if else if, and you need to pass key from component to function.

import React, { Component } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  item
} from "react-native";

export class Home extends Component {
  onclick_item(key) {
    switch (key) {
      case "Devin":
        //navigate
        break;
      case "Jackson":
        //navigate
        break;
      default:
      //whatever you want
    }
  }

  render() {
    return (
      <View>
        <FlatList
          data={[
            { key: "Devin" },
            { key: "Jackson" },
            { key: "James" },
            { key: "Joel" },
            { key: "John" },
            { key: "Jillian" },
            { key: "Jimmy" },
            { key: "Julie" }
          ]}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={item => this.onclick_item(item.key)}>
              <Text>{item.key}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }
}

export default Home;

Upvotes: 2

Jebin Benny
Jebin Benny

Reputation: 951

You forgot to pass the variable to the render method.

try the following,

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


export class Home extends Component {
onclick_item(item) {
  let key = item.key
  if(key == 'Devin')
  {
    // navigate to Devin page
  }
  else if(key == 'Jackson')
  {
    // navigate to page 2
  }
  else if(key == 'james')
  {
   // navigate to page 3
  }

  }

  render() {
    return (
      <View>
         <FlatList
            data={[
              {key: 'Devin'},
              {key: 'Jackson'},
              {key: 'James'},
              {key: 'Joel'},
              {key: 'John'},
              {key: 'Jillian'},
              {key: 'Jimmy'},
              {key: 'Julie'},
                 ]}
              renderItem={
                ({item}) => 
                    <TouchableOpacity 
                       onPress={() => this.onclick_item(item)} 
                    >
                     <Text>{item.key}</Text>
                    </TouchableOpacity>}

          </FlatList>
      </View>
     )
    }
  }

  export default Home

Upvotes: 1

Related Questions