🌊 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

• Ginhinio Castelen - GitHub
• BUILDDIV LTD

📜 License

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