React navigation 5 custom header component causes crash when opening published app

Question

I want to have my own header component in React navigation 5. Everything is working fine in development and production mode however, when I build the project, open it on my phone and press the following 'Settings' screen it gives me no error log and crashes my app. I am using react native elements as a custom header component.

Versions that I am using:

• react-navigation/bottom-tabs ^5.4.5
• react-navigation/native ^5.4.0
• react-navigation/stack ^5.3.7
• expo-linear-gradient ~8.2.1

I already deconstructed some things and came to the conclusion that the following code is not working

       <Stack.Navigator 
        screenOptions={{
            header: () => (
                <Header
                    leftComponent={{ text: 'Settings', style: [t.textWhite] }}
                    rightComponent={<Icon name='user' type='font-awesome' color={'white'} />}
                    linearGradientProps={{
                        colors: ['#2c5282', '#3b8b85'],
                        start: { x: 0, y: 0.5 },
                        end: { x: 1, y: 0.5 },
                      }}
                />
            ),
        }}
        initialRouteName="SettingsIndex"
    >

Anyone knows how to solve?

EDIT (found issue)

The issue was caused by the 'linearGradientProps' in my header property. So either this could be an react-native-elements or react-nativation crash.

linearGradientProps={{
   colors: ['#2c5282', '#3b8b85'],
   start: { x: 0, y: 0.5 },
   end: { x: 1, y: 0.5 },
}}

Answer 1

Hmm I think you don't read the document carefully https://reactnativeelements.com/docs/header/#lineargradient-usage This is example you miss LinearGradient

import { Header } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';

...

<Header
  ViewComponent={LinearGradient} // Don't forget this!
  linearGradientProps={{
    colors: ['red', 'pink'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
  }}
/>