https://github.com/martincik/react-native-actionsheet-native

React Native ActionSheet Android extension
https://github.com/martincik/react-native-actionsheet-native

Last synced: about 1 month 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 (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-10T06:01:18.000Z (almost 7 years ago)
• Last Synced: 2024-04-23T02:36:53.161Z (5 months 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.