React-Native modal does not open - react-native

Question

I am trying to open the modal through a TouchableOpacity (the second line). I got it to work on a clean application, but when I basically copy and paste to a my current application it does not open at all... Another important point is that this is a card component that is within react-native-deck-swiper. That is my guess for why is won't work.
Top part of my code:
constructor() {
super();
this.state = {
modalVisible: false
}
}
setModalVisible = (visible) => {
this.setState({modalVisible: visible})
}
Bottom Part of my code with the modal
<View style={{flex: 1, justifyContent: 'flex-end', paddingLeft: 5, paddingTop: 10}}>
<TouchableOpacity onPress={() => { this.setModalVisible(true)}}>
<Icon name="more" style={{fontSize: 40}} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View style={{padding: 5}}>
<Text style={{fontSize: 20}}>10 miles away</Text>
</View>
<View style={{marginTop: 22, flex:1}}>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
alert('Modal has been closed.');
}}>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>

Answer 1

You need to bind you function in the constructor or use arrow functions or else this wont be pointing to your component:
setModalVisible = (visible) => {
this.setState({modalVisible: visible})
}

Answer 2

According to your code, don't use the Arrow function. if you want arrow function then bind it, otherwise use below function.
setModalVisible(visible) {
this.setState({modalVisible: visible});
}