[RN] Make sure you are using @react-native/babel-preset when building your JavaScript code.

📱테스트 환경

"react": "18.2.0"
"react-native": "0.74.2"

---

와 해당 경고 때문에 진짜 정신나가는줄 알았다.

ChatGPT 도 몰라 .. 스택오버플로우도 없어 ..

다른 블로그에서도 찾아볼 방법이 없어 ..

 (NOBRIDGE) WARN  Codegen didn't run for DebuggingOverlay. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for SafeAreaView. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for RNSScreen. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for RNSModalScreen. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for RNSScreenContainer. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for RNSScreenNavigationContainer. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for RNSScreenStack. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for RNSSearchBar. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.
 (NOBRIDGE) WARN  Codegen didn't run for RNSFullWindowOverlay. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code.

안되는건 아닌데 경고창때문에 불 ㅡ 편 하던 상황이였고

이를 해결하기위해 열심히 공식문서를 뒤져서 해결했다.

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    ...
  ],
  plugins: [
    ...
  ]
};

babel.config.js 로 가보면

기본적으로 이렇게 되어있을 것이다.

module.exports = {
  presets: [
    '@react-native/babel-preset',
    ...
  ],
  plugins: [
    ...
  ]
};

아래와같이 변경해주고

import {enableScreens} from 'react-native-screens';

enableScreens();

App.tsx 에 가서 해당 함수를 호출해

Screen 초기화를 진행해주면 해결된다.

초기화 이슈라는 말이 가장 많았었기 때문에 enableScreens 를 먼저 추가해줬었는데

당연히 안됐고 babel 까지 수정해주고 나니 해결됐다 ㅎ