@TamkeenTech/react-native-bottom-sheet

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

Demo

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