React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

Overview

React Native ActionSheet

This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android).

Usage of this package same as for IOS and Android. Also this package usage same as ActionSheetIOS

Using ActionSheetIOS component for IOS and using RecyclerView and BottomSheetDialog for Android as NativeModule.

Version >= 1.0.0 now has AndroidX support. If you want to use this package without AndroidX support please use v0.2.3

Facebook RN blog post about v0.60 and AndroidX support: https://facebook.github.io/react-native/blog/2019/07/03/version-60

Version 1.0.3

  • tintColor added for IOS

Version 1.0.2

  • implementation 'com.google.android.material:material:1.0.0' issue solved

Getting Started

With NPM

npm install --save rn-actionsheet-module

With YARN

yarn add rn-actionsheet-module

After React Native v0.60 you don't need to link anything. Native Modules are now Autolinked

Automatic linking

react-native link rn-actionsheet-module

Manual Linking

Manual Installation (If something went wrong with react-native link)

Props

Props Type Required OS
optionsIOS array Yes IOS
optionsAndroid array Yes Android
title string Yes Android, IOS
message string No IOS
tintColor string No IOS
destructiveButtonIndex number No IOS
cancelButtonIndex number No IOS
onCancelAndroidIndex number Yes Android
With v0.2.0

Android doesn't need any cancel option but back button or outside click will return onCancelAndroidIndex

Usage

import ActionSheet from 'rn-actionsheet-module'

<TouchableOpacity onPress={() => {
   ActionSheet(
       {
          title             : "Lorem ipsum",
          optionsIOS        : ["Cancel", "From Gallery", "From Camera"],
          optionsAndroid        : ["From Gallery", "From Camera"],
          destructiveButtonIndex: null, // undefined // 1, 2, etc.,
          cancelButtonIndex     : 0, // 
          onCancelAndroidIndex: 3 // android doesn't need any cancel option but back button or outside click will return onCancelAndroidIndex
       }, (index) => {
        switch (index) {
         case Platform.OS === "ios" ? 1 : 0 :{
           alert("From Camera clicked")
         }
         case Platform.OS === "ios" ? 2 : 1 :{
           alert("From Camera clicked")
         }
         case Platform.OS === "ios" ? 0 : 3 :{
           alert("onCancel")
         }
         default:{
           alert("Default")
         }
        }
       }
   )
}}>
  <Text>Show ActionSheet</Text>
</TouchableOpacity>

FYI

You can use more than one ActionSheet in same screen.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Issues
  • Support for `message` option

    Support for `message` option

    ActionSheetIOS support a message option, which is a string displayed below the title. This would be great if ported to Android too.

    opened by LRNZ09 2
  • Update build.gradle

    Update build.gradle

    Fix Error BottomSheetDialog

    opened by TrustDec 2
  • Add tintColor option for ActionSheetIOS

    Add tintColor option for ActionSheetIOS

    Useful option when you want to customize the text color https://facebook.github.io/react-native/docs/actionsheetios

    opened by LRNZ09 1
  • Android run is NOT working

    Android run is NOT working

    Trying to running on Android but throw this error related with bottomsheet package.

    Here's the output:

    Note: Recompile with -Xlint:deprecation for details.
    /Users/4plus1/projects/wtrack-app/node_modules/rn-actionsheet-module/android/src/main/java/com/taluttasgiran/actionsheet/ActionSheet.java:6: error: package com.google.android.material.bottomsheet does not exist
    import com.google.android.material.bottomsheet.BottomSheetDialog;
                                                  ^
    /Users/4plus1/projects/wtrack-app/node_modules/rn-actionsheet-module/android/src/main/java/com/taluttasgiran/actionsheet/ActionSheet.java:15: error: cannot find symbol
    public class ActionSheet extends BottomSheetDialog {
                                     ^
      symbol: class BottomSheetDialog
    /Users/4plus1/projects/wtrack-app/node_modules/rn-actionsheet-module/android/src/main/java/com/taluttasgiran/actionsheet/ActionSheet.java:16: error: cannot find symbol
        BottomSheetDialog mBottomSheetDialog;
        ^
      symbol:   class BottomSheetDialog
      location: class ActionSheet
    /Users/4plus1/projects/wtrack-app/node_modules/rn-actionsheet-module/android/src/main/java/com/taluttasgiran/actionsheet/ActionSheet.java:20: error: cannot find symbol
            View sheetView = this.getLayoutInflater().inflate(R.layout.action_sheet, null);
                                 ^
      symbol: method getLayoutInflater()
    /Users/4plus1/projects/wtrack-app/node_modules/rn-actionsheet-module/android/src/main/java/com/taluttasgiran/actionsheet/ActionSheet.java:25: error: cannot find symbol
            mBottomSheetDialog = new BottomSheetDialog(context);
                                     ^
      symbol:   class BottomSheetDialog
      location: class ActionSheet
    /Users/4plus1/projects/wtrack-app/node_modules/rn-actionsheet-module/android/src/main/java/com/taluttasgiran/actionsheet/ActionSheet.java:32: error: cannot find symbol
            mBottomSheetDialog.setOnCancelListener(new OnCancelListener() {
                                                       ^
      symbol:   class OnCancelListener
      location: class ActionSheet
    6 errors
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':rn-actionsheet-module:compileDebugJavaWithJavac'.
    > Compilation failed; see the compiler error output for details.
    

    System Info

    System:
        OS: macOS Mojave 10.14.6
        CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
        Memory: 20.64 MB / 8.00 GB
        Shell: 3.2.57 - /bin/bash
      Binaries:
        Node: 10.16.0 - /usr/local/opt/[email protected]/bin/node
        Yarn: 1.19.2 - /usr/local/bin/yarn
        npm: 6.9.0 - /usr/local/opt/[email protected]/bin/npm
      SDKs:
        iOS SDK:
          Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
        Android SDK:
          API Levels: 28, 29
          Build Tools: 28.0.3
          System Images: android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      IDEs:
        Android Studio: 3.5 AI-191.8026.42.35.5977832
        Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
      npmPackages:
        react: 16.8.3 => 16.8.3 
        react-native: ^0.60.5 => 0.60.6 
      npmGlobalPackages:
        react-native-cli: 2.0.1
    
    opened by jonaxd1 1
  • Change the Usage section to make it simple

    Change the Usage section to make it simple

    Thank you very much for this awesome library. The usage section of the README seems a bit complicated, so I modified it slightly.

    opened by mu29 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 34% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /docs/rn-actionsheet-module-ios.png | 33.99kb | 22.31kb | 34.38% | | /docs/rn-actionsheet-module-android.png | 25.09kb | 16.71kb | 33.41% | | | | | | | Total : | 59.08kb | 39.01kb | 33.97% |


    📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

    opened by imgbot[bot] 0
  • Revert

    Revert "Change the Usage section to make it simple"

    Reverts talut/rn-actionsheet-module#2

    opened by talut 0
  • Dev

    Dev

    opened by talut 0
  • TypeError: null is not an object (evaluating 'RNActionsheet.show')

    TypeError: null is not an object (evaluating 'RNActionsheet.show')

    When trying to access the Action Sheet on Android, I keep getting this error:

    TypeError: null is not an object (evaluating 'RNActionsheet.show')
    at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
    at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
    at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
    at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException        
    at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException       
    at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
    at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
    at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
    at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
    at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
    at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
    at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0     
    at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne       
    at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
    at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
    at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass     
    at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates   
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0 
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
    at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue       
    at [native code]:null in flushedQueue
    at [native code]:null in invokeCallbackAndReturnFlushedQueue
    

    I should note, that I am working in an Expo-managed environment, as it could be the reason for this.

    opened by filiptronicek 0
  • Support Light | Dark theme or allow to custom background color

    Support Light | Dark theme or allow to custom background color

    This is feature request. May this lib support Light | Dark theme or allow to custom background color?

    todo :spiral_notepad: 
    opened by sanghavan 1
Owner
Talut TASGIRAN
Software Developer. Mostly mobile development - Golang lover.
Talut TASGIRAN
React Native ActionSheet Android extension

React Native ActionSheet React Native ActionSheet is a JavaScript library for React Native that implements AcionSheet for Android. Its equivalent of A

Ladislav Martincik 25 Mar 5, 2020
📜 Cross platform custom ActionSheet

react-native-custom-actionsheet Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way of drawing it on

Valery Bugakov 47 Oct 21, 2021
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Jan 16, 2022
icons for react-native android using android-iconify

react-native-android-iconify icons for react native android using android-iconify Installation and How to use Step 1 - NPM Install npm install --save

Layton Whiteley 32 May 26, 2020
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 301 Jan 19, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 410 Dec 23, 2021
A react native android module to control the android statusbar.

Status bar for React Native Android A react native android module to control the android statusbar. Setup There are five steps in the setup process in

Nishanth Shankar 145 Nov 24, 2021
React Native Android module to use Android's AlertDialog - same idea of AlertIOS

react-native-simpledialog-android React Native Android module to use Android's AlertDialog - same idea of AlertIOS Installation npm install react-nati

Lucas Ferreira 42 Mar 1, 2020
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Zahid Ali 24 Jan 21, 2022
Native CardView for react-native (All Android version and iOS)

react-native-card-view Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop). Website Material Design Card Spec CardView

Kishan Vaghela 468 Jan 15, 2022
iOS and Android native search component for react native

react-native-search-bar iOS native search bar for react native. Installation In your react native project, run npm install react-native-search-bar --s

null 17 May 19, 2021
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

LawnStarter Organization 1.4k Jan 13, 2022
Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

赵東澔 534 Jan 22, 2022
React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

对此项目的规划 出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下,此工程架构会定期更新升级依赖到最新版本,并不断的积累 App 中常用组件和基础页面功能,也会不断优化代码组织架构 此项目对以下情形会有帮助 想用前端技术做 app 开发却无从下手 想在项目中运用 typescrip

Benson 6 Aug 24, 2021
A React Native wrapper around the Facebook SDKs for Android and iOS. Provides access to Facebook login, sharing, graph requests, app events etc.

React Native FBSDK React Native FBSDK is a wrapper around the iOS Facebook SDK and Android Facebook SDK, allowing for Facebook integration in React Na

Facebook 3k Dec 21, 2021
An unified React Native Picker Modal component for iOS and Android.

React Native Picker Modal View React Native Module to select item picker modal. Created by Pankod An alternative to Picker and PickerIOS components wi

Pankod 171 Jan 7, 2022
React Native Mapview component for iOS + Android

react-native-maps React Native Map components for iOS + Android ⚠️ Maintainers Wanted We are in need of more people or companies willing to help. If y

null 12.9k Jan 22, 2022