Autolink Drawer Android Native Module to FURN Drawer (#1216)

* Add and expose hello world ver of Drawer native module

* autolink modules

* update gradle fles and make drawer testpage

* Add simple drawer module without methods

* delete empty file

* Change files

* update lock file

* update dependencies

* delete yarn lock file

* bump react packages ver

* include update yarn.lock file

* update yarn lock file

* update lock file

* add drawer types file

* remove double quotes

* avoid depcheck error

* move gitignore dir

* remove target ref bit from Drawer

* edit gitignore directory

* update react package versions

* updatre yarn lock file

.gitignore

@@ -100,3 +100,6 @@ typings/
 # VS Code debugging
 .vscode/.react/
 apps/*/.vscode/.react/
+
+# Ignore Gradle build output directory
+**/android/**/build

apps/android/package.json

@@ -21,6 +21,7 @@
     "prettier-fix": "fluentui-scripts prettier --fix true"
   },
   "dependencies": {
+    "@fluentui-react-native/experimental-drawer": "*",
     "@fluentui-react-native/tester": "^0.48.1",
     "@react-native-community/slider": "^4.1.12",
     "@react-native-picker/picker": "^1.16.7",
@@ -72,7 +73,8 @@
       "@react-native-community/slider",
       "@react-native-picker/picker",
       "hermes-engine",
-      "react-native-test-app"
+      "react-native-test-app",
+      "@fluentui-react-native/experimental-drawer"
     ]
   }
 }

apps/android/src/build.gradle

@@ -24,6 +24,9 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../../../node_modules/jsc-android/dist")
         }
+        maven {
+            url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
+        }
         google()
         jcenter()
     }

apps/fluent-tester/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import { Stack } from '@fluentui-react-native/stack';
+import { DRAWER_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { NativeModules } from 'react-native';
+
+const basicDrawer: React.FunctionComponent = () => {
+  console.log(NativeModules.DrawerModule);
+  return (
+    <Stack style={stackStyle} gap={5}>
+      <Text>test to come</Text>
+    </Stack>
+  );
+};
+
+const drawerSections: TestSection[] = [
+  {
+    name: 'Basic Drawer',
+    testID: DRAWER_TESTPAGE,
+    component: basicDrawer,
+  },
+];
+
+export const DrawerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'N/A',
+    uwpStatus: 'N/A',
+    iosStatus: 'Backlog',
+    macosStatus: 'N/A',
+    androidStatus: 'Experimental',
+  };
+
+  const description =
+    'A Drawer component using the Fluent Design System.  Currently only implemented on Android.';
+
+  return <Test name="Drawer Test" description={description} sections={drawerSections} status={status} />;
+};

apps/fluent-tester/src/FluentTester/TestComponents/Drawer/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_DRAWER_BUTTON = 'Homepage_Drawer_Button';
+export const DRAWER_TESTPAGE = 'Drawer_TestPage';

apps/fluent-tester/src/FluentTester/TestComponents/Drawer/index.ts

@@ -0,0 +1,2 @@
+export * from './DrawerTest';
+export * from './consts';

apps/fluent-tester/src/FluentTester/testPages.android.ts

@@ -4,6 +4,7 @@ import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
 import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
+import { DrawerTest, HOMEPAGE_DRAWER_BUTTON } from './TestComponents/Drawer';
 import { FocusTrapTest, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from './TestComponents/FocusTrapZone';
 import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
 import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
@@ -53,6 +54,11 @@ export const tests: TestDescription[] = [
     component: ContextualMenuTest,
     testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
   },
+  {
+    name: 'Drawer Test',
+    component: DrawerTest,
+    testPage: HOMEPAGE_DRAWER_BUTTON,
+  },
   {
     name: 'Focus Trap Zone Test',
     component: FocusTrapTest,

change/@fluentui-react-native-experimental-drawer-2fcfaec1-17d6-4dc7-9b71-ba4819bda9e9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add simple drawer module without methods",
+  "packageName": "@fluentui-react-native/experimental-drawer",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-38fdacee-ce2d-4428-81e8-9404c9261676.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add simple drawer module without methods",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

packages/experimental/Drawer/android/.gitattributes

@@ -0,0 +1,6 @@
+#
+# https://help.github.com/articles/dealing-with-line-endings/
+#
+# These are explicitly windows files and should use crlf
+*.bat           text eol=crlf
+

packages/experimental/Drawer/android/.gitignore

@@ -0,0 +1,2 @@
+# Ignore Gradle project-specific cache directory
+.gradle

packages/experimental/Drawer/android/build.gradle

@@ -0,0 +1,74 @@
+buildscript {
+    ext.getExtOrDefault = {name ->
+        return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['FURNDrawer_' + name]
+    }
+
+    if (project == rootProject) {
+        repositories {
+            mavenCentral()
+            google()
+        }
+
+        dependencies {
+            classpath("com.android.tools.build:gradle:3.6.0")
+            classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}")
+        }
+    } else {
+        repositories {
+            mavenCentral()
+        }
+
+        dependencies {
+            classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}")
+        }
+    }
+}
+
+def getExtOrIntegerDefault(name) {
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['FURNDrawer_' + name]).toInteger()
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+android {
+    compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
+    buildToolsVersion "29.0.0"
+    defaultConfig {
+        minSdkVersion getExtOrIntegerDefault('minSdkVersion')
+        targetSdkVersion getExtOrIntegerDefault('targetSdkVersion')
+        versionCode 1
+        versionName "1.0"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+        }
+    }
+    lintOptions {
+        disable 'GradleCompatible'
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+}
+
+repositories {
+    maven {
+        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+        url "$rootDir/../../node_modules/react-native/android"
+    }
+    google()
+    mavenLocal()
+    mavenCentral()
+}
+
+def kotlin_version = getExtOrDefault('kotlinVersion')
+def fluentui_version = getExtOrDefault('fluentuiVersion')
+
+dependencies {
+    implementation 'com.facebook.react:react-native:+'
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+    implementation "com.microsoft.fluentui:FluentUIAndroid:$fluentui_version"
+}

packages/experimental/Drawer/android/gradle.properties

@@ -0,0 +1,6 @@
+FURNDrawer_kotlinVersion=1.5.31
+FURNDrawer_fluentuiVersion=0.0.21
+FURNDrawer_compileSdkVersion=29
+FURNDrawer_buildToolsVersion=29.0.3
+FURNDrawer_targetSdkVersion=29
+FURNDrawer_minSdkVersion=21

packages/experimental/Drawer/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

packages/experimental/Drawer/android/gradlew

@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"

packages/experimental/Drawer/android/gradlew.bat

@@ -0,0 +1,104 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

packages/experimental/Drawer/android/src/main/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<manifest
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	package="com.microsoft.frnandroid.drawer">
+</manifest>

packages/experimental/Drawer/android/src/main/java/com/microsoft/frnandroid/drawer/DrawerModule.kt

@@ -0,0 +1,20 @@
+package com.microsoft.frnandroid.drawer
+
+import android.view.View
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+
+/*This class will communicate with react-native*/
+class DrawerModule(context: ReactApplicationContext) : ReactContextBaseJavaModule(context) {
+
+    override fun getName(): String {
+        return "DrawerModule"
+    }
+
+    override fun getConstants(): Map<String, Any>? {
+        val constants = HashMap<String, Any>()
+        constants.put("message", "Hello from native code")
+        return constants
+    }
+}

packages/experimental/Drawer/android/src/main/java/com/microsoft/frnandroid/drawer/DrawerPackage.kt

@@ -0,0 +1,23 @@
+package com.microsoft.frnandroid.drawer
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+import java.util.*
+import kotlin.collections.ArrayList
+
+class DrawerPackage: ReactPackage {
+
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        val modules = ArrayList<NativeModule>()
+        modules.add(DrawerModule(reactContext))
+
+        return modules
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return Collections.emptyList<ViewManager<*, *>>()
+    }
+}

packages/experimental/Drawer/just.config.js

@@ -0,0 +1,3 @@
+const { preset } = require('@uifabricshared/build-native');
+
+preset();

