route props on options

[eShookDev]

Hi, If you want write custom title with route props thats a problem. How can i solved it??

Example

Main: { name: 'Main', component: Main, options: ({ route }) => ({ title: route.params.title, ...screenDefaultOptions(), }), },

I think the problem is here... type ScreenInfo = BaseScreenInfo & { options: () => NativeStackNavigationOptions; };

[kanzitelli]

Hey @eShookDev. Yes, it's not supported at the moment, because route needs to be passed down. I'll think about it and implement it when I have time.

However, what I usually do in this situation is setting nav title in component's useEffect using setOptions().

Something like that:

export const Screen: React.FC<Props> = observer(({route}) => {
  const navigation = useNavigation();

  const updateNavHeader = useCallback(() => {
    navigation.setOptions({
      title: route.params.title,
    });
  }, [navigation, route.params.title]);

  useEffect(() => { updateNavHeader() }, [updateNavHeader]);

  ...
});

Let me know how it goes!

[eShookDev]

Works perfectly. I Hope next release put this feature directly on options.. Thank u man

[kanzitelli]

With the new version, you can do it when defining screens:

const screens: ScreensInfo = {
  // ...
  Product: {
    component: Product,
    options: props => ({
      title:  'Product # ' + (props.route.params as ScreenProps['Product'])?.id,
      ...screenDefaultOptions(),
    }),
  },
}