Merge pull request #82 from the-mx-group/android_drawer

Android drawer implementation

android/app/src/main/java/com/reactnativenavigation/activities/BaseReactActivity.java

@@ -1,17 +1,21 @@
 package com.reactnativenavigation.activities;
 
 import android.content.Intent;
+import android.content.res.Configuration;
 import android.os.Build;
 import android.os.Bundle;
 import android.os.Handler;
 import android.provider.Settings;
 import android.support.annotation.CallSuper;
+import android.support.v4.widget.DrawerLayout;
+import android.support.v7.app.ActionBarDrawerToggle;
 import android.support.v7.app.AppCompatActivity;
 import android.util.Log;
 import android.view.KeyEvent;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.widget.EditText;
+import android.widget.FrameLayout;
 import android.widget.Toast;
 
 import com.facebook.common.logging.FLog;
@@ -28,12 +32,14 @@ import com.reactnativenavigation.BuildConfig;
 import com.reactnativenavigation.controllers.ModalController;
 import com.reactnativenavigation.core.RctManager;
 import com.reactnativenavigation.core.objects.Button;
+import com.reactnativenavigation.core.objects.Drawer;
 import com.reactnativenavigation.core.objects.Screen;
 import com.reactnativenavigation.modal.RnnModal;
 import com.reactnativenavigation.packages.RnnPackage;
 import com.reactnativenavigation.utils.ContextProvider;
 import com.reactnativenavigation.utils.StyleHelper;
 import com.reactnativenavigation.views.RnnToolBar;
+import com.reactnativenavigation.views.ScreenStack;
 
 import java.util.Arrays;
 import java.util.List;
@@ -48,8 +54,10 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
     protected static final String KEY_ANIMATED = "animated";
     protected static final String KEY_BADGE = "badge";
     protected static final String KEY_HIDDEN = "hidden";
+    protected static final String KEY_SIDE = "side";
     protected static final String KEY_TAB_INDEX = "tabIndex";
     protected static final String KEY_TITLE = "title";
+    protected static final String KEY_TO = "to";
     private static final String TAG = "BaseReactActivity";
     private static final String REDBOX_PERMISSION_MESSAGE =
             "Overlay permissions needs to be granted in order for react native apps to run in dev mode";
@@ -59,6 +67,9 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
     private boolean mDoRefresh = false;
     private Menu mMenu;
     protected RnnToolBar mToolbar;
