Skip to content

Upgrading react-native 0.83 to 0.84

Breaking0.83.10 → 0.84.1Breaking21Platform1Deprecated2New36Changed13Fixed71Other5

Full comparisonBack to react-native
BreakingUpgrade verdict

21 breaking changes and a platform requirement change.

In plain terms
  • On iOS, apps now use the newer Hermes V1 engine by default instead of the previous engine.
  • Removes TurboCxxModule.
  • Removes the microtask API from JSTimerManager.
  • Removes the C++ part of CxxModule support.
Must act Top 5 of 24 that need code or config changes

react-native publishes an official migration guide for version 0.84. It covers more than the release notes do.

Upgrade Helper ↗

Adds tinyglobby ^0.2.15.

Drops glob.

Installs 311 packages in all (was 306).

What you must change

Breaking21
Makes Hermes V1 the default JavaScript engine for iOS.
Hermes V1
0.84.0-rc.1GitHub ReleaseSummarizedView source
Removes TurboCxxModule.
TurboCxxModule
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the microtask API from JSTimerManager.
JSTimerManager
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the C++ part of CxxModule support.
CxxModule
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the Java/Kotlin part of CxxModule support.
CxxModule
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes CxxModule support from CatalystInstance.
CatalystInstanceCxxModule
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes RCTCxxModule.
RCTCxxModule
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes unstable_shouldEnableLegacyModuleInterop() on Android.
unstable_shouldEnableLegacyModuleInterop()
0.84.0-rc.0GitHub ReleaseSummarizedView source
Deletes the deprecated NativeKind class from React Native Android.
NativeKind
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes unnecessary classes inside com.facebook.react.uimanager.layoutanimation used in the legacy architecture.
com.facebook.react.uimanager.layoutanimation
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the unnecessary LazyReactPackage used in the legacy architecture.
LazyReactPackage
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the legacy architecture by default on iOS.
0.84.0-rc.0GitHub ReleaseSummarizedView source
Renames the JSBigString mutable data accessor to mutableData.
JSBigStringmutableData
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes Babel preset transforms for already-unsupported non-Hermes engines.
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the Perf and Network tabs from the in-app Element Inspector in the Legacy Architecture, per RFC0777.
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the unnecessary OnBatchCompleteListener used in the Legacy Architecture on Android.
OnBatchCompleteListener
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the unnecessary and unused BridgeDevSupportManager on Android.
BridgeDevSupportManager
0.84.0-rc.0GitHub ReleaseSummarizedView source
Makes the TurboModuleBinding constructor private.
TurboModuleBinding
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the unused internal NotThreadSafeBridgeIdleDebugListener.
NotThreadSafeBridgeIdleDebugListener
0.84.0-rc.0GitHub ReleaseSummarizedView source
Removes the unused internal NotThreadSafeViewHierarchyUpdateDebugListener.
NotThreadSafeViewHierarchyUpdateDebugListener
0.84.0-rc.0GitHub ReleaseSummarizedView source
Makes RCTPackagerConnection an instance of RCTDevSettings and uses bundle config on iOS.
RCTPackagerConnectionRCTDevSettings
0.84.0-rc.0GitHub ReleaseSummarizedView source
Platform1
Bumps the minimum Node.js version to v22.11.
0.84.0-rc.0GitHub ReleaseSummarizedView source

Deprecations to plan for

Deprecated2
Deprecates TurboModuleProviderFunctionType.
TurboModuleProviderFunctionType
0.84.0-rc.0GitHub ReleaseSummarizedView source
Deprecates the XHRInterceptor and WebSocketInterceptor APIs; developer tools should use the CDP Network domain instead.
XHRInterceptorWebSocketInterceptorNetwork
0.84.0-rc.0GitHub ReleaseSummarizedView source

API changes

