Open react-native Modal on button click on actionsheet option - react-native

Question

I am using react-native-actionsheet library.
I want to open react-native Modal when I click on one of the option on action sheet and want to close react-native actionsheet.
Is any method to close actionsheet.
<ActionSheet
ref={o => this.ActionSheet = o}
options={[
(
<TouchableOpacity style={styles.actionTextInline} onPress={() => {
this.openReservationModal(); this.ActionSheet.hide();
}}>
<Icon name="receipt" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline}>
<Icon name="call" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline} onPress={() => { alert("Hello friends !!") }}>
<Icon name="message" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
)
]}
cancelButtonIndex={2}
destructiveButtonIndex={-1}
styles={{
body: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 10,
height: 100
},
cancelButtonBox: {
height: 50,
backgroundColor: '#FFFFFF',
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
buttonBox: {
height: 50,
backgroundColor: '#FFFFFF',
borderRadius: 10,
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
}}
/>
In above code when I perform onPress,want to call this.openReservationModal() and close actionsheet. but nothing happing happened .

Answer 1

This is because react-native-actionsheet is using react native modal internally and the statements you have written on onpress is running asynchronously, that's why nothing happens.
Now you have to use timeout for the second statement and it will works, just use the below code in your onpress and it will works :
Code :
<ActionSheet
ref={o => this.ActionSheet = o}
options={[
(
<TouchableOpacity style={styles.actionTextInline} onPress={() => {
# ----- change here -------
this.ActionSheet.hide();
setTimeout(() => this.openReservationModal(), 1000)
# ----- change here -------enter code here
}}>
<Icon name="receipt" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline}>
<Icon name="call" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
), (
<TouchableOpacity style={styles.actionTextInline} onPress={() => { alert("Hello friends !!") }}>
<Icon name="message" size={24} style={{ color: '#737373' }} />
</TouchableOpacity>
)
]}
cancelButtonIndex={2}
destructiveButtonIndex={-1}
styles={{
body: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 10,
height: 100
},
cancelButtonBox: {
height: 50,
backgroundColor: '#FFFFFF',
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
buttonBox: {
height: 50,
backgroundColor: '#FFFFFF',
borderRadius: 10,
paddingLeft: 16,
paddingTop: 16,
alignItems: 'flex-start'
},
}}
/>
I hope this helps....Thanks :)