AndroidDrawerLayoutNativeComponent.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow strict-local
  9. */
  10. 'use strict';
  11. import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
  12. import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
  13. import type {
  14. WithDefault,
  15. DirectEventHandler,
  16. Int32,
  17. Float,
  18. } from 'react-native/Libraries/Types/CodegenTypes';
  19. import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
  20. import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
  21. import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
  22. import * as React from 'react';
  23. type DrawerStateEvent = $ReadOnly<{|
  24. drawerState: Int32,
  25. |}>;
  26. type DrawerSlideEvent = $ReadOnly<{|
  27. offset: Float,
  28. |}>;
  29. type NativeProps = $ReadOnly<{|
  30. ...ViewProps,
  31. /**
  32. * Determines whether the keyboard gets dismissed in response to a drag.
  33. * - 'none' (the default), drags do not dismiss the keyboard.
  34. * - 'on-drag', the keyboard is dismissed when a drag begins.
  35. */
  36. keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>,
  37. /**
  38. * Specifies the background color of the drawer. The default value is white.
  39. * If you want to set the opacity of the drawer, use rgba. Example:
  40. *
  41. * ```
  42. * return (
  43. * <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
  44. * </DrawerLayoutAndroid>
  45. * );
  46. * ```
  47. */
  48. drawerBackgroundColor: ColorValue,
  49. /**
  50. * Specifies the side of the screen from which the drawer will slide in.
  51. */
  52. drawerPosition?: WithDefault<'left' | 'right', 'left'>,
  53. /**
  54. * Specifies the width of the drawer, more precisely the width of the view that be pulled in
  55. * from the edge of the window.
  56. */
  57. drawerWidth?: WithDefault<Float, null>,
  58. /**
  59. * Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
  60. * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
  61. * - locked-closed, meaning that the drawer will stay closed and not respond to gestures.
  62. * - locked-open, meaning that the drawer will stay opened and not respond to gestures.
  63. * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
  64. */
  65. drawerLockMode?: WithDefault<
  66. 'unlocked' | 'locked-closed' | 'locked-open',
  67. 'unlocked',
  68. >,
  69. /**
  70. * Function called whenever there is an interaction with the navigation view.
  71. */
  72. onDrawerSlide?: ?DirectEventHandler<DrawerSlideEvent>,
  73. /**
  74. * Function called when the drawer state has changed. The drawer can be in 3 states:
  75. * - Idle, meaning there is no interaction with the navigation view happening at the time
  76. * - Dragging, meaning there is currently an interaction with the navigation view
  77. * - Settling, meaning that there was an interaction with the navigation view, and the
  78. * navigation view is now finishing its closing or opening animation
  79. */
  80. onDrawerStateChanged?: ?DirectEventHandler<DrawerStateEvent>,
  81. /**
  82. * Function called whenever the navigation view has been opened.
  83. */
  84. onDrawerOpen?: ?DirectEventHandler<null, 'topDrawerOpened'>,
  85. /**
  86. * Function called whenever the navigation view has been closed.
  87. */
  88. onDrawerClose?: ?DirectEventHandler<null, 'topDrawerClosed'>,
  89. /**
  90. * Make the drawer take the entire screen and draw the background of the
  91. * status bar to allow it to open over the status bar. It will only have an
  92. * effect on API 21+.
  93. */
  94. statusBarBackgroundColor?: ?ColorValue,
  95. |}>;
  96. type NativeType = HostComponent<NativeProps>;
  97. interface NativeCommands {
  98. +openDrawer: (viewRef: React.ElementRef<NativeType>) => void;
  99. +closeDrawer: (viewRef: React.ElementRef<NativeType>) => void;
  100. }
  101. export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  102. supportedCommands: ['openDrawer', 'closeDrawer'],
  103. });
  104. export default (codegenNativeComponent<NativeProps>(
  105. 'AndroidDrawerLayout',
  106. ): NativeType);