React Native Custom Animated Sliding Drawer Example

This tutorial explains how to create custom animated sliding drawer in react native application. Here we will provide complete explanation and code, that helps you create own custom drawer in android or ios application.

      Demo                Download  

React Native Custom Sliding Drawer Example :

Lets follow the below steps to create custom animated sliding drawer example in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { AppRegistry, Text, View, Animated, Image, TouchableOpacity, StyleSheet, Platform } from 'react-native';

Step 3: Now you need to define default width for our custom animated sliding drawer.

const DRAWER_WIDTH = 300;

Step 4: Lets create constructor block inside your App component.

export default class App extends Component {
  
  constructor() {
    super();

    this.animatedValue = new Animated.Value(0);
    this.state = { disabled: false }
    this.toggleFlag = 0;
  }

.............................

this.animatedValue is used for animation purpose
disabled state variable is used to disable the Menu icon button during animation.
this.toggleFlag variable is used to apply the toggle functionality on menu icon button.

Step 5: Implement toggleDrawer function inside your App component.

toggleDrawer = () => {
    if (this.toggleFlag == 0) {
      this.setState({ disabled: true }, () => {
        Animated.timing(
          this.animatedValue,
          {
            toValue: 1,
            duration: 250
          }
        ).start(() => {
          this.setState({ disabled: false });
          this.toggleFlag = 1;
        });
      });
    }
    else {
      this.setState({ disabled: true }, () => {
        Animated.timing(
          this.animatedValue,
          {
            toValue: 0,
            duration: 250
          }
        ).start(() => {
          this.setState({ disabled: false });
          this.toggleFlag = 0;
        });
      });
    }
  }

• If toggleFlag  variable’s value is 0 then it means our custom animated sliding drawer is hidden and If toggleFlag  variable’s value is 1 then it means our custom animated sliding drawer is shown.

• Animated.timing  function is used to change the this.animated  value from 0 to 1 ( in case if drawer is hidden and want to show ) with duration of 250(ms) and again change the this.animated  value from 1 to 0 ( in case if drawer is shown and want to hidden ) with same duration of 250(ms) and change disabled state and toggleFlag variable’s values after completing each ( hidden / shown ) animation

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.

render() {

    const animatedValue = this.animatedValue.interpolate(
      {
        inputRange: [0, 1],
        outputRange: [DRAWER_WIDTH - 46, 0]
      });

    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Animated Sliding Drawer Tutorial.</Text>
        <Animated.View style={[styles.drawer, { transform: [{ translateX: animatedValue }] }]}>
          <TouchableOpacity disabled={this.state.disabled} onPress={this.toggleDrawer} style={{ padding: 8 }}>
            <Image source={require('./images/menu.png')} style={{ width: 30, height: 30, resizeMode: 'contain' }} />
          </TouchableOpacity>
          <View style={styles.drawerContainer}>
            <Text style={styles.menuLayout}>Buy Now</Text>
            <Text style={styles.menuLayout}>Offer Zone</Text>
            <Text style={styles.menuLayout}>Qualty Product</Text>
            <Text style={styles.menuLayout}>50% Off</Text>
          </View>
        </Animated.View>
      </View>
    );
  }

Step 7 : Apply the below style sheet design.

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
    drawer: {
      position: 'absolute',
      top: (Platform.OS == 'ios') ? 20 : 0,
      right: 0,
      bottom: 0,
      width: DRAWER_WIDTH,
      flexDirection: 'row'
    },
    drawerContainer: {
      flex: 1,
      backgroundColor: '#f53b3b',
      alignItems: 'center'
    },
    menuLayout: {
      marginBottom: 1,
      backgroundColor: '#4CAF50',
      width: '100%',
      fontSize: 25,
      color: 'white',
      padding: 10,
    }

  });

Complete Source Code for App.js 

Lets see the complete source code that helps to create custom animated sliding drawer example in react native application.

import React, { Component } from 'react';
import { AppRegistry, Text, View, Animated, Image, TouchableOpacity, StyleSheet, Platform } from 'react-native';


const DRAWER_WIDTH = 300;

export default class App extends Component {
  
  constructor() {
    super();

    this.animatedValue = new Animated.Value(0);
    this.state = { disabled: false }
    this.toggleFlag = 0;
  }

  toggleDrawer = () => {
    if (this.toggleFlag == 0) {
      this.setState({ disabled: true }, () => {
        Animated.timing(
          this.animatedValue,
          {
            toValue: 1,
            duration: 250
          }
        ).start(() => {
          this.setState({ disabled: false });
          this.toggleFlag = 1;
        });
      });
    }
    else {
      this.setState({ disabled: true }, () => {
        Animated.timing(
          this.animatedValue,
          {
            toValue: 0,
            duration: 250
          }
        ).start(() => {
          this.setState({ disabled: false });
          this.toggleFlag = 0;
        });
      });
    }
  }


  render() {

    const animatedValue = this.animatedValue.interpolate(
      {
        inputRange: [0, 1],
        outputRange: [DRAWER_WIDTH - 46, 0]
      });

    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Animated Sliding Drawer Tutorial.</Text>
        <Animated.View style={[styles.drawer, { transform: [{ translateX: animatedValue }] }]}>
          <TouchableOpacity disabled={this.state.disabled} onPress={this.toggleDrawer} style={{ padding: 8 }}>
            <Image source={require('./images/menu.png')} style={{ width: 30, height: 30, resizeMode: 'contain' }} />
          </TouchableOpacity>
          <View style={styles.drawerContainer}>
            <Text style={styles.menuLayout}>Buy Now</Text>
            <Text style={styles.menuLayout}>Offer Zone</Text>
            <Text style={styles.menuLayout}>Qualty Product</Text>
            <Text style={styles.menuLayout}>50% Off</Text>
          </View>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
    drawer: {
      position: 'absolute',
      top: (Platform.OS == 'ios') ? 20 : 0,
      right: 0,
      bottom: 0,
      width: DRAWER_WIDTH,
      flexDirection: 'row'
    },
    drawerContainer: {
      flex: 1,
      backgroundColor: '#f53b3b',
      alignItems: 'center'
    },
    menuLayout: {
      marginBottom: 1,
      backgroundColor: '#4CAF50',
      width: '100%',
      fontSize: 25,
      color: 'white',
      padding: 10,
    }

  });

Screenshot :

This is all about React Native Custom Animated Sliding Drawer Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.