jacklam718 / react-native-action-sheet-component Goto Github PK
View Code? Open in Web Editor NEWReact Native Action Sheet Component for iOS & Android.
License: MIT License
React Native Action Sheet Component for iOS & Android.
License: MIT License
They should be devDependencies.
As title, it is easy to reproduce, please see below:
ActionSheetManager.show({
style: ThemeStyles.generalItemBg,
separatorStyle: ThemeStyles.generalItemBorder,
showSelectedIcon: false,
children: [
<ActionSheetItem
key={uuid.v4()}
text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
onPress={() => )}
/>,
<ActionSheetItem
key={uuid.v4()}
text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
onPress={() => )}
/>,
<ActionSheetItem
key={uuid.v4()}
text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
onPress={() => )}
/>,
<ActionSheetItem
key={uuid.v4()}
text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
onPress={() => )}
/>,
<ActionSheetItem
key={uuid.v4()}
text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
onPress={() => )}
/>,
<ActionSheetItem
key={uuid.v4()}
text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
onPress={() => )}
/>,
<ActionSheetItem
key={uuid.v4()}
text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
onPress={() => )}
/>
]})
Test case using react-native-navbar
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"
selectedIcon={checkedIcon}
onPress={this.onItemPress}
/>
<ActionSheetItem
text="Facebook"
value="item2"
selectedIcon={checkedIcon}
onPress={this.onItemPress}
/>
</ActionSheet>
</View>
)
}
When selecting an item the first time, there is still some white overlap from the action sheet at the bottom of the view. But subsequent item selections clear it up.
Integrated in my app, works for iOS 10.2 but not on android
I have a problem with ActionSheetManager
when usage like this:
import React, { Component } from 'react';
import { Button } from 'react-native';
import ActionSheetManager, { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';
export default class App extends Component {
render() {
const options = {
children: [
<ActionSheetItem
key='item-1'
text="Item 1"
value="item1"
/>,
<ActionSheetItem
key='item-2'
text="Item 2"
value="item2"
/>
],
};
return (
<Button onPress={() => ActionSheetManager.show(options)} title="Open" />
);
}
}
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?
I'm getting the following runtime error
Unknown plugin "flow-react-proptypes" specified in "node_modules/react-native-action-sheet-component/.babelrc.env.development
React-native version 0.41.2, iOS
I got the build working but the component is not showing on Android like it does for iOS
npm install --save react-native-action-sheet-component
It gave the lower version package which is 0.0.36 not 0.1.48
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.