https://github.com/martincik/react-native-actionsheet-native
React Native ActionSheet Android extension
https://github.com/martincik/react-native-actionsheet-native
Last synced: 5 months ago
JSON representation
React Native ActionSheet Android extension
- Host: GitHub
- URL: https://github.com/martincik/react-native-actionsheet-native
- Owner: martincik
- License: mit
- Created: 2016-03-13T20:08:05.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-10T06:01:18.000Z (over 7 years ago)
- Last Synced: 2024-04-23T02:36:53.161Z (about 1 year ago)
- Language: Java
- Size: 58.6 KB
- Stars: 26
- Watchers: 3
- Forks: 13
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-actionsheet-native ★25 - Android ActionSheet support for React Native (Components / UI)
README
# React Native ActionSheet
React Native ActionSheet is a JavaScript library for [React Native](https://facebook.github.io/react-native/) that implements AcionSheet for Android. Its equivalent of ActionSheetIOS which is part of React Native.
For implementation the Android version I used [android-ActionSheet](https://github.com/baoyongzhang/android-ActionSheet).
## Requirements
- React Native >= 0.40.0
- Android
## Installing React Native ActionSheet
```bash
npm install react-native-actionsheet-native --save
# OR
yarn add react-native-actionsheet-native
```
## Preparing
### React native >= 0.40.0
You can run inside of your project folder the next command:
```bash
react-native link react-native-actionsheet-native
```
### React native >= 0.33.0 AND < 0.40.0
- In `android/setting.gradle`
```gradle
...
include ':react-native-actionsheet-native', ':app'
project(':react-native-actionsheet-native').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-actionsheet-native/android')
```
- In `android/app/build.gradle`
```gradle
apply plugin: "com.android.application"
...
dependencies {
...
compile project(":react-native-actionsheet") // <--- add this
...
}
```
- Register Module (in MainActivity.java)
```java
import com.slowpath.actionsheet.ActionSheetPackage; // <--- import and this
public class MyApplication extends Application implements ReactApplication {
......
@Override
protected List getPackages() {
return Arrays.asList(
new ActionSheetPackage(), // <------ add this line to you application
new MainReactPackage());
}
......
}
```
### Updated your MainActivity
Now, you need to update your MainActivity. The MainActivity should extends `ReactFragmentActivity` for working with this library.
```java
public class MainActivity extends ReactFragmentActivity {
...
}
```
# Usage
From your JS files for both iOS and Android:
```javascript
import ActionSheet from 'react-native-actionsheet';
ActionSheet.showActionSheetWithOptions({
options: ['Disconnect', 'Cancel'],
cancelButtonIndex: 1
},
(buttonIndex) => {
const { dispatch } = this.props;
if (buttonIndex === 0) {
// Do something.
}
});
```
# Customization of Android action sheet
If you want to customize view of Android ActionSheet, you will need to read [this article](https://github.com/baoyongzhang/android-ActionSheet#style)
## License
React Native ActionSheet is BSD-licensed.