Upgrade to Expo SDK 51 and Flow 0.240.0

Close #159

Co-authored-by: Nicolas Gallagher <necolas@meta.com>

Author: byCedric

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.233.0
+0.240.0
 
 [ignore]
 .*/malformed_package_json/.*

apps/examples/package.json

@@ -10,14 +10,14 @@
     "dev:web": "expo start --web --clear"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~3.1.3",
+    "@expo/metro-runtime": "~3.2.1",
     "@stylexjs/babel-plugin": "^0.7.0",
-    "expo": "^50.0.7",
-    "expo-build-properties": "~0.11.1",
-    "expo-status-bar": "~1.11.1",
+    "expo": "^51.0.18",
+    "expo-build-properties": "~0.12.3",
+    "expo-status-bar": "~1.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "^0.73.2",
+    "react-native": ">=0.74.3",
     "react-native-web": "^0.19.10"
   },
   "devDependencies": {

package-lock.json

@@ -36,8 +36,8 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "flow-api-translator": "^0.20.1",
-    "flow-bin": "^0.233.0",
+    "flow-api-translator": "^0.22.0",
+    "flow-bin": "^0.240.0",
     "husky": "^8.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package.json

@@ -39,7 +39,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "^0.73.2"
+    "react-native": ">=0.74.3"
   },
   "engines": {
     "node": ">=18.0.0"

packages/react-strict-dom/package.json

@@ -46,47 +46,56 @@ import { useStyleProps } from './useStyleProps';
 import { useStyleTransition } from './useStyleTransition';
 import * as stylex from '../stylex';
 
-const elements = {
-  article: View,
-  aside: View,
-  blockquote: Text,
-  br: Text,
-  button: Pressable,
-  code: Text,
-  div: View,
-  em: Text,
-  fieldset: View,
-  footer: View,
-  form: View,
-  header: View,
-  h1: Text,
-  h2: Text,
-  h3: Text,
-  h4: Text,
-  h5: Text,
-  h6: Text,
-  img: Image,
-  input: TextInput,
-  main: View,
-  nav: View,
-  ol: View,
-  p: Text,
-  pre: Text,
-  section: View,
-  strong: Text,
-  sub: Text,
-  sup: Text,
-  textarea: TextInput,
-  ul: View
-};
+function getComponentFromElement(tagName: string) {
+  switch (tagName) {
+    case 'article':
+    case 'aside':
+    case 'div':
+    case 'fieldset':
+    case 'footer':
+    case 'form':
+    case 'header':
+    case 'main':
+    case 'nav':
+    case 'ol':
+    case 'section':
+    case 'ul': {
+      return View;
+    }
+    case 'blockquote':
+    case 'br':
+    case 'code':
+    case 'em':
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+    case 'p':
+    case 'pre':
+    case 'strong':
+    case 'sub':
+    case 'sup': {
+      return Text;
+    }
+    case 'button': {
+      return Pressable;
+    }
+    case 'img': {
+      return Image;
+    }
+    case 'input':
+    case 'textarea': {
+      return TextInput;
+    }
+    default:
+      return Text;
+  }
+}
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
-const roles = {
-  a: 'link',
-  header: 'header'
-};
-
 const unsupportedProps = new Set([
   'onBeforeInput',
   'onInvalid',
@@ -131,9 +140,7 @@ export function createStrictDOMComponent<T, P: StrictProps>(
 ): React.AbstractComponent<P, T> {
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
-      let nativeComponent =
-        elements[tagName] != null ? elements[tagName] : Text;
-
+      let nativeComponent = getComponentFromElement(tagName);
       const elementRef = useStrictDOMElement<T>({ tagName });
 
       if (__DEV__) {
@@ -246,7 +253,10 @@ export function createStrictDOMComponent<T, P: StrictProps>(
       if (ariaPosInSet != null) {
         nativeProps.accessibilityPosInSet = ariaPosInSet;
       }
-      const ariaRole = role || roles[tagName];
+      const ariaRole =
+        role ||
+        (tagName === 'a' && 'link') ||
+        (tagName === 'header' && 'header');
       if (ariaRole) {
         nativeProps.role = ariaRole;
       }

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -217,7 +217,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.rotate != null) {
+          if (
+            singleRefTransform.rotate != null &&
+            singleTransform.rotate != null
+          ) {
             animatedTransforms.push({
               rotate: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,
@@ -226,7 +229,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.rotateX != null) {
+          if (
+            singleRefTransform.rotateX != null &&
+            singleTransform.rotateX != null
+          ) {
             animatedTransforms.push({
               rotateX: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,
@@ -238,7 +244,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.rotateY != null) {
+          if (
+            singleRefTransform.rotateY != null &&
+            singleTransform.rotateY != null
+          ) {
             animatedTransforms.push({
               rotateY: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,
@@ -250,7 +259,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.rotateZ != null) {
+          if (
+            singleRefTransform.rotateZ != null &&
+            singleTransform.rotateZ != null
+          ) {
             animatedTransforms.push({
               rotateZ: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,
@@ -307,7 +319,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.skewX != null) {
+          if (
+            singleRefTransform.skewX != null &&
+            singleTransform.skewX != null
+          ) {
             animatedTransforms.push({
               skewX: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,
@@ -316,7 +331,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.skewY != null) {
+          if (
+            singleRefTransform.skewY != null &&
+            singleTransform.skewY != null
+          ) {
             animatedTransforms.push({
               skewY: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,
@@ -325,7 +343,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.translateX != null) {
+          if (
+            singleRefTransform.translateX != null &&
+            singleTransform.translateX != null
+          ) {
             animatedTransforms.push({
               translateX: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,
@@ -337,7 +358,10 @@ export function useStyleTransition(
             });
             continue;
           }
-          if (singleTransform.translateY != null) {
+          if (
+            singleRefTransform.translateY != null &&
+            singleTransform.translateY != null
+          ) {
             animatedTransforms.push({
               translateY: animatedRef.current.interpolate({
                 inputRange: INPUT_RANGE,