https://github.com/interfacekit/react-native-js-bottom-sheet
A React Native implementation of Android's bottom sheet
https://github.com/interfacekit/react-native-js-bottom-sheet
android bottom-sheet material-design react react-native
Last synced: 3 months ago
JSON representation
A React Native implementation of Android's bottom sheet
- Host: GitHub
- URL: https://github.com/interfacekit/react-native-js-bottom-sheet
- Owner: InterfaceKit
- License: mit
- Created: 2017-09-27T09:57:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-12-20T07:52:53.000Z (over 6 years ago)
- Last Synced: 2025-08-26T22:02:00.710Z (9 months ago)
- Topics: android, bottom-sheet, material-design, react, react-native
- Language: JavaScript
- Size: 864 KB
- Stars: 30
- Watchers: 0
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-js-bottom-sheet
Modal bottom sheet component for Android and iOS that follows the guidelines of Material Design.
https://material.io/guidelines/components/bottom-sheets.html
## Getting started
```sh
$ yarn add react-native-js-bottom-sheet
```
## Usage
Code refers to the previous image example:
```js
/* @flow */
import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native'
import BottomSheet from 'react-native-js-bottom-sheet'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Entypo from 'react-native-vector-icons/Entypo'
export default class Example extends Component {
bottomSheet: BottomSheet
_onPressButton = () => {
this.bottomSheet.open()
}
render() {
return (
{
this.bottomSheet = ref
}}
itemDivider={3}
backButtonEnabled={true}
coverScreen={false}
title="Create"
options={[
{
title: 'Document',
icon: (
),
onPress: () => null
},
{
title: 'Spreadsheet',
icon: ,
onPress: () => null
},
{
title: 'Folder',
icon: (
),
onPress: () => null
},
{
title: 'Upload photos or videos',
icon: (
),
onPress: () => null
},
{
title: 'Use Camera',
icon: (
),
onPress: () => null
}
]}
isOpen={false}
/>
)
}
}
```
## API
| Prop | Type | Required | Description |
| ----------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
| coverScreen | bool | No | Will use RN Modal component to cover the entire screen wherever the modal is mounted in the component hierarchy |
| backButtonEnabled | bool | No | Close modal when receiving back button event |
| height | number | No | Height of the container. By default it has no height, due to container grows automatically depending of list of elements |
| title | string | Yes | Title displayed in top of list |
| options | Array | Yes | Array of objects to display options list |
| fontFamily | string | No | Used to display values. By default is Roboto |
| titleFontFamily | string | No | Title font family |
| isOpen | bool | No | Specifies if bottom sheet is open by default |
| itemDivider | number | No | Insert an item separator below the specified item number |
## License
MIT License
Copyright (c) 2018 InterfaceKit
## Author
Antonio Moreno Valls ``
Built with 💛 by [APSL](https://github.com/apsl).