CODEWITHSUNDEEP
react-nativereact-navigation
Tlow
Tlow

Reputation: 127

Issue with condition in headerright

I try to add a conditional button in headerright but I get an error message that (probably) says this is not the way to go. I am sure the error is in the condition within the headerright of the stacknavbigator, since when I try with a straight button it works.

This is the stacknavigator code

const AppNavigator = createStackNavigator(
  {
    Loading: Loading,
    SignUp: SignUp,
    Login: Login,
    Main: Main,
  },
  {
    initialRouteName: 'Loading',

    defaultNavigationOptions: {
      headerLeft: null,
      headerRight: 
      () => (
        if this.loggedIn: true {

          <Button
          onPress={() => alert('I know you')}
          title="Log-out"
          color="#fff"
          />
        }

        else {
          <Button
          onPress={() => alert('Please log in')}
          title="Log-in"
          color="#fff"
          />
             }
      );
      headerStyle: {
        backgroundColor: '#c6f1e7',
      },
      headerTintColor: '#59616e',
      headerTitleStyle: {
        fontFamily: 'Raleway-Regular',
        fontWeight: '400',
      },
    },
  },
);

Where the fucntion in headerright is causing this error:

Error: TransformError SyntaxError: /Users/tim/Dropbox/co-own.it/apps/kowop/App.js: Unexpected token (33:8)

  31 |       headerLeft: null,
  32 |       headerRight: () => (
> 33 |         if this.loggedIn: true {
     |         ^
  34 |           <Button
  35 |           onPress={() => alert('I know you')}
  36 |           title="Log-out"

showCompileError
    index.bundle?platform=ios&dev=true&minify=false:34606:26
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:34545:29
emit
    index.bundle?platform=ios&dev=true&minify=false:35025:35
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:34872:23
dispatchEvent
    index.bundle?platform=ios&dev=true&minify=false:32343:31
<unknown>

Can anyone point me in the good direction, since I can't really find the answer?

Thanks a lot!

Tim

Upvotes: 2

Views: 268

Answers (2)

Gaurav Roy
Gaurav Roy

Reputation: 12235

In header right you need to change the code:

 headerRight: 
      () => {
        let button = this.loggedIn? (

          <Button
          onPress={() => alert('I know you')}
          title="Log-out"
          color="#fff"
          />
        )

        : (
          <Button
          onPress={() => alert('Please log in')}
          title="Log-in"
          color="#fff"
          />
             )

return button;
      };

hope it helps.

Upvotes: 1

Danny
Danny

Reputation: 1010

Looks like you are using a '(' where you should use a '{' when defining the function

   headerRight: () => (

should be

headerRight: () => {

    code goes here
}

Upvotes: 0

Related Questions