How to use Themeprovider in react-navigation

In my case, i want to manage header backgroundColor with ThemeProvider , how to use them in navigationOptions, example code below :

/**
 * @flow
 */

import React from 'react'
import { Text, View, StatusBar } from 'react-native'
import styled, { withTheme } from 'styled-components/native'
import Ionicons from 'react-native-vector-icons/Ionicons'

let HeaderTitle = styled.TouchableOpacity`
  width:100%;
  height: 30;
  align-self: center;
`
let SearchBar = styled.View`
  height: 30;
  border-radius:30;
  background: #fff;
  flex-direction:row;
  align-items:center;
  justify-content:center;
`
let SearchBarText = styled.Text`
 
`
let HeaderLeft = styled.TouchableOpacity`
  padding-horizontal: 20;
`
let HeaderRight = styled.TouchableOpacity`
  padding-horizontal: 20;
`
class HomeScreen extends React.Component {
  static navigationOptions =({navigation, screenProps}) => ({
    headerStyle: {
      backgroundColor: '#E5466E'
    },
    headerTitle: (
      <HeaderTitle>
        <SearchBar>
          <Ionicons
            name={'ios-search'}
            size={16}
            style={{
              paddingRight: 10,
              color: '#999'
            }}
          />
          <SearchBarText>search</SearchBarText>
        </SearchBar>
      </HeaderTitle>
    ),
    headerRight: (
      <HeaderRight>
        <Ionicons
          name={'ios-mail-outline'}
          size={24}
          style={{
            color: '#fff'
          }}
        />
      </HeaderRight>
    ),
    headerLeft: (
      <HeaderLeft>
        <Ionicons
          name={'md-aperture'}
          size={21}
          style={{
            color: '#fff'
          }}
        />
      </HeaderLeft>
    )
  })
  render () {
    console.log('render', this.props)
    return (
      <View>
        <StatusBar
          barStyle='light-content'
        />
        <Text>首页</Text>
      </View>
    )
  }
}
export default withTheme(HomeScreen)

in navigationOptions i want use theme like this

headerStyle: {
      backgroundColor: theme.primaryColor
    },

instead of

headerStyle: {
      backgroundColor: '#E5466E'
    },

I need some help 🆘

[k15a]

Ahh sorry I know see that you already applied withTheme. I have never used react-navigation but it seems that there is an extra screenProps which you can use to apply some additional props. As far as I know you have to apply them when you render HomeScreen.

class HomeScreen extends React.Component {
  static navigationOptions =({ navigation, screenProps }) => ({
    headerStyle: {
      backgroundColor: screenProps.theme.yourColor
    }
  )}
}

const Navigation = StackNavigator({
  HomeScreen,
})

export default withTheme(({ theme }) => {
  return <Navigation screenProps={{ theme }} />
})

There might be a better solution for it but this is the only one I am aware of.

[elprup]

updated to v3:

class HomeScreen extends React.Component {
  static navigationOptions =({ navigation, screenProps }) => ({
    headerStyle: {
      backgroundColor: screenProps.theme.yourColor
    }
  )}
}

const Navigation = createStackNavigator({
  HomeScreen,
})

const AppContainer = createAppContainer(Navigation);
const AppContainerWithTheme = withTheme(({ theme }) => {
  return <AppContainer screenProps={{ theme }} />;
});

// other file using navigation
<AppContainerWithTheme 
      ref={mynav => {
       this.navigator = mynav;
      }}
/>