Typescript/keyboard

README.md

@@ -118,4 +118,3 @@ class MyScreen extends Component {
   }
 }
 ```
-

demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.js → demo/src/screens/nativeComponentScreens/SafeAreaSpacerViewScreen.tsx

@@ -1,15 +1,14 @@
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Text, View, SafeAreaSpacerView} from 'react-native-ui-lib'; //eslint-disable-line
+import {Text, View, SafeAreaSpacerView} from 'react-native-ui-lib';
 
 export default class SafeAreaSpacerViewScreen extends PureComponent {
-
   static options() {
     return {
       topBar: {
         drawBehind: true,
-        visible: false,
-      },
+        visible: false
+      }
     };
   }
 
@@ -19,7 +18,7 @@ export default class SafeAreaSpacerViewScreen extends PureComponent {
         <ScrollView contentContainerStyle={styles.scrollView}>
           <View paddingH-25 center>
             <Text text50 center>
-              {'When there are absolute-positioned view at the bottom and top,' + 
+              {'When there are absolute-positioned view at the bottom and top,' +
                 'it is sometimes hard or impossible to change the layout and avoid it.'}
               <Text red50> SafeAreaSpacerView </Text>
               {'can be used as a BOTTOM or TOP spacer and will get the height of the safe area insets'}
@@ -43,16 +42,16 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   topView: {
     position: 'absolute',
     top: 0,
-    left: 0,
+    left: 0
   },
   bottomView: {
     position: 'absolute',
     bottom: 0,
-    left: 0,
-  },
+    left: 0
+  }
 });

generatedTypes/index.d.ts

@@ -85,6 +85,14 @@ export {default as Wizard, WizardProps, WizardStepProps, WizardStepStates, Wizar
 export {default as ListItem, ListItemProps} from './components/listItem';
 export {default as StateScreen, StateScreenProps} from './components/stateScreen';
 export {default as LoaderScreen, LoaderScreenProps} from './components/loaderScreen';
+export {
+  Keyboard,
+  SafeAreaSpacerView,
+  WheelPicker,
+  WheelPickerProps,
+  HighlighterOverlayView,
+  SafeAreaInsetsManager
+} from '../lib/components';
 
 /* All components with manual typings */
 export {
@@ -105,8 +113,6 @@ export {
   UIComponent,
   forwardRef,
   AvatarHelper,
-  WheelPicker,
-  WheelPickerProps,
   Picker,
   PickerItemValue,
   PickerProps
@@ -116,11 +122,5 @@ export {
 export const AnimatedImage;
 export const AnimatedScanner;
 export const DateTimePicker;
-export const HighlighterOverlayView;
-export const Keyboard;
-export const KeyboardAwareListView;
-export const KeyboardAwareScrollView;
-export const SafeAreaInsetsManager;
-export const SafeAreaSpacerView;
 export const SelectableComponent;
 export const TextField;

jest-setup.js

@@ -10,3 +10,8 @@ jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock
 global.__reanimatedWorkletInit = jest.fn();
 jest.mock('react-native-gesture-handler', () => {});
 jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));
+jest.mock('react-native', () => {
+  const reactNative = jest.requireActual('react-native');
+  reactNative.NativeModules.KeyboardTrackingViewTempManager = {};
+  return reactNative;
+});

lib/components/HighlighterOverlayView.js → lib/components/HighlighterOverlayView.tsx

@@ -1,11 +1,41 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {requireNativeComponent, processColor, Platform, StyleSheet, Modal} from 'react-native';
+import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native';
 
-const NativeHighlighterView = requireNativeComponent('HighlighterView', null);
+const NativeHighlighterView = requireNativeComponent('HighlighterView');
 const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
 
-const HighlighterOverlayView = (props) => {
+type HighlightFrameType = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+type HighlightViewTagParams = {
+  padding: number | ViewStyle['padding'];
+  offset: Pick<HighlightFrameType, 'x' | 'y'>;
+}
+
+export type HighlighterOverlayViewProps = {
+  visible: boolean;
+  overlayColor?: string;
+  borderRadius?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+  onRequestClose?: () => void;
+  highlightFrame?: HighlightFrameType;
+  style?: ViewStyle;
+  highlightViewTag?: number | null;
+  children?: JSX.Element[] | JSX.Element;
+  highlightViewTagParams?: HighlightViewTagParams;
+  minimumRectSize?: Pick<HighlightFrameType, 'width' | 'height'>;
+  innerPadding?: number;
+  accessible?: boolean;
+  testID?: string;
+};
+
+
+const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
   const {
     overlayColor,
     borderRadius,
@@ -19,13 +49,15 @@ const HighlighterOverlayView = (props) => {
     highlightViewTag,
     highlightViewTagParams,
     minimumRectSize,
-    innerPadding,
+    innerPadding
   } = props;
 
   let overlayColorToUse = overlayColor || DefaultOverlayColor;
   let strokeColorToUse = strokeColor;
   if (Platform.OS === 'android') {
+    // @ts-ignore
     overlayColorToUse = processColor(overlayColorToUse);
+    // @ts-ignore
     strokeColorToUse = processColor(strokeColorToUse);
   }
 
@@ -34,9 +66,10 @@ const HighlighterOverlayView = (props) => {
       visible={!!(visible)}
       animationType={'fade'}
       transparent
-      onRequestClose={() => onRequestClose && onRequestClose()}
+      onRequestClose={() => onRequestClose?.()}
     >
       <NativeHighlighterView
+        // @ts-ignore, this became private, not sure if I should remove it 
         highlightFrame={highlightFrame}
         style={[style, {...StyleSheet.absoluteFillObject, backgroundColor: 'transparent'}]}
         overlayColor={overlayColorToUse}
@@ -53,46 +86,5 @@ const HighlighterOverlayView = (props) => {
   );
 };
 
-HighlighterOverlayView.propTypes = {
-  overlayColor: PropTypes.string,
-  borderRadius: PropTypes.number,
-  strokeColor: PropTypes.string,
-  strokeWidth: PropTypes.number,
-  visible: PropTypes.bool.isRequired,
-  onRequestClose: PropTypes.func,
-  highlightFrame: PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }),
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-  highlightViewTag: PropTypes.number,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-  highlightViewTagParams: PropTypes.shape({
-    padding: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        top: PropTypes.number,
-        left: PropTypes.number,
-        bottom: PropTypes.number,
-        right: PropTypes.number}),
-    ]),
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number,
-    }),
-  }),
-  minimumRectSize: PropTypes.shape({
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }),
-  innerPadding: PropTypes.number,
-};
-
 HighlighterOverlayView.displayName = 'IGNORE';
-
 export default HighlighterOverlayView;

lib/components/Keyboard/KeyboardInput/CustomKeyboardView.android.js → lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.android.tsx

@@ -1,19 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {requireNativeComponent} from 'react-native';
-import TextInputKeyboardManager from './TextInputKeyboardManager';
-import KeyboardRegistry from './KeyboardRegistry';
-import CustomKeyboardViewBase from './CustomKeyboardViewBase';
+import TextInputKeyboardManager from '../TextInputKeyboardManager/TextInputKeyboardManager.android';
+import KeyboardRegistry from '../KeyboardRegistry';
+import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from '../CustomKeyboardViewBase';
 
 const CustomKeyboardViewNativeAndroid = requireNativeComponent('CustomKeyboardViewNativeTemp');
 
-export default class CustomKeyboardView extends CustomKeyboardViewBase {
+export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewBaseProps> {
   static displayName = 'IGNORE';
-  static propTypes = {
-    initialProps: PropTypes.object,
-    component: PropTypes.string,
-    onItemSelected: PropTypes.func
-  };
 
   async componentDidUpdate(prevProps) {
     const {component} = this.props;

lib/components/Keyboard/KeyboardInput/CustomKeyboardView.ios.js → lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.ios.tsx

@@ -1,25 +1,26 @@
-import PropTypes from 'prop-types';
-import TextInputKeyboardManager from './TextInputKeyboardManager';
-import KeyboardRegistry from './KeyboardRegistry';
-import CustomKeyboardViewBase from './CustomKeyboardViewBase';
+import TextInputKeyboardManager from './../TextInputKeyboardManager/TextInputKeyboardManager.ios';
+import KeyboardRegistry from './../KeyboardRegistry';
+import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './../CustomKeyboardViewBase';
 
-export default class CustomKeyboardView extends CustomKeyboardViewBase {
+export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & {
+  /**
+   * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
+   */
+  inputRef?: any;
+  useSafeArea?: boolean;
+};
+
+export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewProps> {
   static displayName = 'IGNORE';
-  static propTypes = {
-    /**
-     * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
-     */
-    inputRef: PropTypes.object,
-    initialProps: PropTypes.object,
-    component: PropTypes.string,
-    onItemSelected: PropTypes.func,
-    useSafeArea: PropTypes.bool
-  };
 
   static defaultProps = {
+    initialProps: {},
     useSafeArea: true
   };
 
+  registeredRequestShowKeyboard: boolean;
+  keyboardExpandedToggle: [any];
+
   constructor(props) {
     super(props);
 

lib/components/Keyboard/KeyboardInput/CustomKeyboardView/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Platform} from 'react-native';
+import {default as CustomKeyboardViewIOS, CustomKeyboardViewProps} from './CustomKeyboardView.ios';
+import {default as CustomKeyboardViewAndroid} from './CustomKeyboardView.android';
+
+const IsAndroid = Platform.OS === 'android';
+
+const CustomKeyboardView = (props: CustomKeyboardViewProps) => {
+  const Container = IsAndroid ? CustomKeyboardViewAndroid : CustomKeyboardViewIOS;
+
+  return (
+    <Container {...props}/>
+  );
+};
+
+export default CustomKeyboardView;

lib/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.js → lib/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.tsx

@@ -1,26 +1,32 @@
-import {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import KeyboardRegistry from './KeyboardRegistry';
+import {EventSubscription} from 'react-native';
 
-export default class CustomKeyboardViewBase extends Component {
-  static propTypes = {
-    initialProps: PropTypes.object,
-    component: PropTypes.string,
-    onItemSelected: PropTypes.func
-  };
+export type CustomKeyboardViewBaseProps = {
+  inputRef?: any;
+  initialProps?: any;
+  component?: string;
+  onItemSelected?: () => void;
+  onRequestShowKeyboard?: (keyboardId: string) => void;
+  children?: React.ReactChild | React.ReactChild[];
+}
 
+export default class CustomKeyboardViewBase<T extends CustomKeyboardViewBaseProps> extends Component<T> {
+
   static defaultProps = {
     initialProps: {}
   };
 
+  registeredRequestShowKeyboard = false;
+  keyboardExpandedToggle: any;
+  keyboardEventListeners: [EventSubscription];
+
   constructor(props) {
     super(props);
 
     const {component, onItemSelected} = props;
     if (component) {
       this.addOnItemSelectListener(onItemSelected, component);
-
-      this.registeredRequestShowKeyboard = false;
     }
 
     this.keyboardExpandedToggle = {};
@@ -35,7 +41,7 @@ export default class CustomKeyboardViewBase extends Component {
     KeyboardRegistry.removeListeners('onRequestShowKeyboard');
 
     if (this.keyboardEventListeners) {
-      this.keyboardEventListeners.forEach(eventListener => eventListener.remove());
+      this.keyboardEventListeners.forEach((eventListener: EventSubscription) => eventListener.remove());
     }
 
     if (component) {