From e906af18a113001409b28ffb3f5abd9bc0179714 Mon Sep 17 00:00:00 2001 From: Eli White Date: Fri, 2 Aug 2019 16:48:58 -0700 Subject: [PATCH] Change AndroidDrawerLayoutNativeComponent to use JS codegen for commands Summary: `codegenNativeCommands` returns an object with functions for each command that has the previous behavior inside the React Renderer, and the new Fabric logic inside of the Fabric React Native Renderer. Changelog: [Internal] - Change AndroidDrawerLayoutNativeComponent to use JS codegen for commands Reviewed By: rickhanlonii Differential Revision: D16529887 fbshipit-source-id: 24a5307944a7f62e18482d60d26052fea3be2051 --- .../AndroidDrawerLayoutNativeComponent.js | 11 ++++++++++ .../DrawerLayoutAndroid.android.js | 22 +++++-------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js b/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js index 67a79afd959424..55ef782ad9b586 100644 --- a/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js +++ b/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js @@ -10,7 +10,9 @@ 'use strict'; +import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands'; import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import * as React from 'react'; import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; import type { WithDefault, @@ -28,6 +30,11 @@ type DrawerSlideEvent = $ReadOnly<{| offset: Float, |}>; +interface NativeCommands { + +openDrawer: (viewRef: React.Ref<'AndroidDrawerLayout'>) => void; + +closeDrawer: (viewRef: React.Ref<'AndroidDrawerLayout'>) => void; +} + type NativeProps = $ReadOnly<{| ...ViewProps, /** @@ -106,4 +113,8 @@ type NativeProps = $ReadOnly<{| statusBarBackgroundColor?: ?ColorValue, |}>; +export const Commands = codegenNativeCommands({ + supportedCommands: ['openDrawer', 'closeDrawer'], +}); + export default codegenNativeComponent('AndroidDrawerLayout'); diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js index 9023c5f4811890..f80846d25a0397 100644 --- a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +++ b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js @@ -22,7 +22,9 @@ const nullthrows = require('nullthrows'); const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout') .Constants; const dismissKeyboard = require('../../Utilities/dismissKeyboard'); -import AndroidDrawerLayoutNativeComponent from './AndroidDrawerLayoutNativeComponent'; +import AndroidDrawerLayoutNativeComponent, { + Commands, +} from './AndroidDrawerLayoutNativeComponent'; const DRAWER_STATES = ['Idle', 'Dragging', 'Settling']; @@ -163,7 +165,7 @@ class DrawerLayoutAndroid extends React.Component { drawerBackgroundColor: 'white', }; - _nativeRef = React.createRef>>(); + _nativeRef = React.createRef(); state = {statusBarBackgroundColor: null}; @@ -264,23 +266,14 @@ class DrawerLayoutAndroid extends React.Component { * Opens the drawer. */ openDrawer() { - UIManager.dispatchViewManagerCommand( - this._getDrawerLayoutHandle(), - UIManager.getViewManagerConfig('AndroidDrawerLayout').Commands.openDrawer, - null, - ); + Commands.openDrawer(nullthrows(this._nativeRef.current)); } /** * Closes the drawer. */ closeDrawer() { - UIManager.dispatchViewManagerCommand( - this._getDrawerLayoutHandle(), - UIManager.getViewManagerConfig('AndroidDrawerLayout').Commands - .closeDrawer, - null, - ); + Commands.closeDrawer(nullthrows(this._nativeRef.current)); } /** @@ -318,9 +311,6 @@ class DrawerLayoutAndroid extends React.Component { * * ) */ - _getDrawerLayoutHandle() { - return ReactNative.findNodeHandle(this._nativeRef.current); - } /** * Native methods