How can I customize navigation in React Navigation v5?

How can I customize navigation in React Navigation v5?

You can customize navigation in React Navigation v5 by using custom navigators, screens, and options. What specific customization are you looking for?

I want to change the header style and add a custom back button.

To change the header style, you can use the headerStyle option in your screen options. For a custom back button, you can create a custom component and set it in the headerLeft option.

Can you show me an example of how to implement a custom back button?

Sure! You can create a custom back button like this:

import { TouchableOpacity, Text } from 'react-native';

const CustomBackButton = ({ navigation }) => {
  return (
    <TouchableOpacity onPress={() => navigation.goBack()}>
      <Text>Back</Text>
    </TouchableOpacity>
  );
};

Then use it in your screen options:

navigationOptions: {
  headerLeft: () => <CustomBackButton navigation={navigation} />,
},

That makes sense! How do I style the header?

You can style the header by using the headerStyle option. For example:

headerStyle: {
  backgroundColor: 'blue',
  height: 100,
},