Skip to content

Upgrading react-native 0.75 to 0.76

Breaking0.75.5 → 0.76.9Breaking5New8Changed27Fixed77

Full comparisonBack to react-native
BreakingUpgrade verdict

5 breaking changes.

In plain terms
  • iOS code that relied on the view starting the surface automatically must now call start itself.
  • This version turns on React Native's newer internal architecture for everyone by default, which can change how apps behave and build.
  • On iOS with the new architecture, you can now control how the JS bundle is loaded, but some settings on the root view factory are gone.
  • The new rendering system is now turned on for everyone unless they opt out.
Must act Top 3 of 5 that need code or config changes

react-native publishes official migration guides for versions 0.76, 0.76, 0.76. They cover more than the release notes do.

Upgrade Helper ↗Upgrade helper ↗Upgrade Helper ↗

Drops @jest/create-cache-key-function, @react-native-community/cli, @react-native-community/cli-platform-android, @react-native-community/cli-platform-ios, @react-native/assets-registry, @react-native/codegen, @react-native/community-cli-plugin, @react-native/gradle-plugin, @react-native/js-polyfills, @react-native/normalize-colors, @react-native/virtualized-lists, abort-controller, anser, ansi-regex, base64-js, chalk, commander, event-target-shim, flow-enums-runtime, glob, invariant, jest-environment-node, jsc-android, memoize-one, metro-runtime, metro-source-map, mkdirp, nullthrows, pretty-format, promise, react-devtools-core, react-refresh, regenerator-runtime, scheduler, semver, stacktrace-parser, whatwg-fetch, ws, yargs.

Installs 0 packages in all (was 537).

What you must change

Breaking5
RCTSurfaceHostingProxyRootView no longer calls start on the surface depending on the initializer used.
RCTSurfaceHostingProxyRootViewstart
0.76.7GitHub ReleaseSummarizedView source
Enables the New Architecture by default in React Native 0.76.
0.76.0GitHub ReleaseSummarizedView source
Adds control over bundle loading on the new architecture similar to loadSourceForBridge and removes some properties from RCTRootViewFactory.
loadSourceForBridgeRCTRootViewFactory
0.76.0-rc.4GitHub ReleaseSummarizedView source
Enables the New Architecture by default.
0.76.0-rc.0GitHub ReleaseSummarizedView source
Unbreaks the RCTHermesInstance constructor breaking change on iOS.
RCTHermesInstance
0.76.0-rc.1GitHub ReleaseSummarizedView source

API changes

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

  • added: property TextInputProps.submitBehavior?: SubmitBehavior | undefined
  • added: type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline'
  • added: property AccessibilityPropsIOS.accessibilityLargeContentTitle?: string | undefined
  • added: property AccessibilityPropsIOS.accessibilityShowsLargeContentViewer?: boolean | undefined
  • added: property FlexStyle.inset?: DimensionValue | undefined
  • added: property FlexStyle.insetBlock?: DimensionValue | undefined
  • added: property FlexStyle.insetBlockEnd?: DimensionValue | undefined
  • added: property FlexStyle.insetBlockStart?: DimensionValue | undefined
  • added: property FlexStyle.insetInline?: DimensionValue | undefined
  • added: property FlexStyle.insetInlineEnd?: DimensionValue | undefined
  • added: property FlexStyle.insetInlineStart?: DimensionValue | undefined
  • added: property FlexStyle.marginBlock?: DimensionValue | undefined
  • added: property FlexStyle.marginBlockEnd?: DimensionValue | undefined
  • added: property FlexStyle.marginBlockStart?: DimensionValue | undefined
  • added: property FlexStyle.marginInline?: DimensionValue | undefined
  • added: property FlexStyle.marginInlineEnd?: DimensionValue | undefined
  • added: property FlexStyle.marginInlineStart?: DimensionValue | undefined
  • added: property FlexStyle.paddingBlock?: DimensionValue | undefined
  • added: property FlexStyle.paddingBlockEnd?: DimensionValue | undefined
  • added: property FlexStyle.paddingBlockStart?: DimensionValue | undefined
  • added: property FlexStyle.paddingInline?: DimensionValue | undefined
  • added: property FlexStyle.paddingInlineEnd?: DimensionValue | undefined
  • added: property FlexStyle.paddingInlineStart?: DimensionValue | undefined
  • added: property ViewStyle.boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined
  • added: property ViewStyle.filter?: ReadonlyArray<FilterFunction> | string | undefined
  • added: property ViewStyle.isolation?: 'auto' | 'isolate' | undefined
  • added: type BlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' |…
  • added: type BoxShadowValue = { offsetX: number | string; offsetY: number | string; color?: string | undefined; blurRadius?: ColorValue | number | undefined; spreadDistance?: number | strin…
  • added: type DropShadowValue = { offsetX: number | string; offsetY: number | string; standardDeviation?: number | string | undefined; color?: ColorValue | number | undefined }
  • added: type FilterFunction = { brightness: number | string } | { blur: number | string } | { contrast: number | string } | { grayscale: number | string } | { hueRotate: number | string } |…
  • added: type GradientValue = { type: 'linearGradient'; direction?: string | undefined; colorStops: ReadonlyArray<{ color: ColorValue; positions?: ReadonlyArray<string[]> | undefined }> }
  • removed: interface FlexStyle
  • removed: property FlexStyle.inset?: DimensionValue | undefined
  • removed: property FlexStyle.insetBlock?: DimensionValue | undefined
  • removed: property FlexStyle.insetBlockEnd?: DimensionValue | undefined
  • removed: property FlexStyle.insetBlockStart?: DimensionValue | undefined
  • removed: property FlexStyle.insetInline?: DimensionValue | undefined
  • removed: property FlexStyle.insetInlineEnd?: DimensionValue | undefined
  • removed: property FlexStyle.insetInlineStart?: DimensionValue | undefined
  • removed: property FlexStyle.marginBlock?: DimensionValue | undefined
  • removed: property FlexStyle.marginBlockEnd?: DimensionValue | undefined
  • removed: property FlexStyle.marginBlockStart?: DimensionValue | undefined
  • removed: property FlexStyle.marginInline?: DimensionValue | undefined
  • removed: property FlexStyle.marginInlineEnd?: DimensionValue | undefined
  • removed: property FlexStyle.marginInlineStart?: DimensionValue | undefined
  • removed: property FlexStyle.paddingBlock?: DimensionValue | undefined
  • removed: property FlexStyle.paddingBlockEnd?: DimensionValue | undefined
  • removed: property FlexStyle.paddingBlockStart?: DimensionValue | undefined
  • removed: property FlexStyle.paddingInline?: DimensionValue | undefined
  • removed: property FlexStyle.paddingInlineEnd?: DimensionValue | undefined
  • removed: property FlexStyle.paddingInlineStart?: DimensionValue | undefined
  • added: interface ViewStyle
  • added: property ViewStyle.experimental_backgroundImage?: | ReadonlyArray<GradientValue> | string | undefined
  • added: property ViewStyle.experimental_mixBlendMode?: BlendMode | undefined
  • added: type EventEmitter<T> = (handler: (arg: T) => void | Promise<void>) => EventSubscription
  • added: type UnsafeMixed = unknown