react-native eaxmple is not working - react-native

Question

I tried react-native 'Button' example on React Native by O'REILLY.
But it's not working correctly.
When click the button, it isn't change to 'EEK!'
It is still 'PUSH ME'.
Are there something wrong?
I added my code...
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Image,
TouchableHighlight
} from 'react-native';
class test extends Component {
// this is constructor
constructor(props) {
super(props);
this.state = { pressing: false };
}
_onPressIn = () => {
this.setState({pressing: true});
}
_onPressOut = () => {
this.setState({pressing: false});
}
// {this.state.pressing ? 'EEK!' : 'PUSH ME'} not working
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPressIn={this._onPressIn}
onPressOut={this._onPressOut}
style={styles.touchable}>
<View style={styles.button}>
<Text style={styles.welcome}>
{this.state.pressing ? 'EEK!' : 'PUSH ME'}
</Text>
</View>
</TouchableHighlight>
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400, resizeMode: 'contain'}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome : {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#FFFFFF'
},
touchable: {
borderRadius: 100
},
button: {
backgroundColor: '#FF0000',
borderRadius: 100,
height: 200,
width: 200,
justifyContent: 'center'
},
bold: {
fontWeight: "bold"
},
italic: {
fontStyle: "italic"
}
});
class Strong extends Component {
render() {
return (
<Text style={styles.bold}>
{this.props.children}
</Text>
);
}
}
class Em extends Component {
render() {
return (
<Text style={styles.italic}>
{this.props.children}
</Text>
);
}
}
export default test;

Answer 1

To achieve what you want, you have to use TouchableWithoutFeedback instead of TouchableHighlight. There are no such props as onPressIn and onPressOut on TouchableHighlight, it does exist on TouchableWithoutFeedback. Here are the docs explaining it

Answer 2

Instead of
{this.state.pressing ? 'EEK!' : 'PUSH ME'}
Try to write
{this.state.text}
And put the text in state (don't forgot the , between pressing and text) :
text:'EEK!'
And in on pressing and out pressing, update the text just like you've done with pressing !
It should work =)