Unexpected token, expected "}" at my countText case - reactjs

Question

Please bear with me as I am new to all of this and this is my first posted question! I am trying to set up a simple "welcome screen" with a signup button , and am just learning the ios/App development process/ react-native and javascript. Can anyone explain exactly why there is an error at the line 68? I got this error previously and thought it may be because I was "calling"the styles outside of the class, but I believe that is only an issue if this were a function and not a class?
Error Reads: Failed to load bundle(http://localhost:8081/index.bundle?
platform=ios&dev=true&minify=false) with error:(SyntaxError: /Users/name/appname/App.js: Unexpected token, expected “}” (68:13)
type Props = {};
export default class App extends Component<Props> {
render() {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 10
},
button: {
alignItems: "center",
backgroundColor: "blue",
width: 100,
padding: 10
},
countText: {
padding: 20,
color: "#FF00FF"
}
});
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to P2P Blockchain!</Text>
<Text style={styles.instructions}>To get started, click below!</Text>
<View style={styles.container}>
<TouchableHighlight style={styles.button} onPress={this.onPress}>
<Text> Sign Up Here! </Text>
</TouchableHighlight>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{this.state.count !== 0 ? this.state.count : null}
</Text>
</View>
</View>
</View>
);
}
}

Answer 1

import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, Text } from 'react-native';
type Props = {};
class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
count: 10,
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to P2P Blockchain!</Text>
<Text style={styles.instructions}>To get started, click below!</Text>
<View style={styles.container}>
<TouchableHighlight style={styles.button} onPress={this.onPress}>
<Text> Sign Up Here! </Text>
</TouchableHighlight>
<View style={styles.countContainer}>
<Text style={styles.countText}>
{this.state.count !== 0 ? this.state.count : null}
</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 10
},
button: {
alignItems: "center",
backgroundColor: "blue",
width: 100,
padding: 10
},
countText: {
padding: 20,
color: "#FF00FF"
}
});
export default App;