uilib-native 3.0.0 → 3.0.5

package/components/Keyboard/KeyboardInput/{KeyboardAccessoryView.js → KeyboardAccessoryView.tsx}

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {
   StyleSheet,
   Platform,
@@ -7,7 +6,8 @@ import {
   NativeEventEmitter,
   DeviceEventEmitter,
   processColor,
-  BackHandler
+  BackHandler,
+  LayoutChangeEvent
 } from 'react-native';
 import KeyboardTrackingView from '../KeyboardTracking/KeyboardTrackingView';
 import CustomKeyboardView from './CustomKeyboardView';
@@ -18,107 +18,111 @@ const IsAndroid = Platform.OS === 'android';
 
 const IOS_SCROLL_BEHAVIORS = IsIOS
   ? {
-    NONE: NativeModules.KeyboardTrackingViewTempManager.KeyboardTrackingScrollBehaviorNone,
+    NONE: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorNone,
     SCROLL_TO_BOTTOM_INVERTED_ONLY:
-        NativeModules.KeyboardTrackingViewTempManager.KeyboardTrackingScrollBehaviorScrollToBottomInvertedOnly,
-    FIXED_OFFSET: NativeModules.KeyboardTrackingViewTempManager.KeyboardTrackingScrollBehaviorFixedOffset
+        NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorScrollToBottomInvertedOnly,
+    FIXED_OFFSET: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset
   }
   : {};
 
+export type KeyboardAccessoryViewProps = {
+  /**
+   * Content to be rendered above the keyboard
+   */
+  renderContent?: () => React.ReactElement;
+  /**
+   * A callback for when the height is changed
+   */
+  onHeightChanged?: (height: number) => void;
+  /**
+   * iOS only.
+   * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).
+   * This is required.
+   */
+  kbInputRef?: any;
+  /**
+   * The keyboard ID (the componentID sent to KeyboardRegistry)
+   */
+  kbComponent?: string;
+  /**
+   * The props that will be sent to the KeyboardComponent
+   */
+  kbInitialProps?: any;
+  /**
+   * Callback that will be called when an item on the keyboard has been pressed.
+   */
+  onItemSelected?: () => void;
+  /**
+   * Callback that will be called if KeyboardRegistry.requestShowKeyboard is called.
+   */
+  onRequestShowKeyboard?: () => void;
+  /**
+   * Callback that will be called once the keyboard has been closed
+   */
+  onKeyboardResigned?: () => void;
+  /**
+   * iOS only.
+   * The scrolling behavior, use KeyboardAccessoryView.iosScrollBehaviors.X where X is:
+   * NONE, SCROLL_TO_BOTTOM_INVERTED_ONLY or FIXED_OFFSET
+   *
+   * default: FIXED_OFFSET
+   */
+  iOSScrollBehavior?: number;
+  /**
+   * iOS only.
+   * Show the keyboard on a negative scroll
+   *
+   * default: false
+   */
+  revealKeyboardInteractive?: boolean;
+  /**
+   * iOS only.
+   * Set to false to turn off inset management and manage it yourself
+   *
+   * default: true
+   */
+  manageScrollView?: boolean;
+  /**
+   * iOS only.
+   * Set to true manageScrollView is set to true and still does not work,
+   * it means that the ScrollView found is the wrong one and you'll have
+   * to have the KeyboardAccessoryView and the ScrollView as siblings
+   * and set this to true
+   *
+   * default: false
+   */
+  requiresSameParentToManageScrollView?: boolean;
+  /**
+   * iOS only.
+   * Add a (white) SafeArea view beneath the KeyboardAccessoryView
+   *
+   * default: false
+   */
+  addBottomView?: boolean;
+  /**
+   * iOS only.
+   * Allow hitting sub-views that are placed beyond the view bounds
+   *
+   * default: false
+   */
+  allowHitsOutsideBounds?: boolean;
+
+  /**
+   * iOS only.
+   * Whether or not to handle SafeArea
+   * default: true
+   */
+  useSafeArea?: boolean;
+
+  children?: React.ReactChild;
+};
+
 /**
  * @description: View that allows replacing the default keyboard with other components
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true
  */
-class KeyboardAccessoryView extends Component {
-  static propTypes = {
-    /**
-     * Content to be rendered above the keyboard
-     */
-    renderContent: PropTypes.func,
-    /**
-     * A callback for when the height is changed
-     */
-    onHeightChanged: PropTypes.func,
-    /**
-     * iOS only.
-     * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).
-     * This is required.
-     */
-    kbInputRef: PropTypes.object,
-    /**
-     * The keyboard ID (the componentID sent to KeyboardRegistry)
-     */
-    kbComponent: PropTypes.string,
-    /**
-     * The props that will be sent to the KeyboardComponent
-     */
-    kbInitialProps: PropTypes.object,
-    /**
-     * Callback that will be called when an item on the keyboard has been pressed.
-     */
-    onItemSelected: PropTypes.func,
-    /**
-     * Callback that will be called if KeyboardRegistry.requestShowKeyboard is called.
-     */
-    onRequestShowKeyboard: PropTypes.func,
-    /**
-     * Callback that will be called once the keyboard has been closed
-     */
-    onKeyboardResigned: PropTypes.func,
-    /**
-     * iOS only.
-     * The scrolling behavior, use KeyboardAccessoryView.iosScrollBehaviors.X where X is:
-     * NONE, SCROLL_TO_BOTTOM_INVERTED_ONLY or FIXED_OFFSET
-     *
-     * default: FIXED_OFFSET
-     */
-    iOSScrollBehavior: PropTypes.number,
-    /**
-     * iOS only.
-     * Show the keyboard on a negative scroll
-     *
-     * default: false
-     */
-    revealKeyboardInteractive: PropTypes.bool,
-    /**
-     * iOS only.
-     * Set to false to turn off inset management and manage it yourself
-     *
-     * default: true
-     */
-    manageScrollView: PropTypes.bool,
-    /**
-     * iOS only.
-     * Set to true manageScrollView is set to true and still does not work,
-     * it means that the ScrollView found is the wrong one and you'll have
-     * to have the KeyboardAccessoryView and the ScrollView as siblings
-     * and set this to true
-     *
-     * default: false
-     */
-    requiresSameParentToManageScrollView: PropTypes.bool,
-    /**
-     * iOS only.
-     * Add a (white) SafeArea view beneath the KeyboardAccessoryView
-     *
-     * default: false
-     */
-    addBottomView: PropTypes.bool,
-    /**
-     * iOS only.
-     * Allow hitting sub-views that are placed beyond the view bounds
-     *
-     * default: false
-     */
-    allowHitsOutsideBounds: PropTypes.bool,
-
-    /**
-     * iOS only.
-     * Whether or not to handle SafeArea
-     * default: true
-     */
-    useSafeArea: PropTypes.bool
-  };
+class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
 
   static iosScrollBehaviors = IOS_SCROLL_BEHAVIORS;
 
@@ -131,7 +135,11 @@ class KeyboardAccessoryView extends Component {
     allowHitsOutsideBounds: false
   };
 
-  constructor(props) {
+  // TODO: fix
+  customInputControllerEventsSubscriber: any;
+  trackingViewRef: any;
+
+  constructor(props: KeyboardAccessoryViewProps) {
     super(props);
 
     this.onContainerComponentHeightChanged = this.onContainerComponentHeightChanged.bind(this);
@@ -153,7 +161,7 @@ class KeyboardAccessoryView extends Component {
     }
   }
 
-  onContainerComponentHeightChanged(event) {
+  onContainerComponentHeightChanged(event: LayoutChangeEvent) {
     const {onHeightChanged} = this.props;
 
     if (onHeightChanged) {
@@ -249,8 +257,9 @@ class KeyboardAccessoryView extends Component {
 
     return (
       <KeyboardTrackingView
-        ref={r => (this.trackingViewRef = r)}
+        ref={(r: any) => (this.trackingViewRef = r)}
         style={styles.trackingToolbarContainer}
+        // @ts-ignore
         onLayout={this.onContainerComponentHeightChanged}
         scrollBehavior={this.getIOSTrackingScrollBehavior()}
         revealKeyboardInteractive={revealKeyboardInteractive}
@@ -259,7 +268,9 @@ class KeyboardAccessoryView extends Component {
         addBottomView={addBottomView}
         allowHitsOutsideBounds={allowHitsOutsideBounds}
       >
-        {renderContent && renderContent()}
+        <>
+          {renderContent?.()}
+        </>
         <CustomKeyboardView
           inputRef={kbInputRef}
           component={kbComponent}

package/components/Keyboard/KeyboardInput/{KeyboardRegistry.js → KeyboardRegistry.ts}

@@ -6,7 +6,7 @@ import EventEmitterManager from './utils/EventEmitterManager';
  * Tech debt: how to deal with multiple registries in the app?
  */
 
-const getKeyboardsWithIDs = keyboardIDs => {
+const getKeyboardsWithIDs = (keyboardIDs: string[]) => {
   return keyboardIDs.map(keyboardId => {
     return {
       id: keyboardId,
@@ -21,7 +21,7 @@ const getKeyboardsWithIDs = keyboardIDs => {
  */
 export default class KeyboardRegistry {
   static displayName = 'KeyboardRegistry';
-  static registeredKeyboards = {};
+  static registeredKeyboards: {[key: string]: any} = {};
   static eventEmitter = new EventEmitterManager();
 
   /**
@@ -30,7 +30,7 @@ export default class KeyboardRegistry {
    * generator (function) - a function for the creation of the keyboard.
    * params (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards).
    */
-  static registerKeyboard = (componentID, generator, params = {}) => {
+  static registerKeyboard = (componentID: string, generator: Function, params = {}) => {
     if (!_.isFunction(generator)) {
       console.error(`KeyboardRegistry.registerKeyboard: ${componentID} you must register a generator function`);
       return;
@@ -43,7 +43,7 @@ export default class KeyboardRegistry {
    * Get a specific keyboard
    * componentID (string) - the ID of the keyboard.
    */
-  static getKeyboard = componentID => {
+  static getKeyboard = (componentID: string) => {
     const res = KeyboardRegistry.registeredKeyboards[componentID];
     if (!res || !res.generator) {
       console.error(`KeyboardRegistry.getKeyboard: ${componentID} used but not yet registered`);
@@ -74,7 +74,7 @@ export default class KeyboardRegistry {
    *                     (i.e. if componentID='kb1' globalID='kb1.onItemSelected')
    * callback (function) - the callback to be called when the said event happens
    */
-  static addListener = (globalID, callback) => {
+  static addListener = (globalID: string, callback: Function) => {
     KeyboardRegistry.eventEmitter.listenOn(globalID, callback);
   };
 
@@ -84,7 +84,7 @@ export default class KeyboardRegistry {
    *                     (i.e. if componentID='kb1' globalID='kb1.onItemSelected')
    * args (object) - data to be sent to the listener.
    */
-  static notifyListeners = (globalID, args) => {
+  static notifyListeners = (globalID: string, args: any) => {
     KeyboardRegistry.eventEmitter.emitEvent(globalID, args);
   };
 
@@ -93,7 +93,7 @@ export default class KeyboardRegistry {
    * globalID (string) - ID that includes the componentID and the event name
    *                     (i.e. if componentID='kb1' globalID='kb1.onItemSelected')
    */
-  static removeListeners = globalID => {
+  static removeListeners = (globalID: string) => {
     KeyboardRegistry.eventEmitter.removeListeners(globalID);
   };
 
@@ -102,7 +102,7 @@ export default class KeyboardRegistry {
    * componentID (string) - the ID of the keyboard.
    * args (object) - data to be sent to the listener.
    */
-  static onItemSelected = (componentID, args) => {
+  static onItemSelected = (componentID: string, args: any) => {
     KeyboardRegistry.notifyListeners(`${componentID}.onItemSelected`, args);
   };
 
@@ -110,7 +110,7 @@ export default class KeyboardRegistry {
    * Request to show the keyboard
    * componentID (string) - the ID of the keyboard.
    */
-  static requestShowKeyboard = componentID => {
+  static requestShowKeyboard = (componentID: string) => {
     KeyboardRegistry.notifyListeners('onRequestShowKeyboard', {keyboardId: componentID});
   };
 
@@ -119,7 +119,7 @@ export default class KeyboardRegistry {
    * Call to make the keyboard full screen
    * componentID (string) - the ID of the keyboard.
    */
-  static toggleExpandedKeyboard = componentID => {
+  static toggleExpandedKeyboard = (componentID: string) => {
     KeyboardRegistry.notifyListeners('onToggleExpandedKeyboard', {keyboardId: componentID});
   };
 }

package/components/Keyboard/KeyboardInput/{TextInputKeyboardManager.android.js → TextInputKeyboardManager/TextInputKeyboardManager.android.ts}

@@ -1,6 +1,6 @@
 import {NativeModules} from 'react-native';
 
-const CustomKeyboardInput = NativeModules.CustomKeyboardInput;
+const CustomKeyboardInput = NativeModules.CustomKeyboardInputTemp;
 
 export default class TextInputKeyboardManager {
   static reset = () => CustomKeyboardInput.reset();

package/components/Keyboard/KeyboardInput/{TextInputKeyboardManager.ios.js → TextInputKeyboardManager/TextInputKeyboardManager.ios.ts}

@@ -3,7 +3,8 @@ import ReactNative, {NativeModules, LayoutAnimation} from 'react-native';
 const CustomInputControllerTemp = NativeModules.CustomInputControllerTemp;
 
 export default class TextInputKeyboardManager {
-  static setInputComponent = (textInputRef, {component, initialProps, useSafeArea}) => {
+  static setInputComponent = (textInputRef: any,
+    {component, initialProps, useSafeArea}: {component?: string; initialProps: any; useSafeArea?: boolean}) => {
     if (!textInputRef || !CustomInputControllerTemp) {
       return;
     }
@@ -13,7 +14,7 @@ export default class TextInputKeyboardManager {
     }
   };
 
-  static removeInputComponent = textInputRef => {
+  static removeInputComponent = (textInputRef: any) => {
     if (!textInputRef || !CustomInputControllerTemp) {
       return;
     }
@@ -27,7 +28,7 @@ export default class TextInputKeyboardManager {
     CustomInputControllerTemp.dismissKeyboard();
   };
 
-  static toggleExpandKeyboard = (textInputRef, expand, performLayoutAnimation = false) => {
+  static toggleExpandKeyboard = (textInputRef: any, expand: boolean, performLayoutAnimation = false) => {
     if (textInputRef) {
       if (performLayoutAnimation) {
         LayoutAnimation.configureNext(springAnimation);
@@ -42,7 +43,7 @@ export default class TextInputKeyboardManager {
   };
 }
 
-function findNodeHandle(ref) {
+function findNodeHandle(ref: any) {
   return ReactNative.findNodeHandle(ref.current || ref);
 }
 

package/components/Keyboard/KeyboardInput/TextInputKeyboardManager/index.ts

@@ -0,0 +1,9 @@
+import {Platform} from 'react-native';
+import {default as TextInputKeyboardManagerIOS} from './TextInputKeyboardManager.ios';
+import {default as TextInputKeyboardManagerAndroid} from './TextInputKeyboardManager.android';
+
+const IsAndroid = Platform.OS === 'android';
+
+const TextInputKeyboardManager = IsAndroid ? TextInputKeyboardManagerAndroid : TextInputKeyboardManagerIOS;
+
+export default TextInputKeyboardManager;

package/components/Keyboard/KeyboardInput/utils/{EventEmitterManager.js → EventEmitterManager.ts}

@@ -1,11 +1,12 @@
 import _ from 'lodash';
 
 export default class EventEmitterManager {
+  handlerCallbacks: {[key: string]: Function[]} = {};
   constructor() {
     this.handlerCallbacks = {};
   }
 
-  listenOn(eventName, handlerCallback) {
+  listenOn(eventName: string, handlerCallback: Function) {
     if (!this.handlerCallbacks[eventName]) {
       this.handlerCallbacks[eventName] = [];
     }
@@ -14,17 +15,17 @@ export default class EventEmitterManager {
     }
   }
 
-  emitEvent(eventName, params = {}) {
+  emitEvent(eventName: string, params = {}) {
     if (this.handlerCallbacks[eventName]) {
       this.handlerCallbacks[eventName].forEach(callback => callback(params));
     }
   }
 
-  removeListeners(eventName) {
+  removeListeners(eventName: string) {
     delete this.handlerCallbacks[eventName];
   }
 
-  removeListener(eventName, listener) {
+  removeListener(eventName: string, listener: Function) {
     const handlers = this.handlerCallbacks[eventName];
 
     if (handlers) {

package/components/Keyboard/KeyboardTracking/{KeyboardAwareInsetsView.js → KeyboardAwareInsetsView.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import {StyleSheet, Dimensions} from 'react-native';
-import KeyboardTrackingView from './KeyboardTrackingView';
+import KeyboardTrackingView, {KeyboardTrackingViewProps} from './KeyboardTrackingView';
 
 /**
  * @description: Used to add an inset when a keyboard is used and might hide part of the screen.
  *
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/InputsScreen.js
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js
  * @notes: This view is useful only for iOS.
  */
-const KeyboardAwareInsetsView = props => (
+const KeyboardAwareInsetsView = (props: KeyboardTrackingViewProps) => (
   <KeyboardTrackingView {...props} pointerEvents={'none'} style={styles.insetsView} scrollToFocusedInput/>
 );
 
@@ -25,6 +25,5 @@ const styles = StyleSheet.create({
 });
 
 KeyboardAwareInsetsView.displayName = 'KeyboardAwareInsetsView';
-KeyboardAwareInsetsView.propTypes = KeyboardTrackingView.propTypes;
 
 export default KeyboardAwareInsetsView;

package/components/Keyboard/KeyboardTracking/{KeyboardTrackingView.android.js → KeyboardTrackingView/KeyboardTrackingView.android.tsx}

@@ -2,6 +2,7 @@ import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 
 class KeyboardTrackingView extends PureComponent {
+  static displayName = 'IGNORE';
   render() {
     return <View {...this.props}/>;
   }

package/components/Keyboard/KeyboardTracking/{KeyboardTrackingView.ios.js → KeyboardTrackingView/KeyboardTrackingView.ios.tsx}

@@ -2,11 +2,11 @@
  * Created by artald on 15/05/2016.
  */
 
-import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import ReactNative, {requireNativeComponent, NativeModules} from 'react-native';
+import {KeyboardTrackingViewProps} from './index';
 
-const NativeKeyboardTrackingView = requireNativeComponent('KeyboardTrackingViewTemp', null);
+const NativeKeyboardTrackingView = requireNativeComponent('KeyboardTrackingViewTemp');
 const KeyboardTrackingViewTempManager = NativeModules.KeyboardTrackingViewTempManager;
 
 /**
@@ -15,23 +15,17 @@ const KeyboardTrackingViewTempManager = NativeModules.KeyboardTrackingViewTempMa
  *
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js
  * @notes: This view is useful only for iOS.
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardTrackingView/KeyboardTrackingView.gif?raw=true
  */
-class KeyboardTrackingView extends PureComponent {
+class KeyboardTrackingView extends PureComponent<KeyboardTrackingViewProps> {
   static displayName = 'KeyboardTrackingView';
 
-  static propTypes = {
-    /**
-     * Enables tracking of the keyboard when it's dismissed interactively (false by default).
-     * Why? When using an external keyboard (BT),
-     * you still get the keyboard events and the view just hovers when you focus the input.
-     * Also, if you're not using interactive style of dismissing the keyboard
-     * (or if you don't have an input inside this view) it doesn't make sense to track it anyway.
-     * (This is caused because of the usage of inputAccessory to be able to track the
-     * keyboard interactive change and it introduces this bug)
-     */
-    trackInteractive: PropTypes.bool
+  static defaultProps = {
+    useSafeArea: false
   };
 
+  ref?: any;
+
   render() {
     return <NativeKeyboardTrackingView {...this.props} ref={r => (this.ref = r)}/>;
   }

package/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.tsx

@@ -0,0 +1,50 @@
+import React, {forwardRef} from 'react';
+import {Platform, ViewStyle, ViewProps} from 'react-native';
+import {default as KeyboardTrackingViewIOS} from './KeyboardTrackingView.ios';
+import {default as KeyboardTrackingViewAndroid} from './KeyboardTrackingView.android';
+
+const isAndroid = Platform.OS === 'android';
+
+export type KeyboardTrackingViewProps = ViewProps & {
+  /**
+     * Enables tracking of the keyboard when it's dismissed interactively (false by default).
+     * Why? When using an external keyboard (BT),
+     * you still get the keyboard events and the view just hovers when you focus the input.
+     * Also, if you're not using interactive style of dismissing the keyboard
+     * (or if you don't have an input inside this view) it doesn't make sense to track it anyway.
+     * (This is caused because of the usage of inputAccessory to be able to track the
+     * keyboard interactive change and it introduces this bug)
+     */
+   trackInteractive?: boolean;
+   /**
+    * Allow control safe area
+    */
+   useSafeArea?: boolean;
+
+   scrollToFocusedInput?: boolean;
+   scrollBehavior?: number;
+   revealKeyboardInteractive?: boolean;
+   manageScrollView?: boolean;
+   requiresSameParentToManageScrollView?: boolean;
+   addBottomView?: boolean;
+   allowHitsOutsideBounds?: boolean;
+
+   // Can't figure out what it's supposed to be
+   ref?: any;
+
+   children?: React.ReactChild | React.ReactChild[];
+
+   style?: ViewStyle;
+}
+
+const KeyboardTrackingView = forwardRef(({children, ...others}: KeyboardTrackingViewProps, ref: any) => {
+  const KeyboardTrackingViewContainer = isAndroid ? KeyboardTrackingViewAndroid : KeyboardTrackingViewIOS;
+  
+  return (
+    <KeyboardTrackingViewContainer {...others} ref={ref}>
+      {children}
+    </KeyboardTrackingViewContainer>
+  );
+});
+
+export default KeyboardTrackingView;

package/components/Keyboard/index.ts

@@ -0,0 +1,15 @@
+import KeyboardTrackingView, {KeyboardTrackingViewProps} from './KeyboardTracking/KeyboardTrackingView';
+import KeyboardAwareInsetsView from './KeyboardTracking/KeyboardAwareInsetsView';
+import KeyboardRegistry from './KeyboardInput/KeyboardRegistry';
+import KeyboardAccessoryView, {KeyboardAccessoryViewProps} from './KeyboardInput/KeyboardAccessoryView';
+import KeyboardUtils from './KeyboardInput/utils/KeyboardUtils';
+
+export {KeyboardTrackingViewProps, KeyboardAccessoryViewProps};
+
+export default {
+  KeyboardTrackingView,
+  KeyboardAwareInsetsView,
+  KeyboardRegistry,
+  KeyboardAccessoryView,
+  KeyboardUtils
+};

package/components/SafeArea/{SafeAreaInsetsManager.js → SafeAreaInsetsManager.ts}

@@ -3,16 +3,19 @@
 import {NativeModules, NativeEventEmitter} from 'react-native';
 import _ from 'lodash';
 
-let SafeAreaInsetsCache = null;
+type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null 
+
+let SafeAreaInsetsCache: SafeAreaInsetsType = null;
 
 const NativeSafeAreaManager = NativeModules.SafeAreaManager;
 
 class SafeAreaInsetsManager {
-  constructor() {
-    this._defaultInsets = {top: 0, left: 0, bottom: 0, right: 0};
-    this._safeAreaInsets = this._defaultInsets;
-    this._safeAreaChangedDelegates = [];
 
+  _defaultInsets: SafeAreaInsetsType = {top: 0, left: 0, bottom: 0, right: 0};
+  _safeAreaInsets: SafeAreaInsetsType = {top: 0, left: 0, bottom: 0, right: 0};
+  _safeAreaChangedDelegates: Array<any> = [];
+
+  constructor() {
     this.addSafeAreaChangedListener();
   }
 
@@ -46,11 +49,11 @@ class SafeAreaInsetsManager {
     return this._safeAreaInsets;
   }
 
-  addSafeAreaChangedDelegate(delegate) {
+  addSafeAreaChangedDelegate(delegate: any) {
     this._safeAreaChangedDelegates.push(delegate);
   }
 
-  removeSafeAreaChangedDelegate(delegateToRemove) {
+  removeSafeAreaChangedDelegate(delegateToRemove: any) {
     _.remove(this._safeAreaChangedDelegates, (currentDelegate) => {
       return currentDelegate === delegateToRemove;
     });

package/components/SafeArea/SafeAreaSpacerView.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {View, requireNativeComponent, ViewStyle, Platform} from 'react-native';
+
+const NativeSafeAreaSpacerView = requireNativeComponent('SafeAreaSpacerView');
+const isIOS = Platform.OS === 'ios';
+
+export type SafeAreaSpacerViewProps = {
+  style?: ViewStyle;
+};
+
+const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => {
+  return (
+    // @ts-ignore
+    isIOS ? <NativeSafeAreaSpacerView style={style}/> : <View style={style}/>
+  );
+};
+
+SafeAreaSpacerView.displayName = 'IGNORE';
+export default SafeAreaSpacerView;

package/components/WheelPicker/WheelPickerItem.tsx

@@ -0,0 +1,21 @@
+import {Component} from 'react';
+
+type WheelPickerItemProps = {
+  /**
+   * the picker item value
+   */
+  value: string | number;
+  /**
+   * the picker item display label
+   */
+  label: string;
+};
+
+export default class WheelPickerItem extends Component<WheelPickerItemProps> {
+  static displayName = 'WheelPicker.Item';
+
+  render() {
+    // These items don't get rendered directly.
+    return null;
+  }
+}