Skip to content

TamkeenTech/react-native-bottom-sheet

Repository files navigation

@TamkeenTech/react-native-bottom-sheet

A simple react native package for creating and using different kind of modals

Demo

Screen Record of the default sheet Screen Record of a sticky sheet

Installation

  1. Install react-native-reanimatad 2, for installation instructions please follow the below link:

    expo or react-native.

  2. Install react-native-gesture-handler, for installation instructions please follow the below link:

    expo or react-native.

  3. Finally, run the command:

   npm install @tamkeentech/react-native-bottom-sheet

Usage and Example

Basic Usage

1- Sheet

import React from 'react';
import { Sheet } from '@tamkeentech/react-native-bottom-sheet';
import { Block, Label, Paragraph } from '../placeholder';

export const DemoSheet = ({ show, onClose }) => {
  return (
    <Sheet
      contentContainerStyle={{ paddingHorizontal: 15 }}
      show={show}
      onClose={onClose}
    >
      <Label />
      <Paragraph />
      <Block />
    </Sheet>
  );
};

2- Sticky Sheet

import React from 'react';
import { StickySheet } from 'react-native-bottom-sheet';
import { Block, Label, Paragraph } from '../placeholder';

export const DemoSheet = () => {
  return (
    <StickySheet contentContainerStyle={{ paddingHorizontal: 15 }}>
      {/* Child 1 */}
      <View>
        <Label />
        <Paragraph />
      </View>
      {/* Child 2 */}
      <View>
        <Label />
        <Paragraph num={1} />
        <Block />
      </View>
      {/* Child 3 */}
      <View>
        <Label />
        <Paragraph />
        <Block />
      </View>
    </StickySheet>
  );
};

API

Props Sheet Type Type Description Default
offset All number An extra translate area to be set at the bottom of the sheet 0
childOffset Sticky Sheet number A bottom offset area to be set for each direct child 0
onSnap Sticky Sheet function A callback function excuted when the user removes his touch
delay Sticky Sheet number A delay added ONLY to the mounting animation 0
SheetHeaderComponent All function A custom header component for a sheet Default header component shipped with the library
SheetHeaderComponentStyle All object
contentContainerStyle All object
style All object
show Sheet boolean Boolean to open/close the sheet false
dim Sheet number Set the dim level for the sheet background 0.8
onClose Sheet function A callback function to be run upon closing the sheet

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT ©

Author

ezziddin

About

A react native package for using bottom sheet modal

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published