TypeError: null is not an object (evaluating 'V.current.useRef')

[renomi]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

EAS build app crashes just on build release but works fine when using Expo Go.

sample.mp4

i tried to make animated tabButton that scale onPress, it work really well in development build.
build successful with this command : eas build -p android --profile release --local
but crash on release.

when run adb logcat -s ReactNative:V ReactNativeJS:V give this ErrorMessage:
ReactNativeJS: TypeError: null is not an object (evaluating 'V.current.useRef')

update: tried to run expo start -c --no-dev

12-04 11:33:21.669 18532 19472 W ReactNativeJS: Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
12-04 11:33:21.669 18532 19472 W ReactNativeJS: 1. You might have mismatching versions of React and the renderer (such as React DOM)
12-04 11:33:21.669 18532 19472 W ReactNativeJS: 2. You might be breaking the Rules of Hooks
12-04 11:33:21.669 18532 19472 W ReactNativeJS: 3. You might have more than one copy of React in the same app
12-04 11:33:21.669 18532 19472 W ReactNativeJS: See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
12-04 11:33:21.669 18532 19472 W ReactNativeJS: TabButton@/data/user/0/host.exp.exponent/files/.expo-internal/bundle:133394:27
12-04 11:33:21.669 18532 19472 W ReactNativeJS: BottomTabBarItem@/data/user/0/host.exp.exponent/files/.expo-internal/bundle:168857:23
12-04 11:33:21.669 18532 19472 W ReactNativeJS: RCTView
12-04 11:33:21.669 18532 19472 W ReactNativeJS: View
12-04 11:33:21.669 18532 19472 W ReactNativeJS: RCTView
12-04 11:33:21.669 18532 19472 W ReactNativeJS: View
12-04 11:33:21.669 18532 19472 W ReactNativeJS: AnimatedComponent@/data/user/0/host.exp.exponent/files/.expo-internal/bundle:79888:38
12-04 11:33:21.669 18532 19472 W ReactNativeJS: AnimatedComponentWrapper
12-04 11:33:21.669 18532 19472 W ReactNativeJS: BottomTabBar@/data/user/0/host.exp.exponent/files/.expo-internal/bundle:168586:22
12-04 11:33:21.669 18532 19472 W ReactNativeJS: RCTView

here's my eas.json

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "previewDev": {
      "developmentClient": true
    },
    "release": {
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleRelease",
    },
    "production": {}
  }
}

tried what i could think of:

• npm i --legacy-peer-deps
• add a resolutin in package.json

 {
  "resolutions": { "react": "18.1.0" }
}

Expected Behavior

Works fine in release build.

Steps To Reproduce

• make custom TabButton
• implement the component in @react-navigation/bottom-tabs

import { useCallback } from 'react';
import { TouchableOpacity } from 'react-native';
import { motify, useAnimationState } from 'moti';

const AnimatedTouchableOpacity = motify(TouchableOpacity)();

export const TabButton = props => {
  const {
    onPressIn: _onPressIn,
    onPressOut: _onPressOut,
    ...passThroughProps
  } = props;

  const animationState = useAnimationState({
    from: {
      scale: [{ value: 0.92, type: 'timing', duration: 100 }],
    },
    to: {
      scale: [
        { value: 1.15, type: 'timing', duration: 200 },
        { value: 1, type: 'timing', duration: 100 },
      ],
    },
  });

  const onPressIn = useCallback(
    event => {
      animationState.transitionTo('from');
      _onPressIn?.(event);
    },
    [_onPressIn, animationState],
  );
  const onPressOut = useCallback(
    event => {
      animationState.transitionTo('to');
      _onPressOut?.(event);
    },
    [_onPressOut, animationState],
  );

  return (
    <AnimatedTouchableOpacity
      delayPressIn={0}
      onPressIn={onPressIn}
      onPressOut={onPressOut}
      state={animationState}
      {...passThroughProps}
    />
  );
};

Versions

package.json

{
  "name": "experiments",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.4.3",
    "@react-navigation/native": "^6.0.16",
    "@react-navigation/native-stack": "^6.9.4",
    "@shopify/flash-list": "1.3.1",
    "expo": "~47.0.8",
    "expo-status-bar": "~1.4.2",
    "moti": "^0.21.0",
    "react": "18.1.0",
    "react-hook-form": "^7.40.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-reanimated": "~2.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "expo-updates": "~0.15.6",
    "expo-splash-screen": "~0.17.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/eslint-parser": "^7.19.1",
    "@react-native-community/eslint-config": "^3.2.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^8.28.0",
    "prettier": "^2.8.0",
    "react-native-dotenv": "^3.4.2"
  },
  "resolutions": {
    "react": "18.1.0"
  },
  "private": true
}

Screenshots

Reproduction

minimal reproduction on snack

somehow, animation is not working correctly on snack 😕
update: try to re-create on react native cli. build release works well.

I hope it helps, thank you.

[nandorojo]

Please try npm install --legacy-peer-deps