DEV Community

Cover image for React Native 0.77 Just Landed: Styling Superpowers & More!
Mitchell Mutandah
Mitchell Mutandah

Posted on

12 3 2 3 2

React Native 0.77 Just Landed: Styling Superpowers & More!

Howdy friends πŸ‘‹! Guess what just landed? React Native 0.77 is here, and it's like getting a surprise package full of goodies! If you've been waiting for better styling controls or worrying about Android compatibility, this update has your back.

Lets get started

I've dug through the release notes, played with the new features, and I'm excited to share what's coming to your development toolkit. Spoiler alert: there's some really cool stuff in here!

Let's unpack this release and see what makes it special. Trust me, the new mixBlendMode alone is worth getting excited about - who doesn't love playing with color blending?

What's New in This Release

🎨 Better Styling Options

The styling system got some great upgrades:

  • display: contents lets you hide wrapper components while keeping their children visible.
  • boxSizing gives developers more control over width and height calculations.
  • mixBlendMode adds new color blending options.
  • New outline properties for highlighting elements without size changes.

πŸ“± Android Updates

The Android side received important updates:

  • Full support for Android 15's edge-to-edge display
  • Compatible with Android's new 16KB page size for future devices

  • Updated Kotlin support to version 2.0.21

πŸ›  Template and CLI Changes

Several tooling changes are coming:

  • iOS templates now use Swift by default (Objective-C remains supported)
  • The react-native init command is being replaced - developers should use npx create-expo-app or npx @react-native-community/cli init
  • Metro no longer includes keyboard shortcuts for running on iOS/Android

πŸ’» Important Changes

Developers should note:

  • Console logs now go through React Native DevTools instead of Metro
  • iOS apps need to add RCTAppDependencyProvider for third-party dependencies
  • Some internal APIs have been removed or changed

Getting Started

Creating a new project is simple:

npx @react-native-community/cli@latest init MyProject --version latest
Enter fullscreen mode Exit fullscreen mode

That's a wrap on React Native 0.77! Whether you're building your first app or your fiftieth, these new features will make your development journey smoother and more fun. I'd love to hear what you think about these updates - especially if you try out those new styling features! Drop a comment below or share what you're building with these new tools.

Read full React Native blog post here: https://reactnative.dev/blog/2025/01/21/version-0.77

Until next time ✨

P.S. : Don't forget to backup your project before upgrading - it's always better to be safe than sorry! πŸ˜‰

cheers

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (1)

Collapse
 
mzcoderhub profile image
Galang YP β€’

Its only cli or expo too?

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

πŸ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityβ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple β€œthank you” goes a long wayβ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay