Upgrade React Native to 0.71 (#207)

Shopify · Jan 19, 2023 · 6cca8d4 · 6cca8d4
1 parent ea0afe0
commit 6cca8d4
Show file tree

Hide file tree

Showing 22 changed files with 3,466 additions and 3,587 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -23,6 +23,14 @@
     "@shopify/restrict-full-import": [
       "error",
       "lodash"
+    ],
+    "@typescript-eslint/naming-convention": [
+      "off",
+      {
+        "selector": "typeParameter",
+        "format": ["PascalCase"],
+        "prefix": ["T"]
+      }
     ]
   }
 }
diff --git a/.github/workflows/restyle.yml b/.github/workflows/restyle.yml
@@ -0,0 +1,45 @@
+name: restyle
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+env:
+  NODE_VERSION: 19.1.0
+
+jobs:
+  build-ts:
+    name: 'Build Typescript'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - run: |
+          yarn
+          yarn build
+  lint-ts:
+    name: 'Lint Typescript'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - run: |
+          yarn
+          yarn lint
+  test-ts:
+    name: 'Test Typescript'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - run: |
+          yarn
+          yarn test --forceExit
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
diff --git a/.travis.yml b/.travis.yml
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,7 +3,6 @@
   "css.validate": false,
   "scss.validate": false,
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "flow.enabled": false,
   "files.exclude": {
     "**/.git": true,
     "**/.svn": true,
@@ -21,7 +20,9 @@
     "build": true,
     "**/*.js": true
   },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
   "editor.formatOnSave": true,
