react-native-animated-drawer

React native animated drawer

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedDrawer from 'https://cdn.skypack.dev/react-native-animated-drawer';
</script>

README

React native animated drawer

React native drawer using react native Animated.

This package currently contains a bare minimum. Feel free to add features and make pull requests.

Usage:

import * as React from "react";
import Sidebar from "../components/Sidebar";
import {Text, View} from 'react-native';

interface State {
    isOpen: boolean,
}

class HomeScreen extends React.Component<{}, State> {

    constructor(props: any) {
        super(props);
        this.state = {isOpen: false};
    }

    renderContent() {
        return <View style={{backgroundColor: 'green', flex: 1}}>
            {new Array(10).fill(0).map((o, i) => <Text key={i}>Content</Text>)}
        </View>
    }

    renderSidebar() {
        return <View style={{backgroundColor: 'red', flex: 1}}>
            <Text>Sidebar content</Text>
        </View>
    }

    render() {
        return <Sidebar
            shouldOpen={() => this.setState({isOpen: true})}
            shouldClose={() => this.setState({isOpen: false})}
            isOpen={this.state.isOpen}
            content={this.renderContent()}
            sidebarContent={this.renderSidebar()}
        />
    }

}

export default HomeScreen;