React Native Bottom Sheet

https://gorhom.dev/react-native-bottom-sheet
Admin
A performant interactive bottom sheet component for React Native applications with fully...
Tokens:15,129
Snippets:199
Trust Score:6.8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Redash

Source: https://gorhom.dev/react-native-bottom-sheet/custom-handle

To use the custom handle example, you need to install `react-native-redash`.

```bash
yarn add react-native-redash  

```

--------------------------------

### Installation

Source: https://gorhom.dev/react-native-bottom-sheet

Install the library using yarn.

```bash
yarn add @gorhom/bottom-sheet@^5  
```

--------------------------------

### Simple Keyboard Handling Example

Source: https://gorhom.dev/react-native-bottom-sheet/keyboard-handling

An example demonstrating basic keyboard handling using BottomSheetTextInput.

```javascript
import React, { useMemo } from "react";  
import { View, StyleSheet } from "react-native";  
import BottomSheet, { BottomSheetTextInput } from "@gorhom/bottom-sheet";  
  
const App = () => {  
  // variables  
  const snapPoints = useMemo(() => ["25%"], []);  
  
  // renders  
  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;  


```

--------------------------------

### Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheettextinput

A basic example demonstrating the usage of BottomSheetTextInput within a BottomSheet component.

```javascript
import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetView, BottomSheetTextInput } from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        keyboardBehavior="fillParent"
        enableDynamicSizing={false}
        onChange={handleSheetChanges}
      >
        <BottomSheetTextInput style={styles.input} />
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
  input: {
    marginTop: 8,
    marginBottom: 10,
    borderRadius: 10,
    fontSize: 16,
    lineHeight: 20,
    padding: 8,
    backgroundColor: 'rgba(151, 151, 151, 0.25)',
  },
});

export default App;
```

--------------------------------

### Expo Installation

Source: https://gorhom.dev/react-native-bottom-sheet

Install the required dependencies for Expo projects.

```bash
npx expo install react-native-reanimated react-native-gesture-handler  
```

--------------------------------

### Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetvirtualizedlist

This example demonstrates how to use BottomSheetVirtualizedList with BottomSheet, including data, snap points, and rendering items.

```javascript
import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetVirtualizedList } from "@gorhom/bottom-sheet";

const App = () => {
  // hooks
  const sheetRef = useRef<BottomSheet>(null);

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

  // callbacks
  const handleSheetChange = useCallback((index) => {
    console.log("handleSheetChange", index);
  }, []);
  const handleSnapPress = useCallback((index) => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  // render
  const renderItem = useCallback(
    ({ item }) => (
      <View style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );
  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
      <Button title="Close" onPress={() => handleClosePress()} />
      <BottomSheet
        ref={sheetRef}
        snapPoints={snapPoints}
        enableDynamicSizing={false}
        onChange={handleSheetChange}
      >
        <BottomSheetVirtualizedList
          data={data}
          keyExtractor={(i) => i}
          getItemCount={(data) => data.length}
          getItem={(data, index) => data[index]}
          renderItem={renderItem}
          contentContainerStyle={styles.contentContainer}
        />
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

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

export default App;
```

--------------------------------

### snapPoints examples

Source: https://gorhom.dev/react-native-bottom-sheet/props

Examples of how to define snapPoints for the bottom sheet.

```javascript
snapPoints={[200, 500]}
snapPoints={[200, '50%']}
snapPoints={['100%']}
```

--------------------------------

### BottomSheetBackdrop Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetbackdrop

This example demonstrates how to use the BottomSheetBackdrop component with custom props like disappearsOnIndex and appearsOnIndex.

```typescript
import React, { useCallback, useMemo, useRef } from "react";
import { View, Text, StyleSheet } from "react-native";
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from "@gorhom/bottom-sheet";

const App = () => {
	// ref
	const bottomSheetRef = useRef<BottomSheet>(null);

	// variables
	const snapPoints = useMemo(() => ["25%", "50%", "75%"], []);

	// callbacks
	const handleSheetChanges = useCallback((index: number) => {
		console.log("handleSheetChanges", index);
	}, []);

	// renders
	const renderBackdrop = useCallback(
		(props) => (
			<BottomSheetBackdrop 
				{...props} 
				disappearsOnIndex={1} 
				appearsOnIndex={2} 
			/> 
		),
		[]
	);
	return (
		<GestureHandlerRootView style={styles.container}>
			<BottomSheet
				ref={bottomSheetRef}
				index={1}
				snapPoints={snapPoints}
				backdropComponent={renderBackdrop}
        enableDynamicSizing={false}
				onChange={handleSheetChanges}
			>
				<BottomSheetView style={styles.contentContainer}>
					<Text>Awesome 🎉</Text>
				</BottomSheetView>
			</BottomSheet>
		</GestureHandlerRootView>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 24,
		backgroundColor: "grey",
	},
	contentContainer: {
		flex: 1,
		alignItems: "center",
	},
});

export default App;

```

--------------------------------

### BottomSheetScrollView Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetscrollview

This example demonstrates how to use BottomSheetScrollView with BottomSheet, including managing snap points, handling changes, and rendering items.

```javascript
import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";

const App = () => {
  // hooks
  const sheetRef = useRef<BottomSheet>(null);

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

  // callbacks
  const handleSheetChange = useCallback((index) => {
    console.log("handleSheetChange", index);
  }, []);
  const handleSnapPress = useCallback((index) => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  // render
  const renderItem = useCallback(
    (item) => (
      <View key={item} style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );
  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
      <Button title="Close" onPress={() => handleClosePress()} />
      <BottomSheet
        ref={sheetRef}
        index={1}
        snapPoints={snapPoints}
        enableDynamicSizing={false}
        onChange={handleSheetChange}
      >
        <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
          {data.map(renderItem)}
        </BottomSheetScrollView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

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

export default App;

```

--------------------------------

### Dependencies

Source: https://gorhom.dev/react-native-bottom-sheet

Install the required dependencies before using the library.

```bash
yarn add react-native-reanimated react-native-gesture-handler  
```

--------------------------------

### Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetflatlist

This example demonstrates how to integrate BottomSheetFlatList into a React Native application, including setting up snap points, handling sheet changes, and rendering list items.

```javascript
import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";

const App = () => {
  // hooks
  const sheetRef = useRef<BottomSheet>(null);

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

  // callbacks
  const handleSheetChange = useCallback((index) => {
    console.log("handleSheetChange", index);
  }, []);
  const handleSnapPress = useCallback((index) => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  // render
  const renderItem = useCallback(
    ({ item }) => (
      <View style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );
  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
      <Button title="Close" onPress={() => handleClosePress()} />
      <BottomSheet
        ref={sheetRef}
        snapPoints={snapPoints}
        enableDynamicSizing={false}
        onChange={handleSheetChange}
      >
        <BottomSheetFlatList
          data={data}
          keyExtractor={(i) => i}
          renderItem={renderItem}
          contentContainerStyle={styles.contentContainer}
        />
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

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

export default App;
```

--------------------------------

### Simple Pull To Refresh Example

Source: https://gorhom.dev/react-native-bottom-sheet/pull-to-refresh

This example demonstrates how to enable the pull-to-refresh feature by providing the `refreshing` and `onRefresh` props to the `BottomSheetFlatList` component.

```javascript
import React, { useCallback, useMemo } from "react";  
import { StyleSheet, View, Text } from "react-native";  
import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";  
  
const App = () => {  
  // variables  
  const data = useMemo(  
    () =>  
      Array(50)  
        .fill(0)  
        .map((_, index) => `index-${index}`),  
    []  
  );  
  const snapPoints = useMemo(() => ["25%", "50%"], []);  
  
  // callbacks  
  const handleRefresh = useCallback(() => {  
    console.log("handleRefresh");  
  }, []);  
  
  // render  
  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;  

```

--------------------------------

### Basic Usage Example

Source: https://gorhom.dev/react-native-bottom-sheet/methods

An example demonstrating how to use the BottomSheet component and its ref to close the sheet.

```javascript
import React, { useRef } from 'react';
import { Button } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  const bottomSheetRef = useRef<BottomSheet>(null);

  const handleClosePress = () => bottomSheetRef.current.close()

  return (
    <>
      <Button title="Close Sheet" onPress={handleClosePress} />
      <BottomSheet ref={bottomSheetRef}>
    </>
  )
}
```

--------------------------------

### BottomSheetFlashList Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetflashlist

This example demonstrates how to use BottomSheetFlashList with BottomSheet, including data memoization, snap points, and item rendering.

```javascript
import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import BottomSheet, { BottomSheetFlashList } from "@gorhom/bottom-sheet";

const keyExtractor = (item) => item;

const App = () => {
	// hooks
	const sheetRef = useRef<BottomSheet>(null);

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

	// callbacks
	const handleSnapPress = useCallback((index) => {
		sheetRef.current?.snapToIndex(index);
	}, []);
	const handleClosePress = useCallback(() => {
		sheetRef.current?.close();
	}, []);

	// render
	const renderItem = useCallback(({ item }) => {
		return (
			<View key={item} style={styles.itemContainer}>
				<Text>{item}</Text>
			</View>
		);
	}, []);
	return (
		<GestureHandlerRootView style={styles.container}>
			<Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
			<Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
			<Button title="Close" onPress={() => handleClosePress()} />
			<BottomSheet
				ref={sheetRef}
				snapPoints={snapPoints}
				enableDynamicSizing={false}
			>
				<BottomSheetFlashList
					data={data}
					keyExtractor={keyExtractor}
					renderItem={renderItem}
					estimatedItemSize={43.3}
				/>
			</BottomSheet>
		</GestureHandlerRootView>
	);
};

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

export default App;
```

--------------------------------

### useBottomSheetModal Hook Example

Source: https://gorhom.dev/react-native-bottom-sheet/modal/hooks

Example demonstrating how to use the useBottomSheetModal hook to access dismiss and dismissAll functions.

```javascript
import React from 'react';
import { View, Button } from 'react-native';
import { useBottomSheetModal } from '@gorhom/bottom-sheet';

const SheetContent = () => {
  const { dismiss, dismissAll } = useBottomSheetModal();

  return (
    <View>
      <Button onPress={dismiss}>
    </View>
  )
}
```

--------------------------------

### BottomSheetSectionList Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetsectionlist

This example demonstrates how to integrate and use the BottomSheetSectionList component, including setting up sections, snap points, and rendering headers and items. It also shows how to control the bottom sheet using buttons.

```javascript
import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetSectionList } from "@gorhom/bottom-sheet";

const App = () => {
  // hooks
  const sheetRef = useRef<BottomSheet>(null);

  // variables
  const sections = useMemo(
    () =>
      Array(10)
        .fill(0)
        .map((_, index) => ({
          title: `Section ${index}`,
          data: Array(10)
            .fill(0)
            .map((_, index) => `Item ${index}`),
        })),
    []
  );
  const snapPoints = useMemo(() => ["25%", "50%", "90%"], []);

  // callbacks
  const handleSheetChange = useCallback((index) => {
    console.log("handleSheetChange", index);
  }, []);
  const handleSnapPress = useCallback((index) => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  // render
  const renderSectionHeader = useCallback(
    ({ section }) => (
      <View style={styles.sectionHeaderContainer}>
        <Text>{section.title}</Text>
      </View>
    ),
    []
  );
  const renderItem = useCallback(
    ({ item }) => (
      <View style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );
  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
      <Button title="Close" onPress={() => handleClosePress()} />
      <BottomSheet
        ref={sheetRef}
        index={1}
        snapPoints={snapPoints}
        enableDynamicSizing={false}
        onChange={handleSheetChange}
      >
        <BottomSheetSectionList
          sections={sections}
          keyExtractor={(i) => i}
          renderSectionHeader={renderSectionHeader}
          renderItem={renderItem}
          contentContainerStyle={styles.contentContainer}
        />
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

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

export default App;
```

--------------------------------

### BottomSheetView Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetview

An example demonstrating the usage of BottomSheetView with various props and functionalities like snapping and closing.

```javascript
import React, { useCallback, useRef, useMemo } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";

const App = () => {
  // hooks
  const sheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ["25%", "50%", "90%"], []);

  // callbacks
  const handleSheetChange = useCallback((index) => {
    console.log("handleSheetChange", index);
  }, []);
  const handleSnapPress = useCallback((index) => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  // render
  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
      <Button title="Close" onPress={() => handleClosePress()} />
      <BottomSheet
        ref={sheetRef}
        snapPoints={snapPoints}
        enableDynamicSizing={false}
        onChange={handleSheetChange}
      >
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🔥</Text>
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 200,
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: 'center',
  },
});

export default App;
```

--------------------------------

### BottomSheetFooter Example

Source: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetfooter

This example demonstrates how to use the BottomSheetFooter component to create a custom footer for the BottomSheet.

```javascript
import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetFooter } from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // renders
  const renderFooter = useCallback(
    props => (
      <BottomSheetFooter {...props} bottomInset={24}>
        <View style={styles.footerContainer}>
          <Text style={styles.footerText}>Footer</Text>
        </View>
      </BottomSheetFooter>
    ),
    []
  );
  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        footerComponent={renderFooter}
      >
        <View style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
  footerContainer: {
    padding: 12,
    margin: 12,
    borderRadius: 12,
    backgroundColor: '#80f',
  },
  footerText: {
    textAlign: 'center',
    color: 'white',
    fontWeight: '800',
  },
});

export default App;
```

--------------------------------

### Simple Detach Modal Example

Source: https://gorhom.dev/react-native-bottom-sheet/detach-modal

An example demonstrating how to implement a detach modal by setting the `detached` prop to `true` and providing a `bottomInset` value.

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

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ["25%"], []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        // add bottom inset to elevate the sheet
        bottomInset={46}
        // set `detached` to true
        detached={true}
        style={styles.sheetContainer}
      >
        <View style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "grey",
  },
  sheetContainer: {
    // add horizontal space
    marginHorizontal: 24,
  },
  contentContainer: {
    flex: 1,
    alignItems: "center",
  },
});

export default App;
```

--------------------------------

### Custom Backdrop Component Example

Source: https://gorhom.dev/react-native-bottom-sheet/custom-backdrop

An example of a custom backdrop component that utilizes animated props for opacity control.

```javascript
import React, { useMemo } from "react";  
import { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";  
import Animated, {  
  Extrapolate,  
  interpolate,  
  useAnimatedStyle,  
} from "react-native-reanimated";  
  
const CustomBackdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {  
  // animated variables  
  const containerAnimatedStyle = useAnimatedStyle(() => ({  
    opacity: interpolate(  
      animatedIndex.value,  
      [0, 1],  
      [0, 1],  
      Extrapolate.CLAMP  
    ),  
  }));  
  
  // styles  
  const containerStyle = useMemo(  
    () => [  
      style,  
      {  
        backgroundColor: "#a8b5eb",  
      },  
      containerAnimatedStyle,  
    ],  
    [style, containerAnimatedStyle]  
  );
  
  return <Animated.View style={containerStyle} />;
};

export default CustomBackdrop;  

```

--------------------------------

### Custom Handle Component Example

Source: https://gorhom.dev/react-native-bottom-sheet/custom-handle

This example demonstrates a custom handle component that utilizes `animatedIndex` and `animatedPosition` props for dynamic styling and animations. It includes helper functions and styles for creating a visually engaging handle.

```typescript
import React, { useMemo } from "react";  
import { StyleProp, StyleSheet, ViewStyle } from "react-native";  
import { BottomSheetHandleProps } from "@gorhom/bottom-sheet";  
import Animated, {  
  Extrapolate,  
  interpolate,  
  useAnimatedStyle,  
  useDerivedValue,  
} from "react-native-reanimated";  
import { toRad } from "react-native-redash";  
  
// @ts-ignore  
export const transformOrigin = ({ x, y }, ...transformations) => {  
  "worklet";  
  return [  
    { translateX: x },  
    { translateY: y },  
    ...transformations,  
    { translateX: x * -1 },  
    { translateY: y * -1 },  
  ];  
};  
  
interface HandleProps extends BottomSheetHandleProps {  
  style?: StyleProp<ViewStyle>;  
}  
  
const Handle: React.FC<HandleProps> = ({ style, animatedIndex }) => {  
  //#region animations  
  const indicatorTransformOriginY = useDerivedValue(() =>  
    interpolate(animatedIndex.value, [0, 1, 2], [-1, 0, 1], Extrapolate.CLAMP)  
  );  
  //#endregion  
  
  //#region styles  
  const containerStyle = useMemo(() => [styles.header, style], [style]);  
  const containerAnimatedStyle = useAnimatedStyle(() => {  
    const borderTopRadius = interpolate(  
      animatedIndex.value,  
      [1, 2],  
      [20, 0],  
      Extrapolate.CLAMP  
    );  
    return {  
      borderTopLeftRadius: borderTopRadius,  
      borderTopRightRadius: borderTopRadius,  
    };  
  });  
  const leftIndicatorStyle = useMemo(  
    () => ({  
      ...styles.indicator,  
      ...styles.leftIndicator,  
    }),  
    []  
  );  
  const leftIndicatorAnimatedStyle = useAnimatedStyle(() => {  
    const leftIndicatorRotate = interpolate(  
      animatedIndex.value,  
      [0, 1, 2],  
      [toRad(-30), 0, toRad(30)],  
      Extrapolate.CLAMP  
    );  
    return {  
      transform: transformOrigin(  
        { x: 0, y: indicatorTransformOriginY.value },  
        {  
          rotate: `${leftIndicatorRotate}rad`,  
        },  
        {  
          translateX: -5,  
        }  
      ),  
    };  
  });  
  const rightIndicatorStyle = useMemo(  
    () => ({  
      ...styles.indicator,  
      ...styles.rightIndicator,  
    }),  
    []  
  );  
  const rightIndicatorAnimatedStyle = useAnimatedStyle(() => {  
    const rightIndicatorRotate = interpolate(  
      animatedIndex.value,  
      [0, 1, 2],  
      [toRad(30), 0, toRad(-30)],  
      Extrapolate.CLAMP  
    );  
    return {  
      transform: transformOrigin(  
        { x: 0, y: indicatorTransformOriginY.value },  
        {  
          rotate: `${rightIndicatorRotate}rad`,  
        },  
        {  
          translateX: 5,  
        }  
      ),  
    };  
  });  
  //#endregion  
  
  // render  
  return (  
    <Animated.View  
      style={[containerStyle, containerAnimatedStyle]}  
      renderToHardwareTextureAndroid={true}  
    >  
      <Animated.View style={[leftIndicatorStyle, leftIndicatorAnimatedStyle]} />  
      <Animated.View  
        style={[rightIndicatorStyle, rightIndicatorAnimatedStyle]}  
      />  
    </Animated.View>  
  );  
};  
  
export default Handle;  
  
const styles = StyleSheet.create({  
  header: {  
    alignContent: "center",  
    alignItems: "center",  
    justifyContent: "center",  
    backgroundColor: "white",  
    paddingVertical: 14,  
    borderBottomWidth: 1,  
    borderBottomColor: "#fff",  
  },  
  indicator: {  
    position: "absolute",  
    width: 10,  
    height: 4,  
    backgroundColor: "#999",  
  },  
  leftIndicator: {  
    borderTopStartRadius: 2,  
    borderBottomStartRadius: 2,  
  },  
  rightIndicator: {  
    borderTopEndRadius: 2,  
    borderBottomEndRadius: 2,  
  },  
});  

```

--------------------------------

### useBottomSheetTimingConfigs Hook Example

Source: https://gorhom.dev/react-native-bottom-sheet/hooks

This hook generates animation timing configurations for the BottomSheet component. It allows customization of duration and easing functions for animations.

```javascript
import React from 'react';
import BottomSheet, { useBottomSheetTimingConfigs } from '@gorhom/bottom-sheet';
import { Easing } from 'react-native-reanimated';

const SheetContent = () => {
  const animationConfigs = useBottomSheetTimingConfigs({
    duration: 250,
    easing: Easing.exp,
  });

  return (
    <BottomSheet
      // ... other props
      animationConfigs={animationConfigs}
    >
      {CONTENT HERE}
    </BottomSheet>
  )
}
```

--------------------------------

### useBottomSheetSpringConfigs Hook Example

Source: https://gorhom.dev/react-native-bottom-sheet/hooks

This hook generates animation spring configurations for the BottomSheet component. It allows customization of damping, stiffness, and other spring-related properties.

```javascript
import React from 'react';
import BottomSheet, { useBottomSheetSpringConfigs } from '@gorhom/bottom-sheet';

const SheetContent = () => {
  const animationConfigs = useBottomSheetSpringConfigs({
    damping: 80,
    overshootClamping: true,
    restDisplacementThreshold: 0.1,
    restSpeedThreshold: 0.1,
    stiffness: 500,
  });

  return (
    <BottomSheet
      // ... other props
      animationConfigs={animationConfigs}
    >
      {CONTENT HERE}
    </BottomSheet>
  )
}
```

--------------------------------

### Custom Background Component Example

Source: https://gorhom.dev/react-native-bottom-sheet/custom-background

An example of a custom background component for the React Native Bottom Sheet. It demonstrates how to use `animatedIndex` to interpolate colors for the background.

```typescript
import React, { useMemo } from "react";
import { BottomSheetBackgroundProps } from "@gorhom/bottom-sheet";
import Animated,
{
  useAnimatedStyle,
  interpolateColor,
} from "react-native-reanimated";

const CustomBackground: React.FC<BottomSheetBackgroundProps> = ({ 
  style,
  animatedIndex,
}) => {
  //#region styles
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    // @ts-ignore
    backgroundColor: interpolateColor(
      animatedIndex.value,
      [0, 1],
      ["#ffffff", "#a8b5eb"]
    ),
  }));
  const containerStyle = useMemo(
    () => [style, containerAnimatedStyle],
    [style, containerAnimatedStyle]
  );
  //#endregion

  // render
  return <Animated.View pointerEvents="none" style={containerStyle} />;
};

export default CustomBackground;
```

--------------------------------

### Bottom Sheet Modal Usage

Source: https://gorhom.dev/react-native-bottom-sheet/modal/usage

This snippet demonstrates a basic implementation of the Bottom Sheet Modal component, including its setup with GestureHandlerRootView and BottomSheetModalProvider, and how to present and manage the modal.

```javascript
import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
  BottomSheetModal,
  BottomSheetView,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
      <GestureHandlerRootView style={styles.container}>
        <BottomSheetModalProvider>
          <Button
            onPress={handlePresentModalPress}
            title="Present Modal"
            color="black"
          />
          <BottomSheetModal
            ref={bottomSheetModalRef}
            onChange={handleSheetChanges}
          >
            <BottomSheetView style={styles.contentContainer}>
              <Text>Awesome 🎉</Text>
            </BottomSheetView>
        </BottomSheetModal>
        </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;
```

--------------------------------

### useBottomSheet Hook Example

Source: https://gorhom.dev/react-native-bottom-sheet/hooks

This hook provides access to bottom sheet methods like expand and animatedIndex & animatedPosition. It can be used within any component inside the BottomSheet.

```javascript
import React from 'react';
import { View, Button} from 'react-native';
import { useBottomSheet } from '@gorhom/bottom-sheet';

const SheetContent = () => {
  const { expand } = useBottomSheet();

  return (
    <View>
      <Button onPress={expand}>
    </View>
  )
}
```

--------------------------------

### App.tsx

Source: https://gorhom.dev/react-native-bottom-sheet/custom-footer

An example of how to integrate the CustomFooter component into the main App component. It sets up a BottomSheet with defined snap points and passes the CustomFooter as the footerComponent prop.

```typescript
import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import CustomFooter from './CustomFooter';

const App = () => {
  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        index={1}
        snapPoints={snapPoints}
        footerComponent={CustomFooter}
      >
        <View style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;

```

--------------------------------

### useBottomSheetScrollableCreator Hook Example

Source: https://gorhom.dev/react-native-bottom-sheet/hooks

This custom hook creates a scrollable component that integrates with third-party libraries like LegendList or FlashList, enabling interaction and scrolling behaviors with the BottomSheet component.

```javascript
import React from 'react';
import BottomSheet, { useBottomSheetScrollableCreator } from '@gorhom/bottom-sheet';
import { LegendList } from '@legendapp/list';

const SheetContent = () => {
  const BottomSheetLegendListScrollable = useBottomSheetScrollableCreator();
  return (
    <BottomSheet>
      <LegendList
        {...}
        renderScrollComponent={BottomSheetLegendListScrollable}
      />
    </BottomSheet>
  )
}
```

--------------------------------

### Simple Usage

Source: https://gorhom.dev/react-native-bottom-sheet/usage

This code demonstrates a basic implementation of the Bottom Sheet component with static content. It includes necessary imports, state management with `useRef` and `useCallback`, and basic styling.

```javascript
import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        onChange={handleSheetChanges}
      >
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: 'center',
  },
});

export default App;
```

--------------------------------

### FlashList Integration

Source: https://gorhom.dev/react-native-bottom-sheet/blog/bottom-sheet-v5

Importing the pre-integrated BottomSheetFlashList component.

```javascript
import { BottomSheetFlashList } from '@gorhom/bottom-sheet'
```

--------------------------------

### Accessing Bottom Sheet Modal Methods

Source: https://gorhom.dev/react-native-bottom-sheet/modal/methods

Demonstrates how to access and use the methods of the BottomSheetModal component by creating a ref and calling methods like 'present'.

```javascript
import React, { useRef } from 'react';
import {BottomSheetModal} from '@gorhom/bottom-sheet';

const App = () => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const handlePresentPress = () => bottomSheetModalRef.current.present()
  return (
    <>
      <Button title="Present Sheet" onPress={handlePresentPress} />
      <BottomSheetModal ref={bottomSheetModalRef}>
    </>
  )
}
```

--------------------------------

### Present Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/modal/methods

Defines the type signature for the 'present' method, which mounts and presents the bottom sheet modal to its initial snap point.

```typescript
type present = (
  // Data to be passed to the modal.
  data?: any
) => void;
```

--------------------------------

### snapToPosition Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/methods

Type definition for the snapToPosition method, which allows snapping to a specific pixel or percentage position.

```typescript
type snapToPosition = (
  // position in pixel or percentage.
  position: number,
  // snap animation configs
  animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) => void;
```

--------------------------------

### Pressables / Touchables are not working on Android

Source: https://gorhom.dev/react-native-bottom-sheet/troubleshooting

To resolve issues with Pressables / Touchables not working on Android, use touchables provided by the library.

```javascript
import {
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback,
} from '@gorhom/bottom-sheet';

```

--------------------------------

### collapse Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/methods

Type definition for the collapse method, which snaps the bottom sheet to the minimum provided point.

```typescript
type collapse = (
  // snap animation configs
  animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) => void;
```

--------------------------------

### Animation Configuration Type

Source: https://gorhom.dev/react-native-bottom-sheet/props

Defines the type for animation configurations, which can be created using specific hooks.

```typescript
type animationConfigs = (
	point: number,
	velocity: number,
	callback: () => void
) => number;
```

--------------------------------

### expand Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/methods

Type definition for the expand method, which snaps the bottom sheet to the maximum provided point.

```typescript
type expand = (
  // snap animation configs
  animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) => void;
```

--------------------------------

### snapToIndex Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/methods

Type definition for the snapToIndex method, which allows snapping to a specific index in the snapPoints array.

```typescript
type snapToIndex = (
  // snap point index.
  index: number,
  // snap animation configs
  animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) => void;
```

--------------------------------

### On Change Callback Type

Source: https://gorhom.dev/react-native-bottom-sheet/props

Defines the type for the onChange callback, which is triggered when the sheet position changes.

```typescript
type onChange = (index: number) => void;
```

--------------------------------

### Dismiss Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/modal/methods

Defines the type signature for the 'dismiss' method, which closes and unmounts the bottom sheet modal.

```typescript
type dismiss = (
  // AnimationConfigs snap animation configs.
  animationConfigs?: WithSpringConfig | WithTimingConfig
) => void;
```

--------------------------------

### forceClose Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/methods

Type definition for the forceClose method, which forcefully closes the bottom sheet without interruptions.

```typescript
type forceClose = (
  // snap animation configs
  animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) => void;
```

--------------------------------

### close Method Signature

Source: https://gorhom.dev/react-native-bottom-sheet/methods

Type definition for the close method, which closes the bottom sheet.

```typescript
type close = (
  // snap animation configs
  animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
) => void;
```

--------------------------------

### On Animate Callback Type

Source: https://gorhom.dev/react-native-bottom-sheet/props

Defines the type for the onAnimate callback, which is triggered when the sheet is about to animate to a new position.

```typescript
type onAnimate = (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
```

--------------------------------

### onDismiss Callback Type

Source: https://gorhom.dev/react-native-bottom-sheet/modal/props

Defines the type for the onDismiss callback function.

```typescript
type onDismiss = () => void;
```

--------------------------------

### dismiss Function Type

Source: https://gorhom.dev/react-native-bottom-sheet/modal/hooks

Type definition for the dismiss function, which can optionally take a key to dismiss a specific modal.

```typescript
type dismiss = (key?: string) => void;
```

--------------------------------

### dismissAll Function Type

Source: https://gorhom.dev/react-native-bottom-sheet/modal/hooks

Type definition for the dismissAll function, which dismisses all mounted/presented modals.

```typescript
type dismissAll = () => void;
```

--------------------------------

### Component gesture interaction conflict with Bottom Sheet interactions

Source: https://gorhom.dev/react-native-bottom-sheet/troubleshooting

To avoid gesture interaction conflict between the Bottom Sheet and its content, wrap your component with NativeViewGestureHandler from 'react-native-gesture-handler'.

```javascript
import { NativeViewGestureHandler } from 'react-native-gesture-handler';

<NativeViewGestureHandler disallowInterruption={true}>
   <AwesomeComponent />
</NativeViewGestureHandler>

```

--------------------------------

### Adding horizontal FlatList or ScrollView is not working properly on Android

Source: https://gorhom.dev/react-native-bottom-sheet/troubleshooting

To resolve issues with horizontal FlatList or ScrollView not working properly on Android, use ScrollView & FlatList from 'react-native-gesture-handler'.

```javascript
import {
  ScrollView,
  FlatList
} from 'react-native-gesture-handler';

```
Tokens:
Raw