DEV Community

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

Posted on

11 2 2 2 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

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (1)

Collapse
 
mzcoderhub profile image
Galang YP •

Its only cli or expo too?

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay