use Mobx store in Navigation header

Question

//{Imports Here}

 const LoggedOut = createStackNavigator({
  Login: {
    screen: Login,
    navigationOptions: { header: null }
  }
});

const LoggedIn = createStackNavigator({
  Home: {
    navigationOptions: ({ navigation}) => ({
      headerRight: (
        <View style={[styles.alternativeLayoutButtonContainer]}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate("SelectFlag");
            }}
          >
            <Text
              style={[
                styles.awesomePhone,
                store.user.agent.calling
                  ? (style = { color: "#444" })
                  : (style = { color: "red" })
              ]}
            >
              &#xf095;
            </Text>
          </TouchableOpacity>

        </View>
      )
    }),

 SelectFlag: {
    screen: SelectFlag,
    navigationOptions: { header: null }
  }
  //{Other Screens here}
});



const App = ({ store }) =>
  store.user.isLoggedIn ? <LoggedIn /> : <LoggedOut />;

export default inject("store")(observer(App));

this is my code and i am desperately trying to use a value out of the Mobx store (store.user.agent.calling) to check if someone is calling or not.

i tried:

//navigationOptions: ({ navigation, store}) => ({

and tried to @inject it somehow to the TouchableOpacity but i ran out of ideas to fix it

... well I tried more than its two things but in my head this two seemed the most logical reasonable ones.

sorry i this is a dumb question but i´m really new to Mobx

Answer 1

well I stoped trying to inject it somehow direktly to the component and i packed in a seperate class like this:

//{Imports here}

 @inject("store")
 export default class IncommingCall extends Component {
   render() {
     return (
       <View>
         <TouchableOpacity
           onPress={() => {
             navigation.navigate("SelectFlag");
           }}
         >
           <Text
             style={[
               styles.awesomePhone,
               !this.props.store.user.agent.calling
                 ? (style = { color: "#444" })
                 : (style = { color: "red" })
             ]}
           >
             &#xf095;
           </Text>
         </TouchableOpacity>
       </View>
     );
   }
 }