React Native Bottom Sheet

Pull to refresh is enabled by default and is activated when the bottom sheet reaches its top snap point. To implement it, provide the refreshing and onRefresh props to any supported Scrollable component (such as BottomSheetFlatList, BottomSheetScrollView, or BottomSheetSectionList).

Note: The refreshControl prop is currently not supported.

import React, { useCallback, useMemo } from "react";
import { StyleSheet, View, Text } from "react-native";
import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";

const App = () => {
  const data = useMemo(
    () =>
      Array(50)
        .fill(0)
        .map((_, index) => `index-${index}`),
    []
  );
  const snapPoints = useMemo(() => ["25%", "50%"], []);

  const handleRefresh = useCallback(() => {
    console.log("handleRefresh");
  }, []);

  const renderItem = useCallback(
    ({ item }) => (
      <View style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );

  return (
    <View style={styles.container}>
      <BottomSheet snapPoints={snapPoints}>
        <BottomSheetFlatList
          data={data}
          keyExtractor={(i) => i}
          renderItem={renderItem}
          contentContainerStyle={styles.contentContainer}
          refreshing={false}
          onRefresh={handleRefresh}
        />
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    backgroundColor: "white",
  },
  itemContainer: {
    padding: 6,
    margin: 6,
    backgroundColor: "#eee",
  },
});

export default App;

To ensure the Bottom Sheet reacts correctly to keyboard appearance on both iOS and Android, use the pre-integrated BottomSheetTextInput component instead of the standard React Native TextInput. This component communicates internally with the Bottom Sheet to manage layout adjustments when the keyboard opens.

If you need to use a custom TextInput component, you must manually implement the handleOnFocus and handleOnBlur logic from the BottomSheetTextInput source code to maintain compatibility.

import React, { useMemo } from "react";
import { View, StyleSheet } from "react-native";
import BottomSheet, { BottomSheetTextInput } from "@gorhom/bottom-sheet";

const App = () => {
  const snapPoints = useMemo(() => ["25%"], []);

  return (
    <View style={styles.container}>
      <BottomSheet snapPoints={snapPoints}>
        <View style={styles.contentContainer}>
          <BottomSheetTextInput value="Awesome 🎉" style={styles.textInput} />
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "grey",
  },
  textInput: {
    alignSelf: "stretch",
    marginHorizontal: 12,
    marginBottom: 12,
    padding: 12,
    borderRadius: 12,
    backgroundColor: "grey",
    color: "white",
    textAlign: "center",
  },
  contentContainer: {
    flex: 1,
    alignItems: "center",
  },
});

export default App;

To implement a custom footer that stays positioned at the bottom of the BottomSheet and reacts to keyboard appearance, wrap your component with the BottomSheetFooter component.

Your custom footer component will receive an animatedFooterPosition prop, which is a calculated animated position. To ensure your component can receive this prop, extend the BottomSheetFooterProps interface.

Key Props for BottomSheetFooter:

• animatedFooterPosition: The calculated animated position for the footer.
• bottomInset: A value (typically from useSafeAreaInsets) to avoid bottom notches or safe area obstructions.

import { BottomSheetFooter, BottomSheetFooterProps } from '@gorhom/bottom-sheet';

interface CustomFooterProps extends BottomSheetFooterProps {}

const CustomFooter = ({ animatedFooterPosition }: CustomFooterProps) => {
  return (
    <BottomSheetFooter
      bottomInset={bottomSafeArea}
      animatedFooterPosition={animatedFooterPosition}
    >
      {/* Your footer content here */}
    </BottomSheetFooter>
  );
};