title: If statement: SyntaxError Unexpected token, expected ,
body: <p>In react native I am trying to  put some code that will load the font after pressing a button. The if statement is getting an error (line 38:6) that says, Unexpected token, expected , (38:6). I have no idea why this is happening, and I don't know where to put the comma it wants, or if the problem is something else. </p>
  
  <p><a href="https://i.stack.imgur.com/ALFqv.jpg" rel="nofollow noreferrer">error message</a></p>
  
  <p><a href="https://i.stack.imgur.com/gknFD.jpg" rel="nofollow noreferrer">Line 38</a></p>
  
  <p>Updated code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
  import { Font } from 'expo';
  
  var fontLoaded = false;
  
  export default class App extends React.Component {
  
    componentDidMount() {
        Expo.Font.loadAsync({
          'Cabin-Regular-TTF': require('./Cabin-Regular-TTF.ttf'),
        });
  
  
    }
    constructor(props) {
      super(props);
      this.state = { postInput: ""}
    }
  
  
  
   render() {
      return (
          &lt;View style={styles.container}&gt;
            &lt;View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} /&gt;
            &lt;Button
              onPress={() =&gt; this.setState({ fontLoaded: true })}
              title="Press Me To Load the App After 15 Seconds!"
              color="#841584"
              accessibilityLabel="Wait 15 seconds and then press me to load the font!"
            /&gt;
          &lt;/View&gt;
  
  
          {fontLoaded ? (
            &lt;View style={styles.container}&gt;
              &lt;Text style={{ fontFamily: 'Cabin-Regular-TTF', fontSize: 16 }}&gt;
                  Whats on your mind? Create a post!
              &lt;/Text&gt;  
  
              &lt;TextInput&gt;
                  style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
                  onChangeText={(postInput)=&gt;this.setState({postInput})}
                  value={this.state.postInput}    
              &lt;/TextInput&gt;
  
              &lt;ScrollView&gt;
                 &lt;View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /&gt;
                 &lt;View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} /&gt;
                 &lt;View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} /&gt;
                 &lt;View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /&gt;
                 &lt;View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} /&gt;
                 &lt;View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} /&gt;
                 &lt;View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /&gt;
                 &lt;View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} /&gt;
                 &lt;View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} /&gt;
                 &lt;View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /&gt;
                 &lt;View style={{width: 300, height: 250, backgroundColor: '#1daff1'}} /&gt;
                 &lt;View style={{width: 300, height: 40, backgroundColor: '#147aa8'}} /&gt;
                 &lt;View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} /&gt;
               &lt;/ScrollView&gt;
            &lt;/View&gt;) : (null) }
      );
    }
  
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#e8e8e8',
      alignItems: 'center',
      justifyContent: 'center'
    },
  });
  </code></pre>