CODEWITHSUNDEEP
javascriptreact-nativenavigationreact-native-navigation
Navjyot Singh
Navjyot Singh

Reputation: 105

How to assign default value in route param in react native

I want to set a default value in route param if nothing is sent from the other screen earlier we used to do like 

let phot0 = this.props.navigation.getParam("photo","empty");

what to do in react Navigation 5.x My code is..(difficulty at line no 5)

import React from "react";
import { StyleSheet, Text, View, Image, Button } from "react-native";

export default function Home({ route, navigation }) {
  const { photo } = route.params;
  return (
    <View style={styles.container}>
      <Image
        resizeMode="center"
        style={styles.imageHolder}
        source={photo === "empty" ? require("../assets/email.png") : photo}
      />
      <Button
        title="take photo"
        style={styles.button}
        onPress={() => navigation.navigate("Camera")}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  imageHolder: {
    alignSelf: "center",
  },
  button: {
    margin: 20,
  },
});

also its showing some error : undefined is not an object(evaluating 'route.params.photo').. do I always need to declare param in the sending screen?

Upvotes: 3

Views: 7227

Answers (1)

SDushan
SDushan

Reputation: 4631

You can pass some initial params to a screen in react-navigation version 5 as below,

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 100 }}
/>

According to example, If you didn't specify any params when navigating to Details screen, the initial params will be used.

For more information check below complete example

import * as React from "react";
import { Text, View, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate("Details");
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Text>itemId: {route.params.itemId}</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          /**
           * when you didn't specify itemId params the initial params will be used
           */
          initialParams={{ itemId: 100 }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Hope this helps you. Feel free for doubts.

Upvotes: 8

Related Questions