sladek-jan / 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

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

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

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

• 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

This library is provided under the Apache 2 License.

RNBottomActionSheet @ Pranav Raj Singh Chauhan