A highly customizable, fluid, and native-feeling drawer component for React Native

by React Native Example

? Fluid Drawer Native

Fluid Drawer Native is a highly customizable, fluid, and native-feeling drawer component for React Native. With support for touch gestures, dynamic height adjustments, and seamless integration with device keyboards, this component ensures a premium user experience. Additionally, its lightweight footprint of just 18 kB ensures minimal impact on your application’s performance.

Designed by Ginhinio Castelen (BUILDDIV LTD).

? Demo

? Installation

To add Fluid Drawer Native to your React Native project:

npm install @builddiv/fluid-drawer-native

Or with Yarn:

yarn add @builddiv/fluid-drawer-native

⚙️ Requirements

  • React Native version: 0.72.4 or newer
  • React version: 18.2.0 or newer

? Usage

import React from 'react';
import { FluidDrawerNative } from '@builddiv/fluid-drawer-native';

function MyComponent() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <>
            <Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
            <FluidDrawerNative open={isOpen} onClose={() => setIsOpen(false)}>
                <View>
                    <Text>Welcome to the fluid drawer!</Text>
                    <TextInput placeholder="Type here..." />
                </View>
            </FluidDrawerNative>
        </>
    );
}

? Customization

Prop Type Default Description
open boolean – Whether the drawer is open or closed.
onClose function – Callback for when the drawer needs to be closed.
children React.ReactNode – The content of the drawer.
drawerHeight number 350 The height of the drawer.
handleVisible boolean true Whether the handle of the drawer is visible.
handleStyle StyleProp – Custom style for the handle.
drawerStyle StyleProp – Custom style for the drawer.
backdropStyle StyleProp – Custom style for the backdrop. Keep in mind this is also the main container for the component.
backdropTouchable boolean true Determines if touching outside the drawer should close it.
topTouchAreaStyle StyleProp – Styling applied to the gesture-sensitive area at the top of the drawer, used for triggering dragging actions.

? Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

? Author

? License

This project is licensed under the MIT License. You are free to use it in personal and commercial projects.

GitHub

View Github