Open
Description
import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component'
import NavigationBar from 'react-native-navbar'
const checkedIcon = <Ionicons name="ios-checkmark-outline" size={30} />
export default class ActionSheetExample extends Component {
constructor(props) {
super(props)
this.state = {
selectedItems: [],
}
}
onChange = (value, index, values) => {
console.log('OnChange()', 'value:', value, 'index:', index, 'values:', values)
this.setState({ selectedItems: values })
}
onItemPress = (value, index) => {
console.log('OnItemPress()', 'value:', value, 'index:', index)
}
showActionSheet = () => {
this.actionSheet.show()
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#DDDDDD' }}>
<NavigationBar
style={{ backgroundColor: '#ABC' }}
title={{ title: 'Home' }}
rightButton={{ title: 'Choose', handler: () => this.actionSheet.show() }}
/>
<ActionSheet
ref={(actionSheet) => { this.actionSheet = actionSheet }}
position="bottom"
onChange={this.onChange}
>
<ActionSheetItem
text="Github"
value="item1"
index={0}
selectedIcon={checkedIcon}
onPress={this.onItemPress}
/>
<ActionSheetItem
text="Facebook"
value="item2"
index={1}
selectedIcon={checkedIcon}
onPress={this.onItemPress}
/>
</ActionSheet>
</View>
)
}
}
OnItemPress() value: item1 index: -1
OnChange() value: item1 index: -1 values: ["item1"]
OnItemPress() value: item2 index: -1
OnChange() value: item2 index: -1 values: ["item2"]
At first I thought index
would be auto set by the ActionSheet, so then I tried specifying explicitly in props (see above).
Perhaps ActionSheet could set index automatically if not specified in props?
Metadata
Metadata
Assignees
Labels
No labels