+    protected ActionBarDrawerToggle mDrawerToggle;
+    protected DrawerLayout mDrawerLayout;
+    protected ScreenStack mDrawerStack;
 
     /**
      * Returns the name of the bundle in assets. If this is null, and no file path is specified for
@@ -223,7 +234,7 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
 
             if (getCurrentNavigatorId().equals(screen.navigatorId) &&
                 getScreenStackSize() >= 1) {
-                mToolbar.showBackButton(screen);
+                mToolbar.setNavUpButton(screen);
             }
         }
     }
@@ -233,15 +244,16 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
         if (mToolbar != null &&
             getCurrentNavigatorId().equals(navigatorId) &&
             getScreenStackSize() <= 2) {
-            mToolbar.hideBackButton();
+            mToolbar.setNavUpButton();
         }
+
         return null;
     }
 
     @CallSuper
     public Screen popToRoot(String navigatorId) {
         if (mToolbar != null) {
-            mToolbar.hideBackButton();
+            mToolbar.setNavUpButton();
         }
 
         return null;
@@ -251,7 +263,7 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
     public Screen resetTo(Screen screen) {
         StyleHelper.updateStyles(mToolbar, screen);
         if (mToolbar != null) {
-            mToolbar.hideBackButton();
+            mToolbar.setNavUpButton();
         }
 
         return null;
@@ -273,6 +285,14 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
 
     public abstract int getScreenStackSize();
 
+    @Override
+    public void onConfigurationChanged(Configuration newConfig) {
+        super.onConfigurationChanged(newConfig);
+        if (mDrawerToggle != null) {
+            mDrawerToggle.onConfigurationChanged(newConfig);
+        }
+    }
+
     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
         mMenu = menu;
@@ -285,6 +305,12 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
 
     @Override
     public boolean onOptionsItemSelected(MenuItem item) {
+        if (mDrawerToggle != null &&
+            getScreenStackSize() == 1 &&
+            mDrawerToggle.onOptionsItemSelected(item)) {
+            return true;
+        }
+
         if (item.getItemId() == android.R.id.home) {
             onBackPressed();
         } else {
@@ -297,6 +323,14 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
         return super.onOptionsItemSelected(item);
     }
 
+    @Override
+    public void onPostCreate(Bundle savedInstanceState) {
+        super.onPostCreate(savedInstanceState);
+        if (mDrawerToggle != null) {
+            mDrawerToggle.syncState();
+        }
+    }
+
     public Menu getMenu() {
         return mMenu;
     }
@@ -355,6 +389,20 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
         super.onBackPressed();
     }
 
+    protected void setupDrawer(Screen screen, Drawer drawer, int drawerFrameId, int drawerLayoutId) {
+        if (drawer == null || drawer.left == null) {
+            return;
+        }
+
+        mDrawerStack = new ScreenStack(this);
+        FrameLayout drawerFrame = (FrameLayout) findViewById(drawerFrameId);
+        drawerFrame.addView(mDrawerStack);
+        mDrawerStack.push(drawer.left);
+
+        mDrawerLayout = (DrawerLayout) findViewById(drawerLayoutId);
+        mDrawerToggle = mToolbar.setupDrawer(mDrawerLayout, drawer.left, screen);
+    }
+
     public void setNavigationButtons(ReadableMap buttons){
         if (mToolbar == null) {
             return;
@@ -384,4 +432,25 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
             mToolbar.showToolbar(animated);
         }
     }
+
+    public void toggleDrawer(ReadableMap params) {
+        if (mToolbar == null || mDrawerToggle == null) {
+            return;
+        }
+
+        boolean animated = params.getBoolean(KEY_ANIMATED);
+        String side = params.getString(KEY_SIDE);
+        String to = params.getString(KEY_TO);
+        switch (to) {
+            case "open":
+                mToolbar.showDrawer(animated);
+                break;
+            case "closed":
+                mToolbar.hideDrawer(animated);
+                break;
+            default:
+                mToolbar.toggleDrawer(animated);
+                break;
+        }
+    }
 }

android/app/src/main/java/com/reactnativenavigation/activities/BottomTabActivity.java

@@ -12,6 +12,7 @@ import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
 import com.facebook.react.bridge.ReadableMap;
 import com.reactnativenavigation.R;
 import com.reactnativenavigation.core.RctManager;
+import com.reactnativenavigation.core.objects.Drawer;
 import com.reactnativenavigation.core.objects.Screen;
 import com.reactnativenavigation.utils.StyleHelper;
 import com.reactnativenavigation.views.RnnToolBar;
@@ -25,6 +26,7 @@ import java.util.Map;
  * Created by guyc on 02/04/16.
  */
 public class BottomTabActivity extends BaseReactActivity implements AHBottomNavigation.OnTabSelectedListener {
+    public static final String DRAWER_PARAMS = "drawerParams";
     public static final String EXTRA_SCREENS = "extraScreens";
 
     private static final String TAB_STYLE_BUTTON_COLOR = "tabBarButtonColor";
@@ -52,7 +54,9 @@ public class BottomTabActivity extends BaseReactActivity implements AHBottomNavi
         mContentFrame = (FrameLayout) findViewById(R.id.contentFrame);
 
         final ArrayList<Screen> screens = (ArrayList<Screen>) getIntent().getSerializableExtra(EXTRA_SCREENS);
+        final Drawer drawer = (Drawer) getIntent().getSerializableExtra(DRAWER_PARAMS);
         mBottomNavigation.setForceTint(true);
+        setupDrawer(screens.get(0), drawer, R.id.drawerFrame, R.id.drawerLayout);
         setupTabs(getIntent().getExtras());
         setupPages(screens);
 
@@ -190,9 +194,9 @@ public class BottomTabActivity extends BaseReactActivity implements AHBottomNavi
 
         // Hide or show back button if needed
         if (getScreenStackSize() > 1) {
-            mToolbar.showBackButton(getCurrentScreen());
+            mToolbar.setNavUpButton(getCurrentScreen());
         } else {
-            mToolbar.hideBackButton();
+            mToolbar.setNavUpButton();
         }
     }
 

