React Native header is broken

Question

The header of a React Native app is not displaying right. It broke after updating react-navigation .

package.json

  "dependencies": {
    "@expo/samples": "2.1.1",
    "expo": "^31.0.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-navigation": "^3.0.9",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "jest-expo": "^31.0.0"
  }

HomeScreen

  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
  },
  {
    initialRouteName: 'AuthLoading',
    headerMode: 'float',
    navigationOptions: {
      headerRight: <SettingButton />, // this is class base component
      headerTintColor: '#333333',
      headerTitle: <LogoTitle />, // this is class base component
      headerStyle: {
        backgroundColor: '#F5FCFF',
        borderBottomWidth: 0,
      }
    }
  }
));

Answer 1

I have used it like this

initialRouteName: 'TaskList',
        headerMode: 'float',
        navigationOptions: {
            headerRight: <SettingButton/>, // this is class base component 
            headerTintColor: '#333333',
            headerTitle: <LogoTitle/>, // this is class base component
            headerStyle: {
                backgroundColor: '#F5FCFF',
                borderBottomWidth: 0,
            }
        }

In SettingButton and LogoTitle you can define your custom header's icon and design you can also use image.