trendingtechnology / react-native-bottom-action-sheet

React Native: Native Bottom Action Sheet

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

• rubensousa/BottomSheetBuilder
• javiersantos/BottomDialogs
• sagiwei/SGActionView

Before we dive into on how to use this library. We would like to thank all the contributor of above libraries for providing such a awesome nice, cool library

Getting started

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

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

Usage

import RNBottomActionSheet from 'react-native-bottom-action-sheet';

• Sheet View

- API Way
let SheetView = RNBottomActionSheet.SheetView
SheetView.Show({
	title: "Awesome!",
	items: [
		{ title: "Facebook", subTitle: "Facebook Description", icon: facebook },
		{ title: "Instagram", subTitle: "Instagram Description", icon: instagram },
	],
	theme: "light",
	selection: 3,
	onSelection: selection => {
		console.log("selection: " + selection);
	}
});

- React Way

<RNBottomActionSheet.SheetView visible={this.state.sheetView} title={"Awesome!"} theme={"light"} onSelection={selection => {
	console.log("selection: " + selection);
}}>
	<RNBottomActionSheet.SheetView.Item title={"Facebook"} subTitle={"Facebook Description"} icon={facebook} />
	<RNBottomActionSheet.SheetView.Item title={"Instagram"} subTitle={"Instagram Description"} icon={instagram} />
</RNBottomActionSheet.SheetView>

• Grid View

- API Way
let GridView = RNBottomActionSheet.GridView
	GridView.Show({
		title: "Awesome!",
		items: [
		{ title: "Facebook", icon: facebook },
		{ title: "Instagram", icon: instagram },
		{ title: "Skype", icon: skype },
		{ title: "Twitter", icon: twitter },
		{ title: "WhatsApp", icon: whatsapp },
		{ title: "YouTube", icon: youtube },
		{ title: "Google", icon: google },
		{ title: "LinkedIn", icon: linkedin }
		],
		theme: 'light',
		onSelection: (selection) => {
		console.log('selection: ' + selection)
		}
	});

- React Way
<RNBottomActionSheet.GridView visible={this.state.gridView} title={"Awesome!"} theme={"light"} selection={3} onSelection={selection => {
	console.log("selection: " + selection);
	}}>
	<RNBottomActionSheet.GridView.Item title={"Facebook"} icon={facebook} />
	<RNBottomActionSheet.GridView.Item title={"Instagram"} icon={instagram} />
</RNBottomActionSheet.GridView>

• 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");
	}} />

API's

• Sheet View

  • title(title: string)
  • items(title: string, subTitle: string, icon: image) - subTitle: iOS Only
  • onSelection(selcFunc: function)
  • Show()
  • titleTextColor(color: string) - Android Only
  • itemTextColor(color: string) - Android Only
  • itemTintColor(color: string) - Android Only
  • backgroundColor(color: string) - Android Only
  • delayDismissOnItemClick(flag: bool) - Android Only
  • dividerItem(title: string) - Android Only
  • theme(theme: string) - iOS Only
  • selection(selc: int) - iOS Only

• Grid View

  • title(title: string)
  • ttems(title: string, icon: image)
  • selection(selcFunc: function)
  • Show()
  • itemTextColor(color: string) - Android Only
  • itemTintColor(color: string) - Android Only
  • backgroundColor(color: string) - Android Only
  • delayDismissOnItemClick(flag: bool) - Android Only
  • theme(theme: string): iOS Only

• Alert View

  • title(title: string)
  • message(message: string)
  • positiveText(text: string)
  • positiveBackgroundColor(color: string)
  • positiveTextColor(color: string)
  • negativeText(text: string)
  • negativeBackgroundColor(color: string)
  • negativeTextColor(color: string)
  • onPositive(selcFunc: function)
  • onNegative(selcFunc: function)
  • theme(theme: string) - iOS Only
  • Show()

TO DO

• Enable Android customization features for iOS platform as well

Credits

• Android BottomSheetBuilder: rubensousa/BottomSheetBuilder
• Android BottomDialogs: javiersantos/BottomDialogs
• iOS BottomSheet: sagiwei/SGActionView

Contribution

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

License

Copyright Pranav Raj Singh Chauhan

RNBottomActionSheet is provided under the MIT License.

Other Contributions

awesome-react-native-native-modules

react-native-spruce

react-native-taptargetview & react-native-material-showcase-ios

react-native-popover-menu

react-native-tooltips

react-native-shine-button

react-native-iconic

react-native-download-button

react-native-siri-wave-view

react-native-material-shadows

react-native-gradient-blur-view

react-native-about-libraries

vs-essential-plugins

prettier-pack