react-native-bottom-action-sheet

iOS

📖 Getting started

RN61 >= RNBAS V2 >

• Add react-native-image-helper your app package.json

• Add react-native-vector-icons to your app package.json and configure it as per their installation steps

• iOS

- Add the following to your `Podfile` -> `ios/Podfile` and run pod update:

```

use_native_modules!

pod 'RNImageHelper', :path => '../node_modules/react-native-image-helper/ios'
	```

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

- Add the following to your `Podfile` -> `ios/Podfile` and run pod update:

```

use_native_modules!

```

• Android

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

RN60 < RNBAS V1 <

RN60 below please use react-native-bottom-action-sheet V.0.

• iOS

- After `react-native link react-native-bottom-action-sheet`, please verify node_modules/react-native-bottom-action-sheet/ios/ contains Pods folder. If does not exist please execute `pod install` command on `node_modules/react-native-bottom-action-sheet/ios/`, if any error => try `pod repo update` then `pod install`

• Android

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

Note: This library is support on Android 27 > above

💻 Usage

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

import Icon from 'react-native-vector-icons'

💡 Example's

• Sheet View

- **API Way**

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);
},
onCancel: () => console.log('Closing the bottom SheetView!!!')

- **React Way**

```javascript
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**

```javascript
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**

```javascript
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>

```

• Alert View

- **API Way**

```javascript
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**

```javascript
<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

- **Generic**
	- `title: string`
	- `items: Array<{ title: string, subTitle: string, icon?: image, value?: mixed }> - subTitle: iOS Only`
	- `onSelection: (index: number, value: ?mixed) => void`
	- `Show()`

- **Android**
	- `titleTextColor: string` 
	- `itemTextColor: string`
	- `itemTintColor: string`
	- `backgroundColor: string`
	- `delayDismissOnItemClick: bool`
	- `dividerItem(title: string)`

- **iOS**
	- `theme: string`
	- `selection: int`

• Grid View

- **Generic**
	- `title: string`
	- `items: Array<{ title: string, icon?: image, value?: mixed }>`
	- `onSelection: (index: number, value: ?mixed) => void`
	- `Show()`

- **Android**
	- `itemTextColor: string`
	- `itemTintColor: string`
	- `backgroundColor: string`
	- `delayDismissOnItemClick: bool`

- **iOS**
	- `theme: string`

• Alert View

- **Generic**
	- `title string`
	- `message: string`
	- `positiveText: string`
	- `positiveBackgroundColor: string`
	- `positiveTextColor: string`
	- `negativeText: string`
	- `negativeBackgroundColor: string`
	- `negativeTextColor: string`
	- `onPositive: () => void`
	- `onNegative: () => void`
	- `Show()`

- **Android**

- **iOS**
	- `theme: string - iOS Only`

Icons

• RN Vector Icons: It supports react-native-vector-icons library. Please find below snippet for the usage:

let facebook = <Icon family={'FontAwesome'} name={'facebook'} color={'#000000'} size={30} />

<RNBottomActionSheet.GridView.Item title={"Facebook"} icon={facebook} />

Note:

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

• Custom Icons

Note: Since we are using native libraries, we have not found a solution in order to render RN Images in production, therefore please copy all your image assets in platform specific folders:

• Android: Please copy your image assets in app resource drawable folder
• iOS: Please copy your image assets in app resources folder

Please refer example application for the image usage.

✨ Credits

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

🤔 How to contribute