REACT NATIVE BOTTOM SHEET

A component Bottom Sheet built with Reanimated v3+ and React Native Gesture handler V2+

Version

| Expo SDK | React Native | Version | | ------------------ | ------------------- | ------------------- | | <= 52 | <= 0.76.x | <= 1.0.8 | | >= 53 | <= 0.79.x | >= 2.0.0 |

EXPO SDK <= 52 and React Native <= 0.76.x, install with version 1.0.8

npm install @bayudev/[email protected]

yarn add @bayudev/[email protected]

EXPO SDK >= 53 and React Native <= 0.79.x, install with version 2.0.0

npm install @bayudev/[email protected]

yarn add @bayudev/[email protected]

Getting Started

To use the BottomSheet component, you first need to install the package via npm or yarn. Run either of the following commands:

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

yarn add @bayudev/react-native-bottom-sheet

🚨 🚨 Please note that this library is built with React Native Reanimated v3 and uses React Native Gesture Handler. If you haven't installed Reanimated and Gesture Handler yet, please follow the installation instructions for Reanimated and Gesture Handler.

Usage

First, import the BottomSheet component from the @bayudev/react-native-bottom-sheet library:

import { BottomSheet } from '@bayudev/react-native-bottom-sheet';

import { StatusBar } from "expo-status-bar";
import { useCallback, useRef } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { BottomSheet, BottomSheetMethods } from "@bayudev/react-native-bottom-sheet";

export default function App() {
  const ref = useRef<BottomSheetMethods>(null);
  const openBottomSheet = useCallback(() => {
    ref.current?.show();
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <StatusBar style="auto" />

        <TouchableOpacity
          style={{
            width: "90%",
            height: 60,
            backgroundColor: "green",
            padding: 8,
            borderRadius: 8,
          }}
          onPress={openBottomSheet}
        >
          <Text style={{ fontSize: 26, color: "white", textAlign: "center" }}>
            Open Bottom Sheet
          </Text>
        </TouchableOpacity>
      </View>

      <BottomSheet ref={ref} heightValue={50}>
        <View>
          <TouchableOpacity
            style={{
              width: "90%",
              height: 60,
              backgroundColor: "green",
              padding: 8,
              borderRadius: 8,
              marginBottom: 20,
            }}
          >
            <Text style={{ fontSize: 26, color: "white", textAlign: "center" }}>
              Update
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              width: "90%",
              height: 60,
              backgroundColor: "red",
              padding: 8,
              borderRadius: 8,
            }}
          >
            <Text style={{ fontSize: 26, color: "white", textAlign: "center" }}>
              Delete
            </Text>
          </TouchableOpacity>
        </View>
      </BottomSheet>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Properties

| Property | Type | Default | Required | Description | | ------------------ | ----------- | ------------------- | -------- | -------------------------------------------------------------------------------------| | ref | String | null | true | using useRef for manage BottomSheet component for show or hide | | heightValue | Number | 50 | false | maximum height of BottomSheet when displayed | | children | ReactNode | null or undefined | false | Put your any component here |

Author

License

The library is licensed under the MIT License.