Generated by DepDelta from published .d.ts files. Not mixed with prose notes.

  • changed: method AccessibilityInfoStatic.announceForAccessibilityWithOptions(announcement: string, options: { queue?: boolean | undefined }): void → method AccessibilityInfoStatic.announceForAccessibilityWithOptions(announcement: string, options: { queue?: boolean | undefined; priority?: 'low' | 'default' | 'high' | undefined }): void
  • changed: property ViewStyle.experimental_backgroundImage?: | ReadonlyArray<GradientValue> | string | undefined → property ViewStyle.experimental_backgroundImage?: | ReadonlyArray<BackgroundImageValue> | string | undefined
  • changed: type BoxShadowValue = { offsetX: number | string; offsetY: number | string; color?: string | undefined; blurRadius?: ColorValue | number | undefined; spreadDistance?: number | strin… → type BoxShadowValue = { offsetX: number | string; offsetY: number | string; color?: ColorValue | undefined; blurRadius?: string | number | undefined; spreadDistance?: number | strin…
  • changed: type GradientValue = { type: 'linear-gradient'; direction?: string | undefined; colorStops: ReadonlyArray<{ color: ColorValue | null; positions?: ReadonlyArray<string> | undefined… → type GradientValue = LinearGradientValue
  • added: property ViewStyle.experimental_backgroundPosition?: | ReadonlyArray<BackgroundPositionValue> | string | undefined
  • added: property ViewStyle.experimental_backgroundRepeat?: | ReadonlyArray<BackgroundRepeatValue> | string | undefined
  • added: property ViewStyle.experimental_backgroundSize?: | ReadonlyArray<BackgroundSizeValue> | string | undefined
  • added: type BackgroundImageValue = LinearGradientValue | RadialGradientValue
  • added: type BackgroundPositionValue = { top: number | string; left: number | string } | { top: number | string; right: number | string } | { bottom: number | string; left: number | string } | { bot…
  • added: type BackgroundRepeatKeyword = 'repeat' | 'space' | 'round' | 'no-repeat'
  • added: type BackgroundRepeatValue = { x: BackgroundRepeatKeyword; y: BackgroundRepeatKeyword }
  • added: type BackgroundSizeValue = { x: string | number; y: string | number } | 'cover' | 'contain'
  • added: type LinearGradientValue = { type: 'linear-gradient'; direction?: string | undefined; colorStops: ReadonlyArray<{ color: ColorValue | null; positions?: ReadonlyArray<string> | undefined…
  • added: type RadialGradientPosition = { top: number | string; left: number | string } | { top: number | string; right: number | string } | { bottom: number | string; left: number | string } | { bot…
  • added: type RadialGradientShape = 'circle' | 'ellipse'
  • added: type RadialGradientSize = RadialExtent | { x: string | number; y: string | number }
  • changed: property URL.href: string → readonly property URL.href: string
  • added: method URLSearchParams.delete(name: string): void
  • added: method URLSearchParams.entries(): IterableIterator<[string, string]>
  • added: method URLSearchParams.forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void, thisArg?: any): void
  • added: method URLSearchParams.get(name: string): string | null
  • added: method URLSearchParams.getAll(name: string): string[]
  • added: method URLSearchParams.has(name: string): boolean
  • added: method URLSearchParams.keys(): IterableIterator<string>
  • added: method URLSearchParams.set(name: string, value: string): void
  • added: method URLSearchParams.sort(): void
  • added: method URLSearchParams.values(): IterableIterator<string>
  • added: property URL.search: string
  • added: readonly property URL.hash: string
  • added: readonly property URL.host: string
  • added: readonly property URL.hostname: string
  • added: readonly property URL.origin: string
  • added: readonly property URL.password: string
  • added: readonly property URL.pathname: string
  • added: readonly property URL.port: string
  • added: readonly property URL.protocol: string
  • added: readonly property URL.username: string
  • added: readonly property URLSearchParams.size: number
  • changed: class AnimatedInterpolation<OutputT extends number | string> extends AnimatedWithChildren → class AnimatedInterpolation<OutputT extends InterpolationConfigSupportedOutputType> extends AnimatedWithChildren
  • changed: type InterpolationConfigType<OutputT extends number | string> = Readonly<Omit<AnimatedNodeConfig, keyof { inputRange: ReadonlyArray<number>; outputRange: ReadonlyArray<OutputT>; easing?: (input: number) => number; extrapola… → type InterpolationConfigType<OutputT extends InterpolationConfigSupportedOutputType> = Readonly<Omit<AnimatedNodeConfig, keyof { inputRange: ReadonlyArray<number>; outputRange: ReadonlyArray<OutputT>; easing?: (input: number) => number; extrapola…
  • added: type InterpolationConfigSupportedOutputType = number | string | NativeColorValue
  • changed: constructor AnimatedProps(inputProps: { [$$Key$$: string]: unknown }, callback: () => void, allowlist?: null | undefined | AnimatedPropsAllowlist, config?: null | undefined | AnimatedNodeConfig) → constructor AnimatedProps(inputProps: { [$$Key$$: string]: unknown }, callback: () => void, allowlist?: null | undefined | AnimatedPropsAllowlist, rootTag?: RootTag, config?: null | undefined | AnimatedNodeConfig)
  • changed: method AnimatedValue.interpolate<OutputT extends number | string>(config: InterpolationConfigType<OutputT>): AnimatedInterpolation<OutputT> → method AnimatedValue.interpolate<OutputT extends InterpolationConfigSupportedOutputType>(config: InterpolationConfigType<OutputT>): AnimatedInterpolation<OutputT>
  • changed: type ViewProps = Readonly<Omit<DirectEventProps, keyof GestureResponderHandlers | keyof MouseEventProps | keyof PointerEventProps | keyof FocusEventProps | keyof TouchEventProp… → type ViewProps = Readonly<Omit<DirectEventProps, keyof GestureResponderHandlers | keyof MouseEventProps | keyof PointerEventProps | keyof FocusEventProps | keyof KeyEventProps…
  • added: default usePressability
  • added: function usePressability(config: null | undefined | PressabilityConfig): null | EventHandlers
  • changed: function PlatformColor(...names: Array<string>): ColorValue → function PlatformColor(...names: Array<string>): NativeColorValue
  • added: type KeyDownEvent = NativeSyntheticEvent<KeyEvent>
  • added: type KeyEvent = Readonly<{ key: string; code: string; altKey: boolean; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean; repeat?: boolean; isComposing?: boolean }>
  • added: type KeyUpEvent = NativeSyntheticEvent<KeyEvent>
  • added: export { EventHandlers as PressabilityEventHandlers } from './Libraries/Pressability/Pressability'
  • added: export { KeyDownEvent } from './Libraries/Types/CoreEventTypes'
  • added: export { KeyEvent } from './Libraries/Types/CoreEventTypes'
  • added: export { KeyUpEvent } from './Libraries/Types/CoreEventTypes'
  • added: export { PressabilityConfig } from './Libraries/Pressability/Pressability'
  • added: export { default as usePressability } from './Libraries/Pressability/usePressability'
  • changed: type ModeChangeEvent = Readonly<Omit<Omit<NativeModeChangeEvent, 'mode'>, keyof { mode: VirtualViewMode; target: HostInstance }> & { mode: VirtualViewMode; target: HostInstance }> → type ModeChangeEvent = Readonly<Omit<Omit<NativeModeChangeEvent, 'mode'>, keyof { renderState: VirtualViewRenderState; mode: VirtualViewMode; target: HostInstance }> & { renderState:…