android/app/src/main/java/com/reactnativenavigation/activities/SingleScreenActivity.java

@@ -4,6 +4,7 @@ import android.widget.FrameLayout;
 
 import com.reactnativenavigation.R;
 import com.reactnativenavigation.core.RctManager;
+import com.reactnativenavigation.core.objects.Drawer;
 import com.reactnativenavigation.core.objects.Screen;
 import com.reactnativenavigation.utils.StyleHelper;
 import com.reactnativenavigation.views.RnnToolBar;
@@ -14,6 +15,7 @@ import com.reactnativenavigation.views.ScreenStack;
  */
 public class SingleScreenActivity extends BaseReactActivity {
 
+    public static final String DRAWER_PARAMS = "drawerParams";
     public static final String EXTRA_SCREEN = "extraScreen";
 
     private ScreenStack mScreenStack;
@@ -27,7 +29,11 @@ public class SingleScreenActivity extends BaseReactActivity {
         mToolbar = (RnnToolBar) findViewById(R.id.toolbar);
 
         final Screen screen = (Screen) getIntent().getSerializableExtra(EXTRA_SCREEN);
+        final Drawer drawer = (Drawer) getIntent().getSerializableExtra(DRAWER_PARAMS);
+
         mNavigatorId = screen.navigatorId;
+        setupToolbar(screen);
+        setupDrawer(screen, drawer, R.id.drawerFrame, R.id.drawerLayout);
 
         mScreenStack = new ScreenStack(this);
         FrameLayout contentFrame = (FrameLayout) findViewById(R.id.contentFrame);
@@ -48,7 +54,7 @@ public class SingleScreenActivity extends BaseReactActivity {
         mToolbar.update(screen);
         StyleHelper.updateStyles(mToolbar, screen);
     }
-    
+
     @Override
     public void push(Screen screen) {
         super.push(screen);

android/app/src/main/java/com/reactnativenavigation/core/objects/Drawer.java

@@ -0,0 +1,23 @@
+package com.reactnativenavigation.core.objects;
+
+import com.facebook.react.bridge.ReadableMap;
+
+import java.io.Serializable;
+
+public class Drawer extends JsonObject implements Serializable {
+    private static final long serialVersionUID = 982836768712398756L;
+
+    private static final String KEY_LEFT = "left";
+    private static final String KEY_RIGHT = "right";
+    private static final String KEY_DISABLE_OPEN_GESTURE = "disableOpenGesture";
+
+    public final Screen left;
+    public final Screen right;
+    public final boolean disableOpenGesture;
+
+    public Drawer(ReadableMap params) {
+        left = params.hasKey(KEY_LEFT) ? new Screen(params.getMap(KEY_LEFT)) : null;
+        right = params.hasKey(KEY_RIGHT) ? new Screen(params.getMap(KEY_RIGHT)) : null;
+        disableOpenGesture = getBoolean(params, KEY_DISABLE_OPEN_GESTURE);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/core/objects/Screen.java

@@ -34,7 +34,7 @@ public class Screen extends JsonObject implements Serializable {
     private static final String KEY_RIGHT_BUTTONS = "rightButtons";
     private static final String KEY_TOOL_BAR_STYLE = "navigatorStyle";
     private static final String KEY_STATUS_BAR_COLOR = "statusBarColor";
-    private static final String KEY_TOOL_BAR_COLOR = "toolBarColor";
+    private static final String KEY_TOOL_BAR_COLOR = "navBarBackgroundColor";
     private static final String KEY_TOOL_BAR_HIDDEN = "navBarHidden";
     private static final String KEY_NAVIGATION_BAR_COLOR = "navigationBarColor";
     private static final String KEY_NAV_BAR_BUTTON_COLOR = "navBarButtonColor";
@@ -44,7 +44,7 @@ public class Screen extends JsonObject implements Serializable {
     private static final String KEY_TAB_INDICATOR_COLOR = "tabIndicatorColor";
     private static final String KEY_PROPS = "passProps";
 
-    public final String title;
+    public String title;
     public final String label;
     public final String screenId;
     public final String screenInstanceId;
@@ -85,6 +85,10 @@ public class Screen extends JsonObject implements Serializable {
         setToolbarStyle(screen);
     }
 
+    public void setTitle(ReadableMap params) {
+        this.title = getString(params, KEY_TITLE);
+    }
+
     public void setButtons(ReadableMap params) {
         this.buttons = getButtons(params);
     }

android/app/src/main/java/com/reactnativenavigation/modules/RctActivityModule.java

@@ -15,6 +15,7 @@ import com.reactnativenavigation.activities.BottomTabActivity;
 import com.reactnativenavigation.activities.RootActivity;
 import com.reactnativenavigation.activities.SingleScreenActivity;
 import com.reactnativenavigation.controllers.ModalController;
+import com.reactnativenavigation.core.objects.Drawer;
 import com.reactnativenavigation.core.objects.Screen;
 import com.reactnativenavigation.modal.RnnModal;
 import com.reactnativenavigation.utils.BridgeUtils;
@@ -39,7 +40,7 @@ public class RctActivityModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void startTabBasedApp(ReadableArray screens, ReadableMap style) {
+    public void startTabBasedApp(ReadableArray screens, ReadableMap style, ReadableMap drawerParams) {
         Activity context = ContextProvider.getActivityContext();
         if (context != null && !context.isFinishing()) {
             Intent intent = new Intent(context, BottomTabActivity.class);
@@ -47,6 +48,9 @@ public class RctActivityModule extends ReactContextBaseJavaModule {
 
             Bundle extras = new Bundle();
             extras.putSerializable(BottomTabActivity.EXTRA_SCREENS, createScreens(screens));
+            if (drawerParams != null) {
+                extras.putSerializable(BottomTabActivity.DRAWER_PARAMS, new Drawer(drawerParams));
+            }
             if (style != null) {
                 BridgeUtils.addMapToBundle(((ReadableNativeMap) style).toHashMap(), extras);
             }
@@ -72,7 +76,7 @@ public class RctActivityModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void startSingleScreenApp(ReadableMap screen) {
+    public void startSingleScreenApp(ReadableMap screen, ReadableMap drawerParams) {
         BaseReactActivity context = ContextProvider.getActivityContext();
         if (context != null && !context.isFinishing()) {
             Intent intent = new Intent(context, SingleScreenActivity.class);
@@ -80,6 +84,9 @@ public class RctActivityModule extends ReactContextBaseJavaModule {
 
             Bundle extras = new Bundle();
             extras.putSerializable(SingleScreenActivity.EXTRA_SCREEN, new Screen(screen));
+            if (drawerParams != null) {
+                extras.putSerializable(SingleScreenActivity.DRAWER_PARAMS, new Drawer(drawerParams));
+            }
             intent.putExtras(extras);
 
             context.startActivity(intent);
@@ -148,6 +155,20 @@ public class RctActivityModule extends ReactContextBaseJavaModule {
         });
     }
 
+    @ReactMethod
+    public void toggleDrawer(final ReadableMap params) {
+        final BaseReactActivity context = ContextProvider.getActivityContext();
+        if (context == null || context.isFinishing()) {
+            return;
+        }
+        context.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                context.toggleDrawer(params);
+            }
+        });
+    }
+
     @ReactMethod
     public void toggleNavigationBar(final ReadableMap params) {
         final BaseReactActivity context = ContextProvider.getActivityContext();

android/app/src/main/java/com/reactnativenavigation/views/RnnToolBar.java

@@ -12,10 +12,14 @@ import android.support.annotation.NonNull;
 import android.support.annotation.UiThread;
 import android.support.v4.content.ContextCompat;
 import android.support.v4.content.res.ResourcesCompat;
+import android.support.v4.widget.DrawerLayout;
 import android.support.v7.app.ActionBar;
+import android.support.v7.app.ActionBarDrawerToggle;
 import android.support.v7.app.AppCompatActivity;
+import android.support.v7.graphics.drawable.DrawerArrowDrawable;
 import android.support.v7.widget.Toolbar;
 import android.util.AttributeSet;
+import android.view.Gravity;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
@@ -27,6 +31,7 @@ import com.reactnativenavigation.activities.BaseReactActivity;
 import com.reactnativenavigation.core.objects.Button;
 import com.reactnativenavigation.core.objects.Screen;
 import com.reactnativenavigation.utils.ContextProvider;
+import com.reactnativenavigation.utils.IconUtils;
 import com.reactnativenavigation.utils.ImageUtils;
 
 import java.lang.ref.WeakReference;
@@ -43,8 +48,13 @@ public class RnnToolBar extends Toolbar {
     private static final int ANIMATE_DURATION = 180;
 
     private List<Screen> mScreens;
+    private AsyncTask mDrawerIconTask;
     private AsyncTask mSetupToolbarTask;
     private Drawable mBackground;
+    private Drawable mDrawerIcon;
+    private Screen mDrawerScreen;
+    private DrawerLayout mDrawerLayout;
+    private ActionBarDrawerToggle mDrawerToggle;
     private ArrayList<View> mMenuItems;
 
     public RnnToolBar(Context context) {
@@ -105,6 +115,65 @@ public class RnnToolBar extends Toolbar {
         }
     }
 
+    public ActionBarDrawerToggle setupDrawer(DrawerLayout drawerLayout, Screen drawerScreen, Screen screen) {
+        if (drawerLayout == null || drawerScreen == null) {
+            return null;
+        }
+
+        mDrawerLayout = drawerLayout;
+        mDrawerScreen = drawerScreen;
+        mDrawerToggle = new ActionBarDrawerToggle(
+            ContextProvider.getActivityContext(),
+            mDrawerLayout,
+            this,
+            R.string.drawer_open,
+            R.string.drawer_close
+        );
+        mDrawerLayout.setDrawerListener(mDrawerToggle);
+        setupDrawerIconAsync(drawerScreen.icon, screen);
+
+        return mDrawerToggle;
+    }
+
+    public void setDrawerIcon(Drawable icon) {
+        mDrawerIcon = icon;
+    }
+
+    public void showDrawer(boolean animated) {
+        if (mDrawerLayout == null) {
+            return;
+        }
+
+        mDrawerLayout.openDrawer(Gravity.LEFT);
+    }
+
+    public void hideDrawer(boolean animated) {
+        if (mDrawerLayout == null) {
+            return;
+        }
+
+        mDrawerLayout.closeDrawer(Gravity.LEFT);
+    }
+
+    public void toggleDrawer(boolean animated) {
+        if (mDrawerLayout == null) {
+            return;
+        }
+
+        boolean visible = mDrawerLayout.isDrawerOpen(Gravity.LEFT);
+        if (visible) {
+            hideDrawer(animated);
+        } else {
+            showDrawer(animated);
+        }
+    }
+
+    public void setupDrawerIconAsync(String drawerIconSource, Screen screen) {
+        if (mDrawerIconTask == null) {
+            mDrawerIconTask = new SetupDrawerIconTask(this, drawerIconSource, screen).execute();
+        }
+    }
+
     public void setupToolbarButtonsAsync(Screen newScreen) {
         if (newScreen != null) {
             this.setupToolbarButtonsAsync(null, newScreen);
@@ -144,29 +213,44 @@ public class RnnToolBar extends Toolbar {
         hideToolbar(false);
     }
 
-    @SuppressWarnings({"ConstantConditions"})
-    public void showBackButton(Screen screen) {
-        ActionBar actionBar = ContextProvider.getActivityContext().getSupportActionBar();
-        Drawable backButton = setupBackButton(screen);
-        actionBar.setHomeAsUpIndicator(backButton);
-        actionBar.setDisplayHomeAsUpEnabled(true);
+    public void setNavUpButton() {
+        setNavUpButton(null);
     }
 
-    @SuppressLint("PrivateResource")
     @SuppressWarnings({"ConstantConditions"})
-    private Drawable setupBackButton(Screen screen) {
-        Resources resources = getResources();
-        final Drawable backButton = ResourcesCompat.getDrawable(resources,
-                R.drawable.abc_ic_ab_back_mtrl_am_alpha,
-                ContextProvider.getActivityContext().getTheme());
-        int tintColor = screen.navBarButtonColor != null ? screen.navBarButtonColor : Color.BLACK;
-        ImageUtils.tint(backButton, tintColor);
-        return backButton;
-    }
+    public void setNavUpButton(Screen screen) {
+        ActionBar actionBar = ContextProvider.getActivityContext().getSupportActionBar();
+        if (actionBar == null) {
+            return;
+        }
 
-    @SuppressWarnings({"ConstantConditions"})
-    public void hideBackButton() {
-        ContextProvider.getActivityContext().getSupportActionBar().setDisplayHomeAsUpEnabled(false);
+        boolean isBack = screen != null;
+        boolean hasDrawer = mDrawerToggle != null;
+
+        Drawable navIcon = null;
+        DrawerArrowDrawable navArrow = null;
+        if (hasDrawer && mDrawerIcon == null) {
+            navArrow = (DrawerArrowDrawable) this.getNavigationIcon();
+        } else {
+            if (isBack) {
+                navArrow = new DrawerArrowDrawable(ContextProvider.getActivityContext());
+            } else if (hasDrawer) {
+                navIcon = mDrawerIcon;
+            }
+        }
+
+        if (navArrow != null) {
+            navArrow.setProgress(isBack ? 1.0f : 0.0f);
+            if (screen != null && screen.navBarButtonColor != null) {
+                navArrow.setColor(screen.navBarButtonColor);
+            } else {
+                navArrow.setColor(Color.BLACK);
+            }
+            navIcon = navArrow;
+        }
+
+        actionBar.setHomeAsUpIndicator(navIcon);
+        actionBar.setDisplayHomeAsUpEnabled(navIcon != null);
     }
 
     /**
@@ -186,6 +270,42 @@ public class RnnToolBar extends Toolbar {
         setupToolbarButtonsAsync(screen);
     }
 
+    private static class SetupDrawerIconTask extends AsyncTask<Void, Void, Drawable> {
+        private final WeakReference<RnnToolBar> mToolbarWR;
+        private final String mDrawerIconSource;
+        private final Integer mTintColor;
+
+        public SetupDrawerIconTask(RnnToolBar toolBar, String drawerIconSource, Screen screen) {
+            mToolbarWR = new WeakReference<>(toolBar);
+            mDrawerIconSource = drawerIconSource;
+            mTintColor = screen.navBarButtonColor;
+        }
+
+        @Override
+        protected Drawable doInBackground(Void... params) {
+            Context context = ContextProvider.getActivityContext();
+            if (context == null || mDrawerIconSource == null) {
+                return null;
+            }
+
+            return IconUtils.getIcon(context, mDrawerIconSource);
+        }
+
+        @Override
+        protected void onPostExecute(Drawable drawerIcon) {
+            RnnToolBar toolBar = mToolbarWR.get();
+            if (drawerIcon != null) {
+                if (mTintColor != null) {
+                    ImageUtils.tint(drawerIcon, mTintColor);
+                }
+                toolBar.setDrawerIcon(drawerIcon);
+            }
+
+            toolBar.setNavUpButton();
+            mToolbarWR.clear();
+        }
+    }
+
     private static class SetupToolbarButtonsTask extends AsyncTask<Void, Void, Map<String, Drawable>> {
         private final List<Button> mOldButtons;
         private final List<Button> mNewButtons;

android/app/src/main/res/layout/bottom_tab_activity.xml

@@ -20,11 +20,22 @@
             app:layout_scrollFlags="scroll|enterAlways"/>
     </android.support.design.widget.AppBarLayout>
 
-    <FrameLayout
-        android:id="@+id/contentFrame"
+    <android.support.v4.widget.DrawerLayout
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:id="@+id/drawerLayout"
         android:layout_width="match_parent"
         android:layout_height="0dp"
-        android:layout_weight="1"/>
+        android:layout_weight="1">
+        <FrameLayout
+            android:id="@+id/contentFrame"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:layout_weight="1"/>
+        <FrameLayout android:id="@+id/drawerFrame"
+            android:layout_width="240dp"
+            android:layout_height="match_parent"
+            android:layout_gravity="start"/>
+    </android.support.v4.widget.DrawerLayout>
 
     <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
         android:id="@+id/bottom_tab_bar"

android/app/src/main/res/layout/single_screen_activity.xml

@@ -17,8 +17,18 @@
             app:layout_scrollFlags="scroll|enterAlways"/>
     </android.support.design.widget.AppBarLayout>
 
-    <FrameLayout
-        android:id="@+id/contentFrame"
+    <android.support.v4.widget.DrawerLayout
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:id="@+id/drawerLayout"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"/>
+        android:layout_height="match_parent">
+        <FrameLayout
+            android:id="@+id/contentFrame"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"/>
+        <FrameLayout android:id="@+id/drawerFrame"
+            android:layout_width="240dp"
+            android:layout_height="match_parent"
+            android:layout_gravity="start"/>
+    </android.support.v4.widget.DrawerLayout>
 </LinearLayout>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="drawer_close">Drawer Close</string>
+    <string name="drawer_open">Drawer Open</string>
+</resources>

src/platformSpecific.android.js

@@ -19,7 +19,8 @@ function startSingleScreenApp(params) {
   addNavigatorButtons(screen);
   addNavigationStyleParams(screen);
   screen.passProps = params.passProps;
-  RctActivity.startSingleScreenApp(screen);
+  const drawer = setupDrawer(params.drawer);
+  RctActivity.startSingleScreenApp(screen, drawer);
 }
 
 function startTabBasedApp(params) {
@@ -41,7 +42,8 @@ function startTabBasedApp(params) {
     tab.passProps = params.passProps;
   });
 
-  RctActivity.startTabBasedApp(params.tabs, params.tabsStyle);
+  const drawer = setupDrawer(params.drawer);
+  RctActivity.startTabBasedApp(params.tabs, params.tabsStyle, drawer);
 }
 
 function navigatorPush(navigator, params) {
@@ -101,6 +103,14 @@ function navigatorSwitchToTab(navigator, params) {
   });
 }
 
+function navigatorToggleDrawer(navigator, params) {
+  RctActivity.toggleDrawer({
+    side: params.side,
+    animated: !(params.animated === false),
+    to: params.to || ''
+  });
+}
+
 function navigatorToggleNavBar(navigator, params) {
   RctActivity.toggleNavigationBar({
     hidden: params.to === 'hidden',
@@ -160,6 +170,24 @@ function addNavigationStyleParams(screen) {
   screen.navigatorStyle = Object.assign({}, screen.navigatorStyle, Screen.navigatorStyle);
 }
 
+function setupDrawer(drawerParams) {
+  const drawer = Object.assign({}, drawerParams);
+  [drawer.left, drawer.right].forEach(side => {
+    if (!side) {
+      return;
+    }
+    const icon = resolveAssetSource(side.icon);
+    if (icon) {
+      side.icon = icon.uri;
+    }
+  });
+  if (drawer.disableOpenGesture === undefined) {
+    drawer.disableOpenGesture = false;
+  };
+
+  return drawer;
+}
+
 export default {
   startTabBasedApp,
   startSingleScreenApp,
@@ -174,6 +202,7 @@ export default {
   navigatorSetTabBadge,
   navigatorSetTitle,
   navigatorSwitchToTab,
+  navigatorToggleDrawer,
   navigatorToggleTabs,
   navigatorToggleNavBar
 }