Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-native-bottom-action-sheetpublic

    PRs Welcome

    React Native: Bottom Action Sheet (Android/iOS)

    A simple library that creates BottomSheets according to the Material Design Specs

    Android

    Sheet View
    Grid View
    Alert View

    iOS

    Sheet View
    Grid View
    Alert View

    It is a React Native Bridge around below native Android & iOS Libraries

    Getting started

    $ npm install react-native-bottom-action-sheet --save

    $ react-native link react-native-bottom-action-sheet

    $ react-native link react-native-vector-icons

    • iOS

    $ cd ./node_modules/react-native-bottom-action-sheet/ios/ && pod install

    • Android

    Please add below snippet into your app build.gradle

    
    buildscript {
        repositories {
            jcenter()
            google()
            ...
        }
        ...
    }
    
    
    allprojects {
        repositories {
            maven { url 'https://jitpack.io' }
            google()
            ...
        }
    }
    

    Note: This library is support on Android 25 > above

    Usage

    import RNBottomActionSheet from 'react-native-bottom-action-sheet';
     
    import Icon from 'react-native-vector-icons'
     
    • Sheet View

      • API Way
       
      let facebook = <Icon family={'FontAwesome'} name={'facebook'} color={'#000000'} size={30} />
      let instagram = <Icon family={'FontAwesome'} name={'instagram'} color={'#000000'} size={30} />
       
      let SheetView = RNBottomActionSheet.SheetView
      SheetView.Show({
          title: "Awesome!",
          items: [
              { title: "Facebook", value: "fb", subTitle: "Facebook Description", icon: facebook },
              { title: "Instagram", value: "insta", subTitle: "Instagram Description", icon: instagram },
          ],
          theme: "light",
          selection: 3,
          onSelection: (index, value) => {
              // value is optional
              console.log("selection: " + index + " " + value);
          }
      });
       
      • React Way
      let facebook = <Icon family={'FontAwesome'} name={'facebook'} color={'#000000'} size={30} />
      let instagram = <Icon family={'FontAwesome'} name={'instagram'} color={'#000000'} size={30} />
       
      <RNBottomActionSheet.SheetView visible={this.state.sheetView} title={"Awesome!"} theme={"light"} onSelection={(index, value) => {
          // value is optional
          console.log("selection: " + index + " " + value);
      }}>
          <RNBottomActionSheet.SheetView.Item title={"Facebook"} subTitle={"Facebook Description"} icon={facebook} />
          <RNBottomActionSheet.SheetView.Item title={"Instagram"} subTitle={"Instagram Description"} icon={instagram} />
      </RNBottomActionSheet.SheetView>
       

    Note:

    • We have added family prop for Icon class, please make sure that you pass the props
    • Grid View

      • API Way
      let facebook = <Icon family={'FontAwesome'} name={'facebook'} color={'#000000'} size={30} />
      let instagram = <Icon family={'FontAwesome'} name={'instagram'} color={'#000000'} size={30} />
       
      let GridView = RNBottomActionSheet.GridView
          GridView.Show({
              title: "Awesome!",
              items: [
              { title: "Facebook", icon: facebook },
              { title: "Instagram", icon: instagram }
              ],
              theme: 'light',
              onSelection: (index, value) => {
              console.log('selection: ' + index + ' ' + value)
              }
          });
      • React Way
      let facebook = <Icon family={'FontAwesome'} name={'facebook'} color={'#000000'} size={30} />
      let instagram = <Icon family={'FontAwesome'} name={'instagram'} color={'#000000'} size={30} />
       
      <RNBottomActionSheet.GridView visible={this.state.gridView} title={"Awesome!"} theme={"light"} selection={3} onSelection={(index, value) => {
          console.log('selection: ' + index + ' ' + value);
          }}>
          <RNBottomActionSheet.GridView.Item title={"Facebook"} icon={facebook} />
          <RNBottomActionSheet.GridView.Item title={"Instagram"} icon={instagram} />
      </RNBottomActionSheet.GridView>
       

    Note:

    • We have added family prop for Icon class, please make sure that you pass the props
    • Alert View

      • API Way
      let AlertView = RNBottomActionSheet.AlertView
          AlertView.Show({
          title: "Awesome!",
          message: "What can we improve? Your feedback is always welcome.",
          positiveText: "OK",
          positiveBackgroundColor: "#eeffee",
          positiveTextColor: "#006500",
          negativeText: "Exit",
          negativeBackgroundColor: "#ffebeb",
          negativeTextColor: "#760000",
          theme: 'light',
          onPositive: () => {
              console.log('positive clicked')
          },
          onNegative: () => {
              console.log('negative clicked')
          }
          })
      • React Way
      <RNBottomActionSheet.AlertView
          visible={this.state.alterView}
          title={"Awesome!"}
          message={"What can we improve? Your feedback is always welcome."}
          positiveText={"OK"}
          positiveBackgroundColor={"#eeffee"}
          positiveTextColor={"#006500"}
          negativeText={"Exit"}
          negativeBackgroundColor={"#ffebeb"}
          negativeTextColor={"#760000"}
          theme={"light"}
          onPositive={() => {
              console.log("positive clicked");
          }}
          onNegative={() => {
              console.log("negative clicked");
          }} />

    APIs

    • Sheet View

      • title: string
      • items: Array<{ title: string, subTitle: string, icon?: image, value?: mixed }> - subTitle: iOS Only
      • onSelection: (index: number, value: ?mixed) => void
      • titleTextColor: string - Android Only
      • itemTextColor: string - Android Only
      • itemTintColor: string - Android Only
      • backgroundColor: string - Android Only
      • delayDismissOnItemClick: bool - Android Only
      • dividerItem(title: string) - Android Only
      • theme: string - iOS Only
      • selection: int - iOS Only
      • Show()
    • Grid View

      • title: string
      • items: Array<{ title: string, icon?: image, value?: mixed }>
      • onSelection: (index: number, value: ?mixed) => void
      • itemTextColor: string - Android Only
      • itemTintColor: string - Android Only
      • backgroundColor: string - Android Only
      • delayDismissOnItemClick: bool - Android Only
      • theme: string - iOS Only
      • Show()
    • Alert View

      • title string
      • message: string
      • positiveText: string
      • positiveBackgroundColor: string
      • positiveTextColor: string
      • negativeText: string
      • negativeBackgroundColor: string
      • negativeTextColor: string
      • onPositive: () => void
      • onNegative: () => void
      • theme: string - iOS Only
      • Show()

    TO DO

    • Enable Android customization features for iOS platform as well

    Credits

    Contribution

    Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

    License

    This library is provided under the Apache 2 License.

    RNBottomActionSheet @ Pranav Raj Singh Chauhan

    Keywords

    install

    npm i react-native-bottom-action-sheet

    Downloadsweekly downloads

    290

    version

    0.0.11

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar