Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@gorhom/bottom-sheet

Package Overview
Dependencies
Maintainers
1
Versions
158
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gorhom/bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀

  • 4.1.3
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created

What is @gorhom/bottom-sheet?

@gorhom/bottom-sheet is a performant and customizable bottom sheet component for React Native. It allows developers to create modal-like bottom sheets that can be used for various purposes such as displaying additional content, forms, or actions. The package is highly flexible and supports gestures, animations, and various customization options.

What are @gorhom/bottom-sheet's main functionalities?

Basic Bottom Sheet

This code demonstrates how to create a basic bottom sheet with three snap points (collapsed, half-expanded, and fully expanded). The bottom sheet can be opened by pressing a button.

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

const App = () => {
  const bottomSheetRef = useRef(null);
  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Bottom Sheet" onPress={() => bottomSheetRef.current?.expand()} />
      <BottomSheet ref={bottomSheetRef} snapPoints={[0, '50%', '100%']}>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text>Bottom Sheet Content</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

export default App;
```

Custom Handle Component

This code demonstrates how to use a custom handle component for the bottom sheet. The custom handle can be styled and customized as needed.

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

const CustomHandle = () => (
  <View style={{ padding: 20, backgroundColor: 'lightgray' }}>
    <Text>Custom Handle</Text>
  </View>
);

const App = () => {
  const bottomSheetRef = useRef(null);
  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Bottom Sheet" onPress={() => bottomSheetRef.current?.expand()} />
      <BottomSheet ref={bottomSheetRef} snapPoints={[0, '50%', '100%']} handleComponent={CustomHandle}>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text>Bottom Sheet Content</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

export default App;
```

Bottom Sheet with FlatList

This code demonstrates how to use a FlatList inside the bottom sheet. This is useful for displaying a list of items within the bottom sheet.

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

const App = () => {
  const bottomSheetRef = useRef(null);
  const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Bottom Sheet" onPress={() => bottomSheetRef.current?.expand()} />
      <BottomSheet ref={bottomSheetRef} snapPoints={[0, '50%', '100%']}>
        <FlatList
          data={data}
          keyExtractor={(item) => item}
          renderItem={({ item }) => (
            <View style={{ padding: 20 }}>
              <Text>{item}</Text>
            </View>
          )}
        />
      </BottomSheet>
    </View>
  );
};

export default App;
```

Other packages similar to @gorhom/bottom-sheet

Keywords

FAQs

Package last updated on 18 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc