Pass properties from screen to screen or with initialParams

[scinfu]

How can I pass a one o more values from screen to screen?
Normally we do :

<Stack.Screen name="First" component={FirstScreen} initialParams={{ value: 42 }}/>

or

navigation.navigate({name: 'First',params:...

export function FirstScreen({ navigation, route }) {
  let value = 0
  useEffect(() => {
    if (route.params?.value) {
      value = route.params?.value
    }
  }, [route.params?.value])
  return (
    <Screen style={ROOT} preset="scroll">
      <Text preset="header" text="" />
      <Text> {value} </Text>
    </Screen>
  )
}

but now with observer?

export const FirstScreen = observer(function FirstScreen() {
  let value = 0
  useEffect(() => {
  }, [])
  return (
    <Screen style={ROOT} preset="scroll">
      <Text preset="header" text="" />
      <Text> {value} </Text>
    </Screen>
  )
})

[jamonholmgren]

Hey @scinfu ! Great question.

What I recommend is to store those things in your MST store(s) and then retrieve them in the next screen.

rootStore.setValue(42)
navigation.navigate({name: 'First'})

On your FirstScreen:

export const FirstScreen = observer(function FirstScreen() {
  const { value } = useStores()
  useEffect(() => {
  }, [])
  return (
    <Screen style={ROOT} preset="scroll">
      <Text preset="header" text="" />
      <Text> {value} </Text>
    </Screen>
  )
})

[ryanlntn]

React navigation has hooks now: https://reactnavigation.org/docs/use-route/

export const FirstScreen = observer(function FirstScreen() {
  const route = useRoute<AppRoutes<'FirstScreen'>>()
  const value = route.params.value
  
  return (
    <Screen style={ROOT} preset="scroll">
      <Text preset="header" text="" />
      <Text> {value} </Text>
    </Screen>
  )
})