-  "eslint.validate": ["typescript", "typescriptreact"],
-  "javascript.implicitProjectConfig.experimentalDecorators": true
+  "eslint.validate": ["typescript", "typescriptreact"]
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,57 +5,74 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## Next
+
+- Upgrade React Native to 0.71 in [#207](https://github.com/Shopify/restyle/pull/207) by [mattfrances](https://github.com/mattfrances)
+
 ## 2.1.0 - 2022-04-11
-* Handle Pressable function style prop by [CodyBrouwers](https://github.com/CodyBrouwers) in https://github.com/Shopify/restyle/pull/138
-* Fix default variant not being applied by [nelyousfi](https://github.com/nelyousfi) in https://github.com/Shopify/restyle/pull/148
+
+- Handle Pressable function style prop by [CodyBrouwers](https://github.com/CodyBrouwers) in https://github.com/Shopify/restyle/pull/138
+- Fix default variant not being applied by [nelyousfi](https://github.com/nelyousfi) in https://github.com/Shopify/restyle/pull/148
 
 ## 2.0.0 - 2022-03-07
-* Export composeRestyleFunctions and update `useRestyle` docs [211b29d5](https://github.com/Shopify/restyle/commit/211b29d549787fb3b38df652d2effe9660fcd374) by [sbalay](https://github.com/sbalay)
+
+- Export composeRestyleFunctions and update `useRestyle` docs [211b29d5](https://github.com/Shopify/restyle/commit/211b29d549787fb3b38df652d2effe9660fcd374) by [sbalay](https://github.com/sbalay)
 
 ## 1.8.0 - 2022-03-04
-* Send a stable reference for style object [#133](https://github.com/Shopify/restyle/pull/133) by [jamesism](https://github.com/jamesism)
+
+- Send a stable reference for style object [#133](https://github.com/Shopify/restyle/pull/133) by [jamesism](https://github.com/jamesism)
 
 ## 1.7.0 - 2022-02-24
-* Performance improvements [#131](https://github.com/Shopify/restyle/pull/131) by [sbalay](https://github.com/sbalay)
+
+- Performance improvements [#131](https://github.com/Shopify/restyle/pull/131) by [sbalay](https://github.com/sbalay)
 
 ## 1.6.2 - 2022-02-21
-* Fix web support for variants [#121](https://github.com/Shopify/restyle/pull/121) by [dobrea-v](https://github.com/dobrea-v)
+
+- Fix web support for variants [#121](https://github.com/Shopify/restyle/pull/121) by [dobrea-v](https://github.com/dobrea-v)
 
 ## 1.6.1 - 2021-12-01
-* Allow using 'auto' as value of spacing props. [#118](https://github.com/Shopify/restyle/pull/118) by [sbalay](https://github.com/sbalay)
+
+- Allow using 'auto' as value of spacing props. [#118](https://github.com/Shopify/restyle/pull/118) by [sbalay](https://github.com/sbalay)
 
 ## 1.6.0 - 2021-11-25
-* Fix incorrect props when empty breakpoints. [#115](https://github.com/Shopify/restyle/pull/115) by [@nelyousfi](https://github.com/nelyousfi)
-* Improve rendering performance on breakpoint changes and re-renders. [#113](https://github.com/Shopify/restyle/pull/113) by [@omulet](https://github.com/omulet)
-* Updated React Native to 0.66 and fixed eslint issues.  [#117](https://github.com/Shopify/restyle/pull/117) by [@davebcn87](https://github.com/davebcn87)
+
+- Fix incorrect props when empty breakpoints. [#115](https://github.com/Shopify/restyle/pull/115) by [@nelyousfi](https://github.com/nelyousfi)
+- Improve rendering performance on breakpoint changes and re-renders. [#113](https://github.com/Shopify/restyle/pull/113) by [@omulet](https://github.com/omulet)
+- Updated React Native to 0.66 and fixed eslint issues. [#117](https://github.com/Shopify/restyle/pull/117) by [@davebcn87](https://github.com/davebcn87)
 
 ## 1.5.0 - 2021-11-01
-* Export ThemeContext for outside use. [#80](https://github.com/Shopify/restyle/pull/80) by [@mohsinulhaq](https://github.com/mohsinulhaq)
-* Fixing the example usages of createRestyleComponent in the README. [#82](https://github.com/Shopify/restyle/pull/82) by [@lucasstorti](https://github.com/lucasstorti)
-* Fix ts error for useRestyle hook. [#87](https://github.com/Shopify/restyle/pull/87) by [@andre-krueger](https://github.com/andre-krueger)
-* Improve web support with StyleSheet when creating styles. [#94](https://github.com/Shopify/restyle/pull/94) by [@yuriazevedo11](https://github.com/yuriazevedo11)
-* Fix removeEventListener warning in rn0.65. [#112](https://github.com/Shopify/restyle/pull/112) by [@alexanderstrom](https://github.com/alexanderstrom)
-* Update outdated Polaris tokens link in README.md. [#114](https://github.com/Shopify/restyle/pull/114) by [@nelyousfi](https://github.com/nelyousfi)
+
+- Export ThemeContext for outside use. [#80](https://github.com/Shopify/restyle/pull/80) by [@mohsinulhaq](https://github.com/mohsinulhaq)
+- Fixing the example usages of createRestyleComponent in the README. [#82](https://github.com/Shopify/restyle/pull/82) by [@lucasstorti](https://github.com/lucasstorti)
+- Fix ts error for useRestyle hook. [#87](https://github.com/Shopify/restyle/pull/87) by [@andre-krueger](https://github.com/andre-krueger)
+- Improve web support with StyleSheet when creating styles. [#94](https://github.com/Shopify/restyle/pull/94) by [@yuriazevedo11](https://github.com/yuriazevedo11)
+- Fix removeEventListener warning in rn0.65. [#112](https://github.com/Shopify/restyle/pull/112) by [@alexanderstrom](https://github.com/alexanderstrom)
+- Update outdated Polaris tokens link in README.md. [#114](https://github.com/Shopify/restyle/pull/114) by [@nelyousfi](https://github.com/nelyousfi)
 
 ## 1.4.0 - 2020-12-15
-* Add 2-dimensional breakpoints [#70](https://github.com/Shopify/restyle/pull/70) by [@Johan-duitot](https://github.com/Johan-dutoit)
+
+- Add 2-dimensional breakpoints [#70](https://github.com/Shopify/restyle/pull/70) by [@Johan-duitot](https://github.com/Johan-dutoit)
 
 ## 1.3.1 - 2020-10-26
-* Silently ignore any errors caused by missing a variant definition in the theme (e.g. textVariants), to preserve backwards compatibility. [#64](https://github.com/Shopify/restyle/pull/64) by [@jonogreenz](https://github.com/jonogreenz)
-* Disallow creating a variant with the existing base theme keys of `colors, spacing, breakpoints, zIndices, borderRadii`. [#64](https://github.com/Shopify/restyle/pull/64) by [@jonogreenz](https://github.com/jonogreenz)
-* Improve rendering performance by removing unnecessary uses of the spread operator. [#63](https://github.com/Shopify/restyle/pull/63) by [@JoelBesada](https://github.com/JoelBesada)
-* ~~Add a more descriptive error when theme is missing a key for a used variant.~~ [#59](https://github.com/Shopify/restyle/pull/59) by [@Charly6596](https://github.com/Charly6596) (*Replaced by [PR #64](https://github.com/Shopify/restyle/pull/64)*)
+
+- Silently ignore any errors caused by missing a variant definition in the theme (e.g. textVariants), to preserve backwards compatibility. [#64](https://github.com/Shopify/restyle/pull/64) by [@jonogreenz](https://github.com/jonogreenz)
+- Disallow creating a variant with the existing base theme keys of `colors, spacing, breakpoints, zIndices, borderRadii`. [#64](https://github.com/Shopify/restyle/pull/64) by [@jonogreenz](https://github.com/jonogreenz)
+- Improve rendering performance by removing unnecessary uses of the spread operator. [#63](https://github.com/Shopify/restyle/pull/63) by [@JoelBesada](https://github.com/JoelBesada)
+- ~~Add a more descriptive error when theme is missing a key for a used variant.~~ [#59](https://github.com/Shopify/restyle/pull/59) by [@Charly6596](https://github.com/Charly6596) (_Replaced by [PR #64](https://github.com/Shopify/restyle/pull/64)_)
 
 ## 1.3.0 - 2020-09-22
-* Add support for defining default values for variants in the theme. [#51](https://github.com/Shopify/restyle/pull/51) by [@Johan-duitot](https://github.com/Johan-dutoit)
+
+- Add support for defining default values for variants in the theme. [#51](https://github.com/Shopify/restyle/pull/51) by [@Johan-duitot](https://github.com/Johan-dutoit)
 
 ## 1.2.0 - 2020-08-19
-* Improve typesafety of createRestyleFunction for correct property values. [#36](https://github.com/Shopify/restyle/pull/36) by [@hammadj](https://github.com/hammadj)
-* Add `start` and `end` (e.g. `paddingStart`) properties where applicable to better support RTL layouts. [#38](https://github.com/Shopify/restyle/pull/38) by [@salzhrani](https://github.com/salzhrani)
-* Fix `useRestyle` types not accepting a function created by `createVariants`. [#41](https://github.com/Shopify/restyle/pull/41) by [@JoelBesada](https://github.com/JoelBesada)
-* Make `createRestyleComponent`, `createBox` and `createText` correctly forward the `ref` prop to the underlying component. [#42](https://github.com/Shopify/restyle/pull/42) by [@JoelBesada](https://github.com/JoelBesada)
+
+- Improve typesafety of createRestyleFunction for correct property values. [#36](https://github.com/Shopify/restyle/pull/36) by [@hammadj](https://github.com/hammadj)
+- Add `start` and `end` (e.g. `paddingStart`) properties where applicable to better support RTL layouts. [#38](https://github.com/Shopify/restyle/pull/38) by [@salzhrani](https://github.com/salzhrani)
+- Fix `useRestyle` types not accepting a function created by `createVariants`. [#41](https://github.com/Shopify/restyle/pull/41) by [@JoelBesada](https://github.com/JoelBesada)
+- Make `createRestyleComponent`, `createBox` and `createText` correctly forward the `ref` prop to the underlying component. [#42](https://github.com/Shopify/restyle/pull/42) by [@JoelBesada](https://github.com/JoelBesada)
 
 ## 1.1.0 - 2020-07-25
+
 - Improve type safety and type inference of `createVariant`, `createBox`, `createText`, `useRestyle`, `createRestyleFunction` and `createRestyleComponent`. [#16](https://github.com/Shopify/restyle/pull/16) and [#21](https://github.com/Shopify/restyle/pull/21) by [@hammadj](https://github.com/hammadj), [#26](https://github.com/Shopify/restyle/pull/26) by [@Johan-duitot](https://github.com/Johan-dutoit)
 - Add a `createTheme` helper function to enforce proper shape for user themes. [#18](https://github.com/Shopify/restyle/pull/18/files) by [@hammadj](https://github.com/hammadj)
 - Add shorthand names for spacing and backgroundColor props. [#22](https://github.com/Shopify/restyle/pull/22) by [@hammadj](https://github.com/hammadj)

diff --git a/jest.config.js b/jest.config.js
@@ -1,16 +1,9 @@
-const {defaults: tsjPreset} = require('ts-jest/presets');
-
 module.exports = {
-  ...tsjPreset,
+  verbose: true,
   preset: 'react-native',
-  transform: {
-    ...tsjPreset.transform,
-    '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-  },
-  globals: {
-    'ts-jest': {
-      babelConfig: true,
-    },
-  },
-  cacheDirectory: '.jest/cache',
+  testEnvironment: 'node',
+  testMatch: ['<rootDir>/src/test/**/*.(test|spec).(ts|tsx|js)'],
+  transformIgnorePatterns: [
+    '<rootDir>/node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)',
+  ],
 };
diff --git a/package.json b/package.json
@@ -13,11 +13,6 @@
     "lint-fix": "eslint --fix '**/*.{ts,tsx}'",
     "prepublishOnly": "yarn run build"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint"
-    }
-  },
   "publishConfig": {
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
@@ -29,21 +24,19 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@shopify/eslint-plugin": "^37.0.0",
-    "@types/jest": "^25.0.0",
-    "@types/react": "^16.9.2",
-    "@types/react-native": "^0.66.4",
-    "@types/react-test-renderer": "^16.9.0",
-    "babel-jest": "^25.5.0",
-    "eslint": "^7.14.0",
-    "husky": "^4.2.3",
-    "jest": "^25.5.0",
-    "prettier": "^1.18.2",
-    "react": "^17.0.2",
-    "react-native": "0.66.3",
-    "react-test-renderer": "^17.0.2",
-    "ts-jest": "^25.5.0",
-    "typescript": "~3.7.5"
+    "@shopify/eslint-plugin": "^42.0.3",
+    "@types/jest": "^29.2.1",
+    "@types/react": "^18.0.24",
+    "@types/react-native": "^0.71.0",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.2.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "prettier": "^2.4.1",
+    "react": "^18.2.0",
+    "react-native": "^0.71.0",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
     "react": "*",

diff --git a/src/composeRestyleFunctions.ts b/src/composeRestyleFunctions.ts
@@ -11,11 +11,12 @@ import {AllProps} from './restyleFunctions';
 
 const composeRestyleFunctions = <
   Theme extends BaseTheme,
-  TProps extends AllProps<Theme>
+  TProps extends AllProps<Theme>,
 >(
   restyleFunctions: (
     | RestyleFunctionContainer<TProps, Theme>
-    | RestyleFunctionContainer<TProps, Theme>[])[],
+    | RestyleFunctionContainer<TProps, Theme>[]
+  )[],
 ) => {
   const flattenedRestyleFunctions = restyleFunctions.reduce(
     (acc: RestyleFunctionContainer<TProps, Theme>[], item) => {
@@ -29,12 +30,12 @@ const composeRestyleFunctions = <
   });
   const propertiesMap = properties.reduce(
     (acc, prop) => ({...acc, [prop]: true}),
-    {} as Record<keyof TProps, true>,
+    {} as {[key in keyof TProps]: true},
   );
 
   const funcsMap = flattenedRestyleFunctions.reduce(
     (acc, each) => ({[each.property]: each.func, ...acc}),
-    {} as Record<keyof TProps, RestyleFunction<TProps, Theme, string>>,
+    {} as {[key in keyof TProps]: RestyleFunction<TProps, Theme, string>},
   );
 
   // TInputProps is a superset of TProps since TProps are only the Restyle Props

diff --git a/src/createBox.ts b/src/createBox.ts
@@ -37,7 +37,7 @@ type BaseBoxProps<Theme extends BaseTheme> = BackgroundColorProps<Theme> &
 
 export type BoxProps<
   Theme extends BaseTheme,
-  EnableShorthand extends boolean = true
+  EnableShorthand extends boolean = true,
 > = BaseBoxProps<Theme> & EnableShorthand extends true
   ? BaseBoxProps<Theme> &
       SpacingShorthandProps<Theme> &
@@ -60,7 +60,7 @@ export const boxRestyleFunctions = [
 const createBox = <
   Theme extends BaseTheme,
   Props = React.ComponentProps<typeof View> & {children?: React.ReactNode},
-  EnableShorthand extends boolean = true
+  EnableShorthand extends boolean = true,
 >(
   BaseComponent: React.ComponentType<any> = View,
 ) => {

diff --git a/src/createRestyleComponent.tsx b/src/createRestyleComponent.tsx
@@ -6,12 +6,13 @@ import {BaseTheme, RestyleFunctionContainer} from './types';
 import useRestyle from './hooks/useRestyle';
 
 const createRestyleComponent = <
-  Props extends Record<string, any>,
-  Theme extends BaseTheme
+  Props extends {[key: string]: any},
+  Theme extends BaseTheme,
 >(
   restyleFunctions: (
     | RestyleFunctionContainer<Props, Theme>
-    | RestyleFunctionContainer<Props, Theme>[])[],
+    | RestyleFunctionContainer<Props, Theme>[]
+  )[],
   BaseComponent: React.ComponentType<any> = View,
 ) => {
   const composedRestyleFunction = composeRestyleFunctions(restyleFunctions);

diff --git a/src/createRestyleFunction.ts b/src/createRestyleFunction.ts
@@ -3,10 +3,10 @@ import {getResponsiveValue, StyleTransformFunction} from './responsiveHelpers';
 
 const createRestyleFunction = <
   Theme extends BaseTheme = BaseTheme,
-  TProps extends Record<string, any> = Record<string, any>,
+  TProps extends {[key: string]: any} = {[key: string]: any},
   P extends keyof TProps = keyof TProps,
   K extends keyof Theme | undefined = undefined,
-  S extends RNStyleProperty = RNStyleProperty
+  S extends RNStyleProperty = RNStyleProperty,
 >({
   property,
   transform,

diff --git a/src/createText.ts b/src/createText.ts
@@ -31,7 +31,7 @@ type BaseTextProps<Theme extends BaseTheme> = ColorProps<Theme> &
 
 export type TextProps<
   Theme extends BaseTheme,
-  EnableShorthand extends boolean = true
+  EnableShorthand extends boolean = true,
 > = EnableShorthand extends true
   ? BaseTextProps<Theme> & SpacingShorthandProps<Theme>
   : BaseTextProps<Theme>;
@@ -50,7 +50,7 @@ export const textRestyleFunctions = [
 const createText = <
   Theme extends BaseTheme,
   Props = React.ComponentProps<typeof Text> & {children?: React.ReactNode},
-  EnableShorthand extends boolean = true
+  EnableShorthand extends boolean = true,
 >(
   BaseComponent: React.ComponentType<any> = Text,
 ) => {