what is the best way to setParams to navigation before setting the options for Navigation using setOptions?

Question

I wanna know the best way to set the params and options for react native navigation in a class component. note that the same params are used in options. when I put all code in the constructor I got params undefined because of timing issue. and it works. for me in one case when I added option in componentDidMount , I will write some examples in the code below.

1- first case using class component (it's working)

type Props = {
navigation: NavigationProp<any>;
route: RouteProps<{ Example: {title: string} }, 'Example'>
}

export default class Example extends Component <Props> {
constructor(props: Props){
   super(props)
   this.props.navigation.setParams({ title: 'title' });
}

componentDidMount(){
this.props.navigation.setOptions({ title: this.props.route.params.title })
}

...
}

2 - second case using FC: (not using this example but I think it's also the best way todo for the FC).

export function Example: React.FC = () => {
const navigation = useNavigation();
const route = useRoute();

useLayoutEffect(()=>{
navigation.setParams({ title: 'title' });
navigation.setOptions({ title: route.params.title })
})

...
}

so I hope my question is clear, is that theright way to set Header options with the lates Navigation on React Native?

Answer 1

constructor is the first step in component lifecycle, and you are setting params inside that, which means there is a prop that is going to be updated. so we need a function that understands every update on a state or received props, and that listener is nothing except "componentDidUpdate(){}" 🤟:

import {NavigationProp, RouteProp} from '@react-navigation/native';
import React, {Component} from 'react';
import {Text, StyleSheet, View} from 'react-native';
type Props = {
  navigation: NavigationProp<any>;
  route: RouteProp<{Example: {title: string}}, 'Example'>;
};

export default class Example extends Component<Props> {
  constructor(props: Props) {
    super(props);
    this.props.navigation.setParams({title: 'title'});
  }

  componentDidUpdate() {
    this.props.navigation.setOptions({title: this.props.route.params.title});
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>Use component did update :)</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    padding: 30,
  },
  textStyle: {
    color: 'black',
    fontSize: 20,
    fontWeight: 'bold',
  },
});