https://github.com/allenan/react-native-holy-sheet

A silky smooth, scrolling bottom sheet component
https://github.com/allenan/react-native-holy-sheet

Last synced: 6 days ago
JSON representation

A silky smooth, scrolling bottom sheet component

• Host: GitHub
• URL: https://github.com/allenan/react-native-holy-sheet
• Owner: allenan
• Created: 2020-12-15T04:06:36.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-25T16:07:06.000Z (almost 4 years ago)
• Last Synced: 2024-11-16T12:24:42.595Z (2 months ago)
• Language: TypeScript
• Size: 328 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Holy Sheet 😇

A silky smooth, scrolling bottom sheet component

## Installation

Install the library:

```

yarn add react-native-holy-sheet@alpha

```

Install peer dependencies:

```

yarn add react-native-gesture-handler react-native-reanimated@alpha

```

Because this uses the alpha version 2 of `react-native-reanimated`, the following additional configuration is required:

Add the following plugin to your .babelrc:

```

module.exports = {

  plugins: ['react-native-reanimated/plugin'],

}

```

For iOS:

```

npx pod-install

```

## Usage

### Basic example with ScrollView

```js

  {Array.from({ length: 10 }).map((_, i) => (

    

      Item {i}

    

  ))}

```

### FlatList

```js

 ({

      id: i.toString(),

      text: `Item ${i}`,

    })),

    keyExtractor: (item) => item.id,

    renderItem: ({ item }) => (

      

        {item.text}

      

    ),

  }}

/>

```

See the example app for additional usage.