I am still learning React Native and I am stuck with navigating to a screen with some params. I know that to pass a param to another screen we can do it like this:

/item/[id].jsx

const ItemDetailsScreen = () => {
    const { id } = useLocalSearchParams();
    return (
        <View ...>
             ...
        </View>
    );
};

And in the previous screen we just call: router.push(``/item/${id}``)

Now, what if I need to pass two params: id and name?

Thank you.

I am still learning React Native and I am stuck with navigating to a screen with some params. I know that to pass a param to another screen we can do it like this:

/item/[id].jsx

const ItemDetailsScreen = () => {
    const { id } = useLocalSearchParams();
    return (
        <View ...>
             ...
        </View>
    );
};

And in the previous screen we just call: router.push(``/item/${id}``)

Now, what if I need to pass two params: id and name?

Thank you.

• javascript
• react-native
• expo

• docs.expo.dev/router/reference/url-parameters – Guy Incognito Commented Feb 5 at 10:04
• Check this answer, is very good! stackoverflow.com/a/76700205/7992748 – Giannis Apostolou Commented Feb 5 at 11:36
• Thank you for the suggestions. I was thinking that maybe we can do something like [id][name].jsx but I guess we can't. And reading the answer below, I think I will just do router.push(/item/details, { params: { id, name } }) instead. It just feels wrong to have one param to be handled one way, and another one the other way like in the answer. Thanks guys. – Bawenang Rukmoko Pardian Putra Commented Feb 5 at 13:33

2 Answers 2

You can do this way because you are using Native

import { useNavigation } from '@react-navigation/native';

const Screen1 = () => {
  const navigation = useNavigation();

  const navigateToScreen2 = () => {
    navigation.navigate('Screen2', {
      param1: 'value1',
      param2: 'value2',
    });
  };

  return (
    <View>
      <Button title="Go to Screen2" onPress={navigateToScreen2} />
    </View>
  );
};

You can pass the name in the params object:

router.push(`/item/${id}`, { params: { name } })