Skip to main content

BottomSheet

The BottomSheet component provides an animated bottom sheet for React Native applications.

Import​

Phaselis exports one main component for BottomSheet.

import { BottomSheet } from "phaselis";
  • BottomSheet: Main Component import for BottomSheet

Usage​

Basic BottomSheet​

import { BottomSheet, Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";

const Example = () => {
  const [showBottomSheet, setShowBottomSheet] = useState(false);
  return (
    <>
      <Button
        text="Open BottomSheet"
        onClick={() => {
          setShowBottomSheet(true);
        }}
      />
      <BottomSheet
        show={showBottomSheet}
        onClose={() => {
          setShowBottomSheet(false);
        }}
      >
        <Text>BottomSheet is opened.</Text>
      </BottomSheet>
    </>
  );
};

export default Example;

Props​

show required​

boolean

A shared value indicating whether the bottom sheet is open or closed. The default is false.

import { Text } from "react-native";
<BottomSheet show={true} onClose={() => {}}>
  <Text>BottomSheet is opened.</Text>
</BottomSheet>

children required​

ReactNode

The content to display inside the bottom sheet.

import { Text } from "react-native";
<BottomSheet show={true} onClose={() => {}}>
  <Text>BottomSheet children.</Text>
</BottomSheet>

onClose required​

() => void

Callback function triggered when the backdrop is pressed and the bottom sheet should close.

import { useState } from "react";
import { Text } from "react-native";
const [showBottomSheet, setShowBottomSheet] = useState(true);
<BottomSheet
  show={showBottomSheet}
  onClose={() => {
    setShowBottomSheet(false);
  }}
>
  <Text>BottomSheet is opened.</Text>
</BottomSheet>

duration​

number

The duration of the opening and closing animations default value is 500 miliseconds.

import { useState } from "react";
import { Text } from "react-native";
const [showBottomSheet, setShowBottomSheet] = useState(true);
<BottomSheet
  show={showBottomSheet}
  duration={1000}
  onClose={() => {
    setShowBottomSheet(false);
  }}
>
  <Text>BottomSheet is opened.</Text>
</BottomSheet>