Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-js-bottom-sheet with all npm packages installed. Try it out:

var reactNativeJsBottomSheet = require("react-native-js-bottom-sheet")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-js-bottom-sheet v1.1.0

Modal bottom sheet component for Android and iOS that follows the guidelines of Material Design.

react-native-js-bottom-sheet

Modal bottom sheet component for Android that follows the guidelines of Material Design.

https://material.io/guidelines/components/bottom-sheets.html

Stepper

Getting started

$ yarn add react-native-js-bottom-sheet

Usage

Code refers to the previous image example:

/* @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 (
      <View style={styles.container}>
        <Button title="Open" onPress={this._onPressButton} />
        <BottomSheet
          ref={(ref: BottomSheet) => {
            this.bottomSheet = ref
          }}
          itemDivider={3}
          backButtonEnabled={true}
          coverScreen={false}
          title="Create"
          options={[
            {
              title: 'Document',
              icon: (
                <MaterialCommunityIcons
                  name="file-document-box"
                  color="#2186fa"
                  size={24}
                />
              ),
              onPress: () => null
            },
            {
              title: 'Spreadsheet',
              icon: <Entypo name="spreadsheet" color="#43a047" size={24} />,
              onPress: () => null
            },
            {
              title: 'Folder',
              icon: (
                <MaterialCommunityIcons name="folder" color="grey" size={24} />
              ),
              onPress: () => null
            },
            {
              title: 'Upload photos or videos',
              icon: (
                <MaterialCommunityIcons
                  name="cloud-upload"
                  color="grey"
                  size={24}
                />
              ),
              onPress: () => null
            },
            {
              title: 'Use Camera',
              icon: (
                <MaterialCommunityIcons name="camera" color="grey" size={24} />
              ),
              onPress: () => null
            }
          ]}
          isOpen={false}
        />
      </View>
    )
  }
}

API

PropTypeRequiredDescription
coverScreenboolNoWill use RN Modal component to cover the entire screen wherever the modal is mounted in the component hierarchy
backButtonEnabledboolNoClose modal when receiving back button event
heightnumberNoHeight of the container. By default it has no height, due to container grows automatically depending of list of elements
titlestringYesTitle displayed in top of list
optionsArrayYesArray of objects to display options list
fontFamilystringNoUsed to display values. By default is Roboto
titleFontFamilystringNoTitle font family
isOpenboolNoSpecifies if bottom sheet is open by default
itemDividernumberNoInsert an item separator below the specified item number

License

MIT License

Copyright (c) 2017 InterfaceKit

Author

Antonio Moreno Valls <amoreno at apsl.net>

Built with 💛 by APSL.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free