packages/experimental/Drawer/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@fluentui-react-native/experimental-drawer",
+  "version": "0.0.1",
+  "description": "A Native Drawer component using the Fluent Design System. Currently only implemented on Android",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "typings": "lib/index.d.ts",
+  "onPublish": {
+    "main": "lib-commonjs/index.js",
+    "module": "lib/index.js"
+  },
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
+    "just": "fluentui-scripts",
+    "lint": "fluentui-scripts eslint",
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u",
+    "prettier": "fluentui-scripts prettier",
+    "prettier-fix": "fluentui-scripts prettier --fix true"
+  },
+  "dependencies": {
+    "@fluentui-react-native/component-cache": "^1.3.0",
+    "@fluentui-react-native/framework": "0.7.0",
+    "tslib": "^1.13.0"
+  },
+  "devDependencies": {
+    "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@types/react-native": "^0.64.0",
+    "@uifabricshared/build-native": "^0.1.1",
+    "immediate": "~3.0.5",
+    "lie" : "~3.3.0",
+    "pako" : "~1.0.2",
+    "react": "16.13.1",
+    "react-native": "^0.64.3",
+    "readable-stream": "~2.3.6",
+    "set-immediate-shim": "~1.0.1"
+  },
+  "peerDependencies": {
+    "react": "17.0.1",
+    "react-native": "^0.64.3"
+  },
+  "author": "",
+  "license": "MIT"
+}

packages/experimental/Drawer/src/Drawer.tsx

@@ -0,0 +1,38 @@
+/** @jsx withSlots */
+import * as React from 'react';
+import { drawerName, DrawerTokens, DrawerProps, NativeDrawerProps, DrawerType} from './Drawer.types';
+import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { findNodeHandle} from 'react-native';
+import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
+
+const FRNDrawer = ensureNativeComponent('FRNDrawer');
+
+export const Drawer = compose<DrawerType>({
+  displayName: drawerName,
+  tokens: [drawerName],
+  slots: { root: FRNDrawer },
+  slotProps: {
+    root: buildProps<NativeDrawerProps, DrawerTokens>(() => ({
+      style: {
+      },
+    })),
+  },
+  render: (props: DrawerProps, useSlots: UseSlots<DrawerType>) => {
+    const { target, ...rest } = props;
+    const [nativeTarget, setNativeTarget] = React.useState<number | null>(null);
+
+    React.useLayoutEffect(() => {
+      if (target?.current) {
+        // Pass the tagID for a valid ref `target`
+        setNativeTarget(findNodeHandle(target.current));
+      }
+    }, [target]);
+
+    const rootProps = { ...rest };
+    const Root = useSlots(props).root;
+    return (rest: DrawerProps) => {
+      return <Root {...mergeProps(rootProps, rest)} {...(nativeTarget && { target: nativeTarget })} />;
+    };
+  },
+});
+export default Drawer;

packages/experimental/Drawer/src/Drawer.types.ts

@@ -0,0 +1,38 @@
+import { ViewProps } from 'react-native';
+
+export const drawerName = 'Drawer';
+
+export interface DrawerProps extends ViewProps {
+  onShow?: () => void;
+  onDismiss?: () => void;
+  target?: React.RefObject<React.Component>;
+}
+
+export interface NativeDrawerProps extends Omit<DrawerProps, 'target'> {
+  target?: number | null;
+}
+
+export type DrawerSlotProps = {
+  root: NativeDrawerProps;
+};
+
+
+export interface DrawerTokens {
+
+}
+
+export interface DrawerState {
+
+}
+
+export interface DrawerInfo {
+  props: DrawerProps;
+  state: DrawerState;
+}
+
+export interface DrawerType {
+  props: DrawerProps;
+  slotProps: DrawerSlotProps;
+  tokens: DrawerTokens;
+  state: DrawerState;
+}

packages/experimental/Drawer/src/index.ts

@@ -0,0 +1 @@
+export * from './Drawer';

packages/experimental/Drawer/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@uifabricshared/build-native/tsconfig.json",
+  "compilerOptions": {
+    "importHelpers": true,
+    "outDir": "lib",
+    "types": ["node", "jest"]
+  },
+  "include": ["src"]
+}

yarn.lock

@@ -14824,7 +14824,7 @@ react-test-renderer@^17.0.0:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
-react@17.0.1:
+react@16.13.1, react@17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
   integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==