"Navigate to another screen with the FlatList component upon press, displaying specific

Question

"Navigate to another screen with the FlatList component upon press, displaying specific

I've created a flatlist of countries with a search filter using an API. I need help implementing a feature where clicking on a country's name in the list redirects to a screen that displays the country's name and number of cases. The screen I want to display this information is called LocationDataScreen. Any assistance would be greatly appreciated :)

Below is my current code snippet:

const fetchData = () => {
    const apiURL = "https://coronavirus-19-api.herokuapp.com/countries";
    fetch(apiURL)
      .then((response) => response.json())
      .then((responseJson) => {
        setFilteredData(responseJson);
        setMasterData(responseJson);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const SearchFilter = (text) => {
    if (text) {
      const newData = filteredData.filter((item) => {
        const itemData = item.country;

        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });
      setFilteredData(newData);
      setSearch(text);
    } else {
      setFilteredData(masterData);
      setSearch(text);
    }
  };

  const ItemView = ({ item }) => {
    
    return (
      <RectButton
        onPress={() => navigation.navigate("LocationDataScreen")}
        style={styles.searchcontainer}
      >
        <Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>
          {item.id}
          {item.country.toUpperCase()}
        </Text>
      </RectButton>
    );
  };

  const ItemSeparatorView = () => {
    return (
      <View
        style={{
          height: 1.5,
          width: "90%",
          marginLeft: 35,
          backgroundColor: "#f3f2f8",
        }}
      />
    );
  };

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      stickyHeaderIndices={[0]}
      style={[styles.container, { flex: 1 }]}
    >
      <SearchBarCustom
        value={search}
        placeholder="Search"
        containerStyle={{ backgroundColor: "#f3f2f8" }}
        inputContainerStyle={{
          backgroundColor: "#e3e3e9",
          height: 25,
          marginHorizontal: 5,

          marginTop: -5,
        }}
        placeholderTextColor="#96969b"
        platform="ios"
        onChangeText={(text) => SearchFilter(text)}
      />
      <FlatList
        data={filteredData}
        keyExtractor={(item, index) => index.toString()}
        ItemSeparatorComponent={ItemSeparatorView}
        renderItem={ItemView}
        style={styles.listcontainer}
      />
    </ScrollView>
  );
};

typescript react-native react-native-flatlist onpress

Answer 1

Answer №1

To send data to the LocationDataScreen.tsx, you need to pass it as props. Here's how:

Your onPress function should be like this:

onPress={() =>
  navigation.navigate('LocationDataScreen', { ...item })
}

To access the passed data, you can use the following code in your lifecycle functions (e.g., componentDidMount()):

this.props.navigation.state.params

You can also save the data directly in the state of your screen LocationDataScreen.tsx. When using a Class component, your code will look like this:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

interface Props {
  navigation: any
}

interface State {
  population: Int16Array;
  name: String
}

class LocationDataScreen extends React.Component<Props, State> {
  constructor(props:Props){
  super(props);
  this.state= {
    ...props.navigation.state.params
  }
}

  render(){
    const {population, name} = this.state;
    return (
      <View>
        <Text>Country Name - {name}</Text>
        <Text>Country Population - {population}</Text>
      </View>
    );
  }
}

export default LocationDataScreen;

When using a Function component:

function LocationDataScreen({ route, navigation }) {
  const { country, cases } = route.params

  return (
    <View style={styles.container}>
      <Text>{country}</Text>
      <Text>{cases}</Text>
    </View>
  );
}

Your stack navigator setup should look like this:

const CountryRoute = createStackNavigator(
{
   CountryList: {
     screen: CountryList,
   },
   
   LocationDataScreen: {
     screen: LocationDataScreen, 
   },

},
{
initialRouteName: 'CountryList',
},
);

For StackNavigation, make sure you are using:

"react-navigation-stack": "^1.10.3",

That should cover it.

Answer 2

To send data to the LocationDataScreen.tsx, you need to pass it as props. Here's how:

Your onPress function should be like this:

onPress={() =>
  navigation.navigate('LocationDataScreen', { ...item })
}

To access the passed data, you can use the following code in your lifecycle functions (e.g., componentDidMount()):

this.props.navigation.state.params

You can also save the data directly in the state of your screen LocationDataScreen.tsx. When using a Class component, your code will look like this:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

interface Props {
  navigation: any
}

interface State {
  population: Int16Array;
  name: String
}

class LocationDataScreen extends React.Component<Props, State> {
  constructor(props:Props){
  super(props);
  this.state= {
    ...props.navigation.state.params
  }
}

  render(){
    const {population, name} = this.state;
    return (
      <View>
        <Text>Country Name - {name}</Text>
        <Text>Country Population - {population}</Text>
      </View>
    );
  }
}

export default LocationDataScreen;

When using a Function component:

function LocationDataScreen({ route, navigation }) {
  const { country, cases } = route.params

  return (
    <View style={styles.container}>
      <Text>{country}</Text>
      <Text>{cases}</Text>
    </View>
  );
}

Your stack navigator setup should look like this:

const CountryRoute = createStackNavigator(
{
   CountryList: {
     screen: CountryList,
   },
   
   LocationDataScreen: {
     screen: LocationDataScreen, 
   },

},
{
initialRouteName: 'CountryList',
},
);

For StackNavigation, make sure you are using:

"react-navigation-stack": "^1.10.3",

That should cover it.

Answer 3

Answer №2

Feel free to take a look at this Snack I put together for you. It showcases the implementation.

Your ItemView function should be structured like this

const ItemView = ({ item }) => {
    return (
      <RectButton
        onPress={() =>
          navigation.navigate('LocationDataScreen', { item })
        } // This line passes all item keys as props for the next screen
        style={styles.searchcontainer}>
        <Text style={[styles.itemStyle, { textTransform: 'capitalize' }]}>
          {item.id}
          {item.country.toUpperCase()}
        </Text>
      </RectButton>
    );
  };

Your LocationDataScreen.js screen should resemble this

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

function LocationDataScreen({ route, navigation }) { // You can access props from here
  const { item } = navigation.state.params || {};
  return (
    <View style={styles.container}>
      <Text>Country Name - {item.name}</Text>
      <Text>Country Cases - {item.cases}</Text>
    </View>
  );
}

export default LocationDataScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

To set the Custom Header Title as item.country, follow this approach

In your ItemView function, adjust your onPress as shown below

onPress={() =>
          navigation.navigate('Screen2', { item: item, name: item.country })
        }

Your Stack.Screen configuration for the second screen should be set up like this

  <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={({ route }) => ({
          headerTitle: route.params.name,
          headerShown: true,
        })}
      />

By clicking on the country, you'll now see its name displayed as the Header title.

Refer to my Snack for a demonstration of how it works.

Answer 4

Feel free to take a look at this Snack I put together for you. It showcases the implementation.

Your ItemView function should be structured like this

const ItemView = ({ item }) => {
    return (
      <RectButton
        onPress={() =>
          navigation.navigate('LocationDataScreen', { item })
        } // This line passes all item keys as props for the next screen
        style={styles.searchcontainer}>
        <Text style={[styles.itemStyle, { textTransform: 'capitalize' }]}>
          {item.id}
          {item.country.toUpperCase()}
        </Text>
      </RectButton>
    );
  };

Your LocationDataScreen.js screen should resemble this

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

function LocationDataScreen({ route, navigation }) { // You can access props from here
  const { item } = navigation.state.params || {};
  return (
    <View style={styles.container}>
      <Text>Country Name - {item.name}</Text>
      <Text>Country Cases - {item.cases}</Text>
    </View>
  );
}

export default LocationDataScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

To set the Custom Header Title as item.country, follow this approach

In your ItemView function, adjust your onPress as shown below

onPress={() =>
          navigation.navigate('Screen2', { item: item, name: item.country })
        }

Your Stack.Screen configuration for the second screen should be set up like this

  <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={({ route }) => ({
          headerTitle: route.params.name,
          headerShown: true,
        })}
      />

By clicking on the country, you'll now see its name displayed as the Header title.

Refer to my Snack for a demonstration of how it works.

"Navigate to another screen with the FlatList component upon press, displaying specific

Answer №1

Answer №2

Similar questions

An automatic conversion cannot handle spaces and prohibited characters in Object keys

User's information will only be updated once the page is refreshed

Encountered an HttpErrorResponse while trying to access the API endpoint

I am interested in utilizing Template literal types to symbolize placeholders

NX combined with Nest.js and TypeORM, further enhanced with Webpack and Migrations

javascript identify dissimilarities within arrays

Unable to successfully import Node, JS, or Electron library into Angular Typescript module despite numerous attempts

Tips for patiently anticipating the completed response within an interceptor

Setting up tsconfig.json to enable support for either string literals or string templates involves adjusting the compiler options

Issue with React Redux: Store dispatch not causing component update

Is it possible to create a map of functions that preserves parameter types? How can variadic tuple types in TypeScript v4 potentially enhance this

Encountering issues with accessing the clientWidth and clientHeight references of the DOM in Vue

The MemoizedSelector cannot be assigned to a parameter of type 'string'

A step-by-step guide on creating a Decorator using the TypeScript compile API

"Unleashing the power of React Native: A single button that reveals three different names

core.js encountered an error at line 6237: Unable to assign value to property 'area' as it is undefined

What is the best way to utilize ngFor for iterating through a Map variable of classes in TypeScript?

Obtain form data as an object in Vue when passed in as a slot

Conceal the HTML element within a subscription

Can a TypeScript generator function be accurately typed with additional functionality?