Unexpected token, expected , error (React-navigation)

Question

I'm rendering User's Image and username at the Header Title if it recieve outfitDetail props.

class OutfitDetail extends Component {
  static navigationOptions = ({navigation, screenProps}) => ({
    ...
    headerTitle: (
      !!screenProps.outfitDetail ? (
            <View style={styles.container}>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', {id: userId})}>
                {this._renderAvatar(screenProps.outfitDetail.user.image)}
              </TouchableOpacity>
              <View style={styles.content}>
                <View style={styles.contentHeader}>
                  <RkText rkType='header5'>{screenProps.outfitDetail.user.username}</RkText>
                  <RkText rkType='secondary4 hintColor'>
                    <TimeAgo time={screenProps.outfitDetail.publish}/>
                  </RkText>
                </View>
                <RkText rkType='primary3 mediumLine'>{screenProps.outfitDetail.content}</RkText>
              </View>
            </View>
      ): (<Text>Loading</Text>)
    ),
    ...
  });

so if screenProps.outfitDetail is not null (not fetched yet), it renders Loading, otherwise it renders user's photo and username.

Why am I getting Unexpected token, expected , error (React-navigation)? the error occurred on the third line of code above.

replace the ',' before Loading with ':' and maybe enclose them with `(Loading)` like this — Tarek, Oct 20 '17 at 06:30
Thanks for commenting. But It still throws an error on the third line — merry-go-round, Oct 20 '17 at 06:31
Just edited the last line on the question. I didn't put the whole code here. Um I think I'm getting an error on the third line because I should put whole code in one line? — merry-go-round, Oct 20 '17 at 06:36
i posted an answer to show more my point, there is a problem with the order of brackets. — Tarek, Oct 20 '17 at 06:38
remove the {} around the screen props. check my updated answer... if not, start screenProps.outfitDetail on the same line as headerTitle and remove () around it as well. — Tarek, Oct 20 '17 at 06:42

Tarek · Accepted Answer · 2017-10-20T06:45:27.243

1

static navigationOptions = ({navigation, screenProps}) => ({
headerTitle: (
    !!screenProps.outfitDetail ? (
        <View style={styles.container}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', {id: userId})}>
            {this._renderAvatar(screenProps.outfitDetail.user.image)}
          </TouchableOpacity>
          <View style={styles.content}>
            <View style={styles.contentHeader}>
              <RkText rkType='header5'>{screenProps.outfitDetail.user.username}</RkText>
              <RkText rkType='secondary4 hintColor'>
                <TimeAgo time={screenProps.outfitDetail.publish}/>
              </RkText>
            </View>
            <RkText rkType='primary3 mediumLine'>{screenProps.outfitDetail.content}</RkText>
          </View>
        </View>
  ):(<Text>Loading</Text>)
),
... other functions ...
})

edited Oct 20 '17 at 06:45

answered Oct 20 '17 at 06:38

Tarek

687
5
11

Ok. not it just threw the error. But it throws screenProps.outfitDetail.user is undefined. – merry-go-round Oct 20 '17 at 06:44
While omitting `{}` bracket, I think if conditional statement is not working correctly. – merry-go-round Oct 20 '17 at 06:44
you r checking for exactly not null, while the outfitDetail can be undefined. I updated my answer again – Tarek Oct 20 '17 at 06:45
Very close. I tried with `!` and `!!`. With `!`, it gives me an error (undefined). With `!!`, it always render `Loading`. – merry-go-round Oct 20 '17 at 06:48
When I tested the this.props.outfitDetail, it prints { blah blah} or null on my console. – merry-go-round Oct 20 '17 at 06:49
`!!` is the correct one. where do u get the undefined? Are you sure user inside of the object is defined? – Tarek Oct 20 '17 at 06:50
ok Yes I'm pretty sure. With `!!screenProps.outfitDetail` returns false so it's rendering `Loading` :( – merry-go-round Oct 20 '17 at 06:52
please post the part of the code where you calling the function navigationOptions – Tarek Oct 20 '17 at 06:54
Just pasted it on my question. :) – merry-go-round Oct 20 '17 at 06:56
when creating the object What props do u have set? – Tarek Oct 20 '17 at 06:59
This is getting more complicated, please open a new question for ur undefined issue as more coded is needed to solve it. For the meantime, if this solves ur syntax issue, please mark it as an answer – Tarek Oct 20 '17 at 07:00
Sure thing! Thanks for your help – merry-go-round Oct 20 '17 at 07:01
`this.props.outfitDetail`. So I'm getting outfitDetail props – merry-go-round Oct 20 '17 at 07:01
I think you can solve this problem (+200 bounty) : https://stackoverflow.com/questions/47930049/how-to-reset-tabnavigator-when-user-logs-out-from-other-screen – merry-go-round Jan 03 '18 at 05:27

Unexpected token, expected , error (React-navigation)

1 Answers1