Step 2: Configuration File Updates

2.1 Update babel.config.js

The Babel preset was renamed from metro-react-native-babel-preset to @react-native/babel-preset. In the babel.config.js file, rename the preset, such as the example below:

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

This example matches the Vega app template, which doesn’t include @amazon-devices/kepler-module-resolver-preset. If your babel.config.js listed that preset, removing it also removes its build-time aliasing, which rewrote imports of upstream packages to their @amazon-devices/* ports. Without it, those imports resolve to the upstream packages. Update each affected import to the @amazon-devices/* package, and remove the upstream package from package.json if nothing else uses it. For example:

// BEFORE
import { GestureHandlerRootView } from 'react-native-gesture-handler';

// AFTER
import { GestureHandlerRootView } from '@amazon-devices/react-native-gesture-handler';

For RN 0.83, the Vega ports of react-native-gesture-handler, react-native-reanimated, react-native-worklets, react-native-screens, react-native-svg, and @react-navigation/* don’t support the preset, so you must import them directly. Keeping the preset in babel.config.js has no effect on these packages. Only a few ports, such as react-native-device-info and @react-native-async-storage/async-storage, still support aliasing. For details, see Import Libraries in Your App with VMRP.

2.2 Update tsconfig.json

The base TypeScript config package changed from @tsconfig/react-native to @react-native/typescript-config. In the tsconfig.json file, rename the package, such as the example below:

{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    "types": ["jest"]
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["**/node_modules", "**/Pods"]
}

2.3 Update .prettierrc.js

Remove bracketSameLine and bracketSpacing options from the prettierrc.js file.

// .prettierrc.js
module.exports = {
  arrowParens: 'avoid',
  singleQuote: true,
  trailingComma: 'all',
};

2.4 Metro configuration

For the 0.72 to 0.83 upgrade, no metro.config.js changes are needed unless you have custom configurations. Metro updates automatically with React Native. The diffs you may see in upgrade guides (documentation URL changes, type annotation updates) are cosmetic only and have no functional impact. Only update Metro config if you need new features like:

unstable_enableSymlinks for monorepo support
unstable_allowRequireContext for dynamic requires

If your project doesn’t have a metro.config.js, don’t create one.

​2.1 Update babel.config.js

​2.2 Update tsconfig.json

​2.3 Update .prettierrc.js

​2.4 Metro configuration

2.1 Update babel.config.js

2.2 Update tsconfig.json

2.3 Update .prettierrc.js

2.4 Metro configuration