Upgrading react-native 0.76 to 0.77
Breaking0.76.9 → 0.77.3Breaking68Security1Platform1Deprecated5New59Changed53Fixed170Other16
BreakingUpgrade verdict
63 breaking changes and a platform requirement change and a security fix.
In plain terms
- The ReactFabricInternals module is gone, so any code importing it will break.
- Looping animations run natively without triggering a React re-render on every loop.
- Android code calling getBackgroundColor() on ReactViewGroup will no longer compile.
- The getDefaultReactHost() helper no longer accepts a jsBundleLoader argument.
Must act Top 5 of 70 that need code or config changes
react-native publishes official migration guides for versions 0.77, 0.77. They cover more than the release notes do.
Upgrade Helper ↗Upgrade Helper ↗What you must change
Breaking63
Removes the ReactFabricInternals module.
ReactFabricInternalsNative looping animations no longer send a React state update each time they finish.
Removes ReactViewGroup.getBackgroundColor() on Android.
ReactViewGroup.getBackgroundColor()Removes jsBundleLoader from DefaultReactHost.getDefaultReactHost() on Android.
DefaultReactHost.getDefaultReactHost()jsBundleLoaderRenames DevSupportManagerBase.getCurrentContext() to getCurrentReactContext().
DevSupportManagerBase.getCurrentContext()DevSupportManagerBase.getCurrentReactContext()Deletes deprecated CompositeReactPackage.
CompositeReactPackageRemoves the deprecated DefaultDevSupportManagerFactory.create().
DefaultDevSupportManagerFactory.create()Removes BaseViewManagerInterface.
BaseViewManagerInterfaceRemoves the ReactNativeFlipper object, deprecated in 0.75.
ReactNativeFlipperDeletes useTurboModules, enableFabricRenderer and enableBridgelessArchitecture fields from ReactFeatureFlags.
ReactFeatureFlagsuseTurboModulesenableFabricRendererenableBridgelessArchitectureRemoves ReactViewBackgroundManager and ReactViewBackgroundDrawable.
ReactViewBackgroundManagerReactViewBackgroundDrawableDeletes partialBatchDidFlush.
partialBatchDidFlushRemoves RCTRuntimeExecutor, deprecated in 0.76.
RCTRuntimeExecutorAttributedString
appendFragment and prependFragment now take an rval instead of a const ref, and append/prependAttributedString are removed.AttributedStringappendFragmentprependFragmentappendAttributedStringprependAttributedStringThe Animation superclass no longer exposes __onEnd; subclasses must call super.start() in their start() implementation.
Animation__onEndstart()AnimatedNode and its subclasses no longer implement toJSON().
AnimatedNodetoJSON()RCTSurfaceHostingProxyRootView no longer calls start on the surface depending on the initializer used.
RCTSurfaceHostingProxyRootViewstartRenames RCTUIGraphicsImageRenderer to RCTMakeUIGraphicsImageRenderer.
RCTUIGraphicsImageRendererRCTMakeUIGraphicsImageRendererRemoves BackHandler.removeEventListener.
BackHandler.removeEventListenerRemoves the type for useConcurrentRoot from AppRegistry, as it was already ignored.
useConcurrentRootAppRegistryRemoves "run on iOS" and "run on Android" from the dev server key commands.
Removes the refs property from the NativeMethods TypeScript definition.
NativeMethodsrefsRemoves the hasConstants constructor from ReactModuleInfo.
ReactModuleInfohasConstantsRemoves TurboReactPackage, which was replaced by BaseReactPackage.
TurboReactPackageBaseReactPackageBindingImpl is no longer part of the public interface.
BindingImplRemoves FabricComponents from the public Android API.
FabricComponentsRemoves the available check for RCTKeyWindow on iOS.
RCTKeyWindowBridgeless mode makes NativeModules.foo load turbomodules by unsetting turboModuleProxy.
NativeModules.footurboModuleProxydev-middleware frameworks must specify serverBaseUrl relative to the middleware host.
serverBaseUrlThe position of sticky headers on ScrollView is now taken into account.
ScrollViewpositionMakes absolute positioning more spec compliant.
ReadableArray non-primitive getters are now correctly typed as optional on Android.
ReadableArrayReduces the visibility of the TaskCompletionSource class on Android.
TaskCompletionSourceUndoes the breaking change to the UiManager.eventDispatcher return type.
UiManager.eventDispatcherUndoes a breaking change on the ReactViewGroup constructor.
ReactViewGroupMakes DevSupportManagerBase.getCurrentReactContext() public.
DevSupportManagerBase.getCurrentReactContext()Adds JSBundleLoader as a parameter of DefaultReactHost.
JSBundleLoaderDefaultReactHostMakes ReactHost.createSurface() non nullable.
ReactHost.createSurface()Undoes a breaking change on the UIManager eventDispatcher accessor.
UIManagerUndoes a breaking change on ViewManagerDelegate.kt String params.
ViewManagerDelegateAdds 3 methods to ReactInstanceDevHelper.
ReactInstanceDevHelperUses BackgroundStyleApplicator when setting background color in BaseViewManager.
BackgroundStyleApplicatorBaseViewManagerUses the RCTDependencyProvider in RCTAppDelegate, breaking the dependency with Codegen.
RCTDependencyProviderRCTAppDelegateDeletes the experimental API RCTConstants.RCTGetMemoryPressureUnloadLevel.
RCTConstants.RCTGetMemoryPressureUnloadLevelReplaces uses of CGColorRef with UIColor to avoid manual memory management.
CGColorRefUIColorLets Cocoapods decide the C++ version for iOS pods.
CocoapodsAnimations with incompatible useNativeDriver and AnimatedValue configurations now fail synchronously instead of asynchronously.
useNativeDriverAnimatedValueTurboModule::get is now a final method; override
create to customize property lookup.TurboModule::getcreateMakes ReactDebugOverlayTags, DebugOverlayTags, Printer, PrinterHolder and NoopPrinter internal.
ReactDebugOverlayTagsDebugOverlayTagsPrinterPrinterHolderNoopPrinterMakes ImageStoreManager internal as part of the stable API effort.
ImageStoreManagerSwipeRefreshLayoutManagerOkHttpCallUtilSimpleSettableFutureClipboardModuleMakes classes inside com.facebook.react.views.progressbar internal.
com.facebook.react.views.progressbarReduces the visibility of ReactVirtualTextShadowNode to internal.
ReactVirtualTextShadowNodeReduces visibility of ReactVirtualTextViewManager to internal.
ReactVirtualTextViewManagerMakes classes in com.facebook.react.views.safeareaview internal.
com.facebook.react.views.safeareaviewMakes ClipboardModule internal.
ClipboardModuleMakes NativeModulePerfLogger internal.
NativeModulePerfLoggerMakes DevLoadingModule internal.
DevLoadingModuleConverts NotThreadSafeViewHierarchyUpdateDebugListener to Kotlin and makes it internal.
NotThreadSafeViewHierarchyUpdateDebugListenerReduces visibility of ReactUnimplementedViewManager to internal.
ReactUnimplementedViewManagerMakes InteropModuleRegistry internal.
InteropModuleRegistryMakes ReactDevToolsSettingsManagerModule and ReactDevToolsRuntimeSettingsModule internal.
ReactDevToolsSettingsManagerModuleReactDevToolsRuntimeSettingsModuleMakes AppStateModule internal.
AppStateModuleMakes AccessibilityInfoModule internal.
AccessibilityInfoModuleSecurity1
Bumps serve-static to 1.16.2 to fix CVE-2024-43800.
serve-staticPlatform1
Updates targetSdk to 35, though apps can still choose their own targetSdk regardless of React Native version.
targetSdkDeprecations to plan for
Deprecated5
Deprecates CatalystInstance in the old architecture.
CatalystInstanceDeprecates the BridgelessCatalystInstance class.
BridgelessCatalystInstanceDeprecates shadows for ReadableNative[Map|Array].[Readable|Writable].
ReadableNativeMapReadableNativeArrayDeprecates the ReactContext.getFabricUIManager() method.
ReactContext.getFabricUIManager()Deprecates RCTBridgeModule batchDidComplete and adds configuration to disable it.
RCTBridgeModulebatchDidCompleteAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
property ActionSheetIOSOptions.disabledButtonTintColor?: ColorValue | ProcessedColorValue | undefined
- changed:
property AccessibilityInfoStatic.sendAccessibilityEvent: (handle: React.ElementRef<HostComponent<unknown>>, eventType: AccessibilityEventTypes) => void → property AccessibilityInfoStatic.sendAccessibilityEvent: (handle: HostInstance, eventType: AccessibilityEventTypes) => void - added:
property AccessibilityInfoStatic.isDarkerSystemColorsEnabled: () => Promise<boolean> - added:
property AccessibilityInfoStatic.isHighTextContrastEnabled: () => Promise<boolean>
- added:
property TextInputIOSProps.lineBreakModeIOS?: | 'wordWrapping' | 'char' | 'clip' | 'head' | 'middle' | 'tail' | undefined
- added:
property ViewProps.experimental_layoutConformance?: 'strict' | 'classic' | undefined
- removed:
const DevToolsSettingsManager: DevToolsSettingsManagerStatic - removed:
interface DevToolsSettingsManagerStatic - removed:
method DevToolsSettingsManagerStatic.getConsolePatchSettings(): string | null - removed:
method DevToolsSettingsManagerStatic.getProfilingSettings(): string | null - removed:
method DevToolsSettingsManagerStatic.reload(): void - removed:
method DevToolsSettingsManagerStatic.setConsolePatchSettings(newSettings: string): void - removed:
method DevToolsSettingsManagerStatic.setProfilingSettings(newSettings: string): void - removed:
type DevToolsSettingsManager = DevToolsSettingsManagerStatic
- removed:
property ImagePropsBase.resizeMethod?: 'auto' | 'resize' | 'scale' | undefined
- changed:
type ImageResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center' → type ImageResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'none' - added:
property ImageResizeModeStatic.none: ImageResizeMode
- changed:
property FlatListComponent.setNativeProps: (props: { [key: string]: any }) => void → property FlatListComponent.setNativeProps: (props: { [key: string]: unknown }) => void
- added:
property ModalBaseProps.backdropColor?: ColorValue | undefined - added:
property ModalPropsAndroid.navigationBarTranslucent?: boolean | undefined
- changed:
property PermissionsAndroidStatic.PERMISSIONS: { [key: string]: Permission } → property PermissionsAndroidStatic.PERMISSIONS: { [key in | 'READ_CALENDAR' | 'WRITE_CALENDAR' | 'CAMERA' | 'READ_CONTACTS' | 'WRITE_CONTACTS' | 'GET_ACCOUNTS' | 'ACCESS_FINE_LOCATION' | 'ACCESS_COARSE_LOCATION' | 'ACCESS_BACKGROUND_LOCATION' | 'RECORD_AUDIO' | 'READ_PHONE_STATE' | 'CALL_PHONE' | 'READ_CALL_LOG' | 'WRITE_CALL_LOG' | 'ADD_VOICEMAIL' | 'READ_VOICEMAIL' | 'WRITE_VOICEMAIL' | 'USE_SIP… - changed:
property PermissionsAndroidStatic.RESULTS: { [key: string]: PermissionStatus } → property PermissionsAndroidStatic.RESULTS: { [key in 'GRANTED' | 'DENIED' | 'NEVER_ASK_AGAIN']: PermissionStatus }
- changed:
property FlexStyle.display?: 'none' | 'flex' | undefined → property FlexStyle.display?: 'none' | 'flex' | 'contents' | undefined - changed:
property ImageStyle.objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined → property ImageStyle.objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none' | undefined - added:
property FlexStyle.boxSizing?: 'border-box' | 'content-box' | undefined - added:
property ViewStyle.experimental_backgroundImage?: | ReadonlyArray<GradientValue> | string | undefined - added:
property ViewStyle.mixBlendMode?: BlendMode | undefined - added:
property ViewStyle.outlineColor?: ColorValue | undefined - added:
property ViewStyle.outlineOffset?: AnimatableNumericValue | undefined - added:
property ViewStyle.outlineStyle?: 'solid' | 'dotted' | 'dashed' | undefined - added:
property ViewStyle.outlineWidth?: AnimatableNumericValue | undefined
- changed:
interface NativeSyntheticEvent<T> extends React.BaseSyntheticEvent<T, React.ElementRef<HostComponent<unknown>>, React.ElementRef<HostComponent<unknown>>> → interface NativeSyntheticEvent<T> extends React.BaseSyntheticEvent<T, HostInstance, HostInstance> - changed:
readonly property NativeMouseEvent.relatedTarget: | null | number | React.ElementRef<HostComponent<unknown>> → readonly property NativeMouseEvent.relatedTarget: null | number | HostInstance
- removed:
method BackHandlerStatic.removeEventListener(eventName: BackPressEventName, handler: () => boolean | null | undefined): void
- removed:
interface ViewProps - removed:
interface ViewStyle - removed:
property ViewProps.experimental_layoutConformance?: 'strict' | 'classic' | undefined - removed:
property ViewStyle.experimental_backgroundImage?: | ReadonlyArray<GradientValue> | string | undefined - removed:
property ViewStyle.experimental_mixBlendMode?: BlendMode | undefined
- added:
const DevMenu: DevMenuStatic - added:
interface DevMenuStatic - added:
method DevMenuStatic.show(): void
- removed:
declare module '.'
- removed:
export * from '../Libraries/DevToolsSettings/DevToolsSettingsManager' - added:
export * from '../src/private/devmenu/DevMenu'
- removed:
property NativeMethods.refs: { [key: string]: React.Component<any, any> } - changed:
method NativeMethods.measureLayout(relativeToNativeComponentRef: | React.ElementRef<HostComponent<unknown>> | number, onSuccess: MeasureLayoutOnSuccessCallback, onFail?: () => void): void → method NativeMethods.measureLayout(relativeToNativeComponentRef: HostInstance | number, onSuccess: MeasureLayoutOnSuccessCallback, onFail?: () => void): void - changed:
new HostComponent(props: P, context?: any): React.Component<P> & Readonly<NativeMethods> → new HostComponent(props: P, context?: any): React.Component<P> & HostInstance - added:
type HostInstance = NativeMethods