bottom-sheet-with-top-element

This is a custom version of the @gorhom/bottom-sheet library with additional features and modifications.

Original Library

This package is based on @gorhom/bottom-sheet.

Modifications

• Added Fixed top element.
• Added Animate top element.
• Apply Animate top element background.

Preview

Installation

1npm install bottom-sheet-with-top-element

or

1yarn add bottom-sheet-with-top-element

Added Props

Props	Description	Optional	Type
animateTopElementComponent	Elements that stay fixed at the top regardless of animations	true	React.FC
animateTopElementBackgroundComponent	Element that automatically appears when the bottom sheet animation ends	true	React.FC
fixedTopElementComponent	Element that will serve as the background for animateTopElementBackgroundComponent	true	React.FC<PropsWithChildren<Pick<ViewProps, 'style'>>

Example

1import { Text, View } from 'react-native';
2import BottomSheet from '@gorhom/bottom-sheet';
3
4export default function Example() {
5    const animateTopElementBackgroundComponent = ({ children, style }) => (
6      <View
7        style={{
8          ...style,
9          backgroundColor: 'blue',
10          height: 70,
11          width: '100%',
12        }}
13      >
14        {children}
15      </View>
16    );
17
18    const animateTopElementComponent = () => (
19      <View style={{ paddingVertical: 16, paddingHorizontal: 12 }}>
20        <Text>This is animate top element.</Text>
21      </View>
22    );
23
24    const fixedTopElementComponent = () => (
25      <View
26        style={{
27          backgroundColor: 'red',
28          height: 50,
29          width: '100%',
30        }}
31      />
32    );
33
34    return (
35      <BottomSheet
36        {...otherProps}
37        animateTopElementBackgroundComponent={animateTopElementBackgroundComponent}
38        animateTopElementComponent={animateTopElementComponent}
39        fixedTopElementComponent={fixedTopElementComponent}
40      />
41    );
42}

License

This project is licensed under the MIT License.

The original @gorhom/bottom-sheet library is also licensed under the MIT License.