Naughty Platypus Memorabilia

    react-native-bottom-sheet-js
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    A bottom sheet that uses Material sheets #specs. Written in pure JS.

    Installation

    npm i react-native-bottom-sheet-js
    

    or

    yarn add react-native-bottom-sheet-js
    

    if you are using Yarn

    Usage

    import BottomSheet from 'react-native-bottom-sheet-js'
     
    // To open sheet do
    this.bottomSheet.open()
     
    // Always put <BottomSheet> at the very bottom of the screen file
    <View>
      {/* Other content here. */}
      <BottomSheet
        ref={bottomSheet => { this.bottomSheet = bottomSheet }}
      >
        <Text>This is the content that will display when the bottom sheet is open.</Text>
      </BottomSheet>
    </View>

    Props

    • backgroundColor

      • String

      Color of the background

    • minHeight

      • Number

      Minimum height of the sheet when open. default value is 56 as stated https://material.io/components/sheets-bottom/#specs the minimum height of a sheet must be 56dp.

    • maxHeight

      • Number

      Maximum height of the sheet when open(only triggers when you have a lot of content). default value is 50%(Dimensions.get('window).height) of the screen height. as stated https://material.io/components/sheets-bottom/#specs the maximum height of a sheet must be half of the screen size which is 50%.

    • contentStyle

      • Object

      Style of the content component. Only accepts object as a parameter. If you specify a height on this component be sure to have it <= maxHeight so it won't clamp and render stuff out of place. You can add paddings or margins here.

    Methods

    • open()

      • Opens the bottom sheet.
    • close()

      • Closes the sheet.
    • toggle()

      • Open or closes the sheet based on last state.

    Contribute

    Open for PR's. Any improvements or fixes are welcome!

    Install

    npm i react-native-bottom-sheet-js

    DownloadsWeekly Downloads

    5

    Version

    1.0.5

    License

    ISC

    Unpacked Size

    5.79 kB

    Total Files

    4

    Last publish

    Collaborators

    • logicallydimp