Skip to content

Irfanwani/bottomsheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native BottomSheet

For displaying a bottom sheet in a react native app.

How to thank me ?

Just click on ⭐️ button 😘

Screen.Recording.2022-12-03.at.4.40.46.PM.mov

Installation:

npm install --save @irfanwani/react-native-bottom-sheet
OR
yarn add @irfanwani/react-native-bottom-sheet

Basic Usage

import { FC, useRef, useState } from "react";
import { Button, View, Animated, Dimensions } from "react-native";

import BottomSheet from "@irfanwani/react-native-bottom-sheet";

const App: FC = () => {
  const [visible, setVisible] = useState(false);
  const showsheet = () => {
    setVisible(true);
  };

  return (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <BottomSheet
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
      >
        <Text>Here are the children elements</Text>
      </BottomSheet>
      <Button title="show sheet" onPress={showsheet} />
    </View>
  );
};

export default App;

Props

Prop Type Required Note
visible boolean True Determines whether the bottomsheet is shown or not
children ReactElement or null True Element to show in the bottom sheet
onClose () => void True Called when the bottomsheet is closed
onShow () => void False Called when the bottomsheet opens
style ViewStyle False CustomStyles for the bottomsheet
draggerViewStyle ViewStyle False CustomStyles for the dragger container view
draggerStyle ViewStyle False CustomStyles for the dragger Icon
draggable boolean False whether to show the dragger view or not

About

react native bottom sheet

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published