Infra/v9 prop types

demo/src/screens/MainScreen.js

@@ -1,8 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import {Navigation} from 'react-native-navigation';
 import {
   Assets,
@@ -27,12 +25,6 @@ const chevronIcon = require('../assets/icons/chevronRight.png');
 const FADER_SIZE = 50;
 
 class MainScreen extends Component {
-  static propTypes = {
-    containerStyle: ViewPropTypes.style,
-    renderItem: PropTypes.func,
-    pageStyle: ViewPropTypes.style
-  };
-
   settingsScreenName = 'unicorn.Settings';
 
   static options() {

demo/src/screens/componentScreens/ConversationListScreen.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, {Component, PureComponent} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
@@ -121,13 +120,6 @@ class ConversationListScreen extends Component {
 }
 
 class ContactItem extends PureComponent {
-  static propTypes = {
-    item: PropTypes.object,
-    index: PropTypes.number,
-    addRef: PropTypes.func,
-    onSwipeableWillOpen: PropTypes.func
-  };
-
   render() {
     const {item, index, addRef, onSwipeableWillOpen} = this.props;
 

demo/src/screens/foundationScreens/TypographyScreen.js

@@ -1,16 +1,11 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
 import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib';
 
 const WEIGHTS = ['Thin', 'Light', 'Default', 'Regular', 'Medium', 'Bold', 'Heavy', 'Black'];
 
 export default class TypographyScreen extends Component {
-  static propTypes = {
-    color: PropTypes.string
-  };
-
   static defaultProps = {
     color: Colors.grey10
   };

demo/src/screens/realExamples/ListActions/ActionsList.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {Animated, LayoutAnimation, PanResponder, I18nManager} from 'react-native';
 import {Constants, Assets, Colors, View, TouchableOpacity, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
@@ -17,11 +16,6 @@ const DIRECTIONS = {
 
 export default class ActionsList extends Component {
   static displayName = 'ActionsList';
-
-  static propTypes = {
-    item: PropTypes.object,
-    index: PropTypes.number
-  }
 
   constructor(props) {
     super(props);

docs/getting-started/v8.md

@@ -1,12 +1,13 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 sidebar_label: Migrating v7 -> v8
 title: "Migrating v7 -> v8"
 # path: "/getting-started/v8"
 ---
 ## `react-native-ui-lib@8.x.x`
 
 ## General
+Now supports react-native 0.77  
 `uilib-native` (our native library) has been moved from `dependencies` to `peerDependencies`.  
 Make sure to `pod install` after updating.  
 We do plan on making this optional in the future.

docs/getting-started/v9.md

@@ -0,0 +1,21 @@
+---
+sidebar_position: 7
+sidebar_label: Migrating v8 -> v9
+title: "Migrating v8 -> v9"
+# path: "/getting-started/v9"
+---
+## `react-native-ui-lib@9.x.x`
+
+## General
+Now supports react-native 0.78 and React 19  
+
+## Components
+
+### MaskedInput
+Only the newer version is now available (the `migrate` prop is removed)  
+
+## Utils
+
+### modifiers
+extractOwnProps - removed  
+extractComponentProps - removed

expoDemo/package.json

@@ -36,7 +36,7 @@
     "@react-native-community/cli": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",
     "@react-native-community/cli-platform-ios": "15.0.1",
-    "@types/react": "~18.3.24",
+    "@types/react": "19.0.0",
     "typescript": "^4.9.5"
   },
   "private": true

lib/package.json

@@ -10,8 +10,7 @@
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.17.21",
-    "prop-types": "^15.5.10"
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "shell-utils": "^1.0.10"

package.json

@@ -10,7 +10,8 @@
     "ios": "yarn workspace react-native-ui-lib ios",
     "android": "yarn workspace react-native-ui-lib android",
     "iPad": "yarn workspace react-native-ui-lib iPad",
-    "test": "yarn lint && yarn workspace react-native-ui-lib test",
+    "test": "yarn workspace react-native-ui-lib test",
+    "pretest": "yarn lint",
     "lint": "eslint packages -c .eslintrc.js --ext .tsx,.ts,.js",
     "lint:fix": "eslint packages -c .eslintrc.js --fix",
     "build:dev": "tsc --p tsconfig.dev.json",
@@ -40,11 +41,10 @@
     "@react-native/metro-config": "0.78.3",
     "@react-native/typescript-config": "0.78.3",
     "@shopify/flash-list": "1.7.6",
-    "@testing-library/react-native": "^11.5.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/hoist-non-react-statics": "^3.3.7",
     "@types/jest": "^29.5.13",
     "@types/lodash": "^4.0.0",
-    "@types/prop-types": "^15.5.3",
     "@types/react": "19.0.0",
     "@types/react-test-renderer": "^19.0.0",
     "@types/tinycolor2": "^1.4.2",

packages/react-native-ui-lib/package.json

@@ -32,11 +32,9 @@
         "color": "^3.1.0",
         "commons-validator-js": "^1.0.237",
         "date-fns": "^2.29.3",
-        "deprecated-react-native-prop-types": "^2.3.0",
         "hoist-non-react-statics": "^3.0.0",
         "lodash": "^4.17.21",
         "memoize-one": "^5.0.5",
-        "prop-types": "^15.5.10",
         "react-freeze": "^1.0.0",
         "react-native-redash": "^12.0.3",
         "semver": "^5.5.0",
@@ -66,11 +64,10 @@
         "@react-native/metro-config": "0.78.3",
         "@react-native/typescript-config": "0.78.3",
         "@shopify/flash-list": "1.7.6",
-        "@testing-library/react-native": "^11.5.1",
-        "@types/hoist-non-react-statics": "^3.3.1",
+        "@testing-library/react-native": "^13.3.3",
+        "@types/hoist-non-react-statics": "^3.3.7",
         "@types/jest": "^29.5.13",
         "@types/lodash": "^4.0.0",
-        "@types/prop-types": "^15.5.3",
         "@types/react": "19.0.0",
         "@types/react-test-renderer": "19.0.0",
         "@types/tinycolor2": "^1.4.2",

packages/react-native-ui-lib/src/commons/__tests__/modifiers.spec.js

@@ -1,14 +1,9 @@
-import PropTypes from 'prop-types';
 import {ThemeManager, Colors, Typography, BorderRadiuses, Spacings} from '../../style';
 import * as uut from '../modifiers';
 
 describe('Modifiers', () => {
   const SampleComponent = () => {};
   SampleComponent.displayName = 'SampleComponent';
-  SampleComponent.propTypes = {
-    prop1: PropTypes.string,
-    prop2: PropTypes.number
-  };
 
   describe('extractColorValue', () => {
     it('should return color value according to modifier', () => {
@@ -287,24 +282,6 @@ describe('Modifiers', () => {
     });
   });
 
-  // describe('extractOwnProps', () => {
-  //   it('should extract the component props from a props object', () => {
-  //     const props = {color: 'red', topShadow: 1, bottomShadow: 2};
-  //     expect(MultipleShadow.extractOwnProps(props)).toEqual({
-  //       topShadow: 1,
-  //       bottomShadow: 2,
-  //     });
-  //   });
-
-  //   it('should omit props that were required to ignore', () => {
-  //     const props = {color: 'red', topShadow: 1, bottomShadow: 2};
-  //     expect(MultipleShadow.extractOwnProps(props, 'topShadow')).toEqual({
-  //       bottomShadow: 2,
-  //     });
-  //     expect(MultipleShadow.extractOwnProps(props, ['topShadow', 'bottomShadow'])).toEqual({});
-  //   });
-  // });
-
   describe('extractModifiersProps', () => {
     it('should return all modifiers props', () => {
       expect(uut.extractModifierProps({
@@ -348,24 +325,6 @@ describe('Modifiers', () => {
     });
   });
 
-  describe('extractOwnProps', () => {
-    it('should extract the component props from a props object', () => {
-      const props = {color: 'red', prop1: 'text', prop2: 2};
-      expect(uut.extractOwnProps.bind(SampleComponent)(props)).toEqual({
-        prop1: 'text',
-        prop2: 2
-      });
-    });
-
-    it('should omit props that were required to ignore', () => {
-      const props = {color: 'red', prop1: 'text', prop2: 2};
-      expect(uut.extractOwnProps.bind(SampleComponent)(props, 'prop1')).toEqual({
-        prop2: 2
-      });
-      expect(uut.extractOwnProps.bind(SampleComponent)(props, ['prop1', 'prop2'])).toEqual({});
-    });
-  });
-
   describe('getThemeProps', () => {
     beforeEach(() => {
       ThemeManager.setComponentTheme('SampleComponent', undefined);

packages/react-native-ui-lib/src/commons/asBaseComponent.tsx

@@ -55,7 +55,7 @@ function asBaseComponent<PROPS, STATICS = {}, RefInterface = any>(WrappedCompone
     };
 
     static getDerivedStateFromError(error: any) {
-      UIComponent.defaultProps?.onError?.(error, WrappedComponent.defaultProps);
+      UIComponent.defaultProps?.onError?.(error);
       return {error: true};
     }
 
@@ -80,6 +80,7 @@ function asBaseComponent<PROPS, STATICS = {}, RefInterface = any>(WrappedCompone
   hoistStatics(BaseComponent, WrappedComponent);
   BaseComponent.displayName = WrappedComponent.displayName;
   BaseComponent.propTypes = WrappedComponent.propTypes;
+  // @ts-expect-error class component have defaultProps and functions do not and so should not be affected by this
   BaseComponent.defaultProps = WrappedComponent.defaultProps;
   const ThemeContext = ThemeManager.getThemeContext();
   if (ThemeContext) {

packages/react-native-ui-lib/src/commons/baseComponent.tsx

@@ -1,5 +1,4 @@
 import React, {ComponentType} from 'react';
-// import PropTypes from 'prop-types';
 import {StyleSheet} from 'react-native';
 import _ from 'lodash';
 import {Colors} from '../style';
@@ -8,17 +7,9 @@ import * as Modifiers from './modifiers';
 export default function baseComponent(usePure: boolean): ComponentType {
   const parent = usePure ? React.PureComponent : React.Component;
   class BaseComponent extends parent {
-    // static propTypes = {
-    //   ..._.mapValues(Typography, () => PropTypes.bool),
-    //   ..._.mapValues(Colors, () => PropTypes.bool),
-    //   useNativeDriver: PropTypes.bool,
-    // };
-
     styles: any;
     view: any;
 
-    static extractOwnProps = Modifiers.extractOwnProps;
-
     constructor(props: any) {
       super(props);
       if (!this.styles) {

packages/react-native-ui-lib/src/commons/forwardRef.tsx

@@ -17,10 +17,7 @@ export default function forwardRef<P, STATICS = {}, RefInterface = any>(WrappedC
   const ForwardedComponent = React.forwardRef<RefInterface, P>(forwardRef);
 
   hoistStatics(ForwardedComponent, WrappedComponent);
-  //@ts-ignore
   ForwardedComponent.displayName = WrappedComponent.displayName;
-  //@ts-ignore
-  ForwardedComponent.defaultProps = WrappedComponent.defaultProps;
 
   return ForwardedComponent as typeof ForwardedComponent & STATICS;
 }