シャドーイング練習: React Conf 2025 React Native Keynote - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

各モードは全画面の練習ルームで開きます。

558 文

文が短すぎたり長すぎる場合は、Editをタップして調整してください。

Good morning, everyone.

I'm Jorge, an EM on the React team at Meta.

Welcome to day two of React Conf.

I hope you all had a fantastic time last night with karaoke

and it's good to see the room is full even though some of you probably had some drinking last night

it's truly incredible to be here today

witnessing this amazing community come together today we're about to mark a significant milestone in the journey of react native

and I'm thrilled for the a theme to share some exciting developments with you.

So as you can see, our community is thriving.

These images capture just a glimpse of the passion and dedication that drives

React Native forward.

It's a testament of what we can achieve when we collaborate and work together. When you choose

React Native, you're choosing to write better applications with less code.

Our framework was built on the promise of learn once, write anywhere.

This means you can leverage

React Native to share a significant portion of your code base across different platforms.

And in many cases, you can even use the exact same code base to create truly multi -platform apps.

Take our React Conf app, for example.

It's built from a single code base, yet each version adapts seamlessly to the unique design language and convention of the respective platforms.

Yeah, definitely woo for that.

These applications are crafted with the very same

React you know and love, but they are rendered with the native views that each platform provides.

This means you get the best of both worlds the efficiency of React development combined with the authentic look

and feel of native iOS and Android apps.

You can fully embrace each platform's conventions and tap into powerful native modules and extensions.

So you can build things like widgets and live activities.

It's as truly native as it gets.

So at its core, it's the same

React for web, but with the power and performance of native mobile applications.

It's React truly native.

And over the past decades

React has gone from a hackathon project started at Facebook and evolved into a robust and powerful framework we know today.

We've come a long way since its inception

and in this presentation we're excited to highlight some of the most significant investments

and improvements from the last year and throughout our decade journey.

Okay, so once the slides catch up with me,

we're going to talk about our journey today.

The conference 2025.

Okay, we got a lot to cover today

and we'll start with the state of React Native Union which will give you a snapshot of our community and our ecosystem.

We'll look into new capabilities that are coming to React Native

and we'll talk about the future of React Native and the innovation yet to come, if the slides allow.

And now to talk about the state of React Native, everyone please welcome Nicola Corti.

Thanks Jorge for the introduction.

Hi everyone.

My name is Nicola and I work as a software engineer at Meta on the React team.

And I'm truly excited to be here today again at React Conf

and have the opportunity to talk with you about the growth that

React Native has seen in the past years.

So let's dive in.

So first, let's talk about my favorite metric, download counts.

Obviously, the last time that we spoke here at React Conf last year, React Native was just downloaded 2 million times every week.

But since then, yeah, hold on, because since then the growth hasn't slowed down.

Today, you folks are downloading

React Native 4 million times every week.

That's a 100 % growth from last

React Conf, which is just wow.

And wait, I just got started because looking at weekly download count doesn't give the full picture.

Let's zoom out and look at how our yearly download count has increased over the last 10 years since we started.

So since 2015, our growth has been truly incredible.

Fast forward to today, and React Native has already been downloaded over 120 million times.

And the year is not even over yet, folks.

So yeah, those metrics clearly show how we evolved from just an hackathon project to a technology

that is trusted by millions of developers around the globe.

So now let's talk about releases.

In 2025, we made a significant change as we moved to shipping six releases per year.

This new schedule allows us to deliver both bug fixes and new features to you more frequently.

And I'm also extremely excited to announce that just this morning, React Native 82 has been released on NPM.

PM.

So the release block for us is called React Native 82, A New Era.

So all done, because my colleagues have a lot of features to share that has just been shipped,

or will be shipped in the upcoming release in 0 .83, which is expected later this year.

So stay tuned for the rest of the keynote, because we have a lot of announcements for you.

But we have another exciting milestone for our ecosystem to share.

So we just crossed over 2 ,000 React Native libraries listed on reactnative .directory.

So today developers have more tools, components, and libraries at their fingertips than ever before.

But it's not just libraries, right?

Because what truly sets

React Native apart is our community.

We are proud to share that

React Native now has over 2 ,700 unique contributors,

a number that stands out as one of the most contributed projects in the ecosystem.

But this isn't just a statistic, right?

We truly believe that

React Native is, at its core, a truly community -driven project.

And we want to thank all of you for being part of this today.

So, but community numbers only tell part of the story, right?

As there are some apps in our ecosystem that are truly outstanding, and we want to spotlight today.

Yes, because the real impact of React Native comes to life in the beautiful application

built by developers like you all around the globe.

So, in this next section, we're going to take a sneak peek at some of those apps that we believe are truly worth a mention.

So, first, let's take a moment to recognize some outstanding achievements.

Because many React Native apps aren't just popular, they are award -winning.

Over the last years, several

React Native apps received unique awards in the various stores, mobile stores.

So, these awards align both the technical skills of the teams behind those apps,

but also the real -world impact that those apps are having on their user base.

So let's look at some of them.

First one is Ryze, a beautiful sleep tracking app.

100

Ryze stands out not only for its powerful features, but also for its beautiful user experience.

101

The team at Ryze leverages

102

React Native's Kia to render a unique, elegant UI, delivering smooth animations and stunning charts that sets a new standard for mobile design.

103

Next up is Rana, an amazing running coach application.

104

I'm a runner myself and I love this app.

105

What sets Rana apart is its deep integration with native platforms, enabling the app to provide real -time background guidance during your workouts,

106

while still accessing all the native APIs needed for wellness tracking.

107

And they're also using

108

React Native's Kia to render those beautiful workout recaps at the end of your races.

109

And finally, Partyful, a delightful social event planning app.

110

Partyful was recognized as best -of -place tour last year.

111

And other than being a beautiful app, Partyful is also pushing the boundaries on iOS,

112

integrating natively with features like app clips and live activities.

113

So we believe that those apps are just some fantastic example of how

114

React Native can be leveraged to build award -winning applications.

115

They can feel right at home in the platforms they're running on.

116

So I think they deserve a big round of applause for those apps, please.

117

But building beautiful and impactful

118

React Native apps is possible only thanks to strong foundations

119

that allow you to access all the capabilities of the underlying platform without a necessary bottleneck.

120

And those foundations are the new architecture.

121

In the next section, we want to showcase some new architecture migration success stories from apps in our ecosystem.

122

First, from one of our closer partners, Shopify.

123

They migrated both their Shopify mobile and point -of -sale apps to the new architecture.

124

They publish an extremely insightful blog post detailing their migration journey.

125

In it, they share both wins and pitfalls that they encountered along the way.

126

I'm excited to share that, thanks to the new architecture, they were able to significantly improve the app launch on both

127

Android and iOS while reducing unnecessary re -rendering, so their application is both snappy and responsive.

128

But new architecture also means new capabilities, right?

129

So, for example, let's take a look at Starlink, the satellite connectivity app.

130

Starlink leverages the new architecture and React Native Vision camera to power their field of view screen.

131

Thanks to this, they were able to deliver a truly native experience that makes an everyday task,

132

such as network diagnostic, truly engaging for their users.

133

So we've seen how migrating to new architecture is enabling teams to build beautiful applications.

134

But there are other migration stories in our ecosystem that we think are worth highlighting today.

135

And those are the migrations from platform -specific framework to React Native.

136

So let's look at some of those.

137

First one is Zalando, Europe's leading online fashion platform.

138

Zalando is incrementally migrating their mobile app to React Native,

139

allowing them to modernize their stack without disrupting their user experience at all.

140

What's especially interesting is their use of React Strict DOM to share code between web and native platform.

141

If you're interested in learning more about the technical details of this migration,

142

folks at Zalando just posted an extremely insightful engineering blog about their migration journey.

143

So go check it out.

144

And another insightful migration is AlloFresh Group, a global leader in meal kit delivery.

145

Allofresh is actively migrating all of their mobile apps to React Native, demonstrating a strong commitment to cross -platform development.

146

Their Factor app that you see on the left has been almost entirely migrated into React Native,

147

showcasing how even complex user flows can be seamlessly migrated to React Native.

148

And thanks to this migration, they were able to accelerate development while maintaining consistency across a number of different brands.

149

They also published a blog post on their engineering blog, showcasing the migration story.

150

So make sure you don't miss it.

151

And again, those are just some amazing story of migration journey in our ecosystem.

152

So I think just by the fact that those folks are publishing their story and publishing blog posts, they deserve a big round of applause.

153

So moving on we would like to talk about the match between

154

React Native and AI.

155

So, yes, we believe that the match between

156

React Native and AI is a match made in heaven.

157

The power of React Native allows you to greatly reduce the time to market for several emerging AI applications out there.

158

So let's take a look at some of those.

159

The first one is Mistral, an exciting new player in the AI space.

160

Mistral, less shot, is built entirely with React Native, showcasing how powerful

161

React Native has become for even advanced AI use cases.

162

This app offers a conversational experience with audio capabilities, all delivered through a single

163

React Native code base.

164

Moving on is Replit, a platform that's transforming how people collaborate on code.

165

The Replit mobile app is also entirely built with React Native.

166

And this allows the team at Replit to deliver a seamless high -performance coding experience across both iOS and Android.

167

Again, all from a single code base.

168

And finally, let's turn our attention to Vercel V0, a groundbreaking app that's redefining how developers build for the web.

169

Vercel V0 is also built with React Native.

170

And you know what is the best part?

171

I heard Vercel V0 is now available in public beta.

172

So go and check it out in the App Store.

173

And we believe that those apps are truly unique experiences of how

174

React Native is a great tool to support AI use cases

175

while allowing you to deliver extremely elegant and polished experience such as this one.

176

So as we wrap up our App Highlights, we do have one final use case to mention.

177

Microsoft Copilot for Office.

178

React Native isn't just for mobile anymore, right?

179

With React Native, you can reach your users wherever they are, on phones, tablets, desktop, and much more.

180

Microsoft built a Copilot integration for Word entirely with React Native.

181

The area that you saw on top, where Copilot brings AI -powered assistance into your documents, is entirely built with React Native.

182

And it's impressive to see how it blends in with the rest of the desktop application.

183

So, as we just saw, React Native is enabling teams to deliver native experiences on both mobile and desktop.

184

But there are more future platforms they can reach today, thanks to React Native, which go beyond mobile and desktop.

185

And today, we want to look at some of them.

186

First, let's talk about an exciting development from Amazon, Vega OS.

187

Yes, folks, this is a big one.

188

So Amazon has built an entire new operating system for their Fire TV devices.

189

And what's truly remarkable is that

190

React Native is built right inside of it.

191

So I think it's effectively the first

192

React Native operating system. So, folks.

193

This is going to power millions of TVs around the world, and it's a huge commitment and investment from Amazon.

194

By integrating React Native at the OS level,

195

Amazon is enabling developers to build elegant TV experiences using the same technology that you all know and love.

196

If you're curious to see it in action, make sure you check out the Amazon booth, where you can see it running smoothly,

197

even on low -end devices.

198

And make sure you don't miss the talk from Giovanni and Eric, React Native Amplified, just after the keynote.

199

Another platform that we want to talk about is VR.

200

Let's take a look at some of the experiences that we announced at Meta Connect last year.

201

The Facebook and Instagram VR apps.

202

Both of those applications have been entirely built with React Native,

203

showcasing just how far the framework has come in supporting advanced high -performance applications.

204

Thanks to React Native, those teams were able to deliver beautiful experiences across platform,

205

all while reusing a lot of existing code and components from web.

206

But those are not just port -to -web versions, right?

207

We added new specific features for VR devices.

208

For example, on Instagram VR, we now show 3D images with a beautiful parallax effect.

209

This feature is unique to VR, and thanks to AI, we can now create a parallax effect for images that weren't originally captured in 3D.

210

This means that any photo can be transformed into a more immersive, dynamic experience, making your Instagram feed come alive in a whole new way.

211

So this feature demonstrates again how AI and React Native together can unlock possibilities that were previously out of reach.

212

So now you're curious about VR, right?

213

Well, the great news is, today, you can also build for VR using React Native.

214

We're thrilled to announce that the Expo Go app is now available on the Meta Horizon Store.

215

Yes, folks.

216

This is a huge milestone for both

217

React Native and Expo.

218

With Expo Go in VR, you can preview and test your projects directly inside a headset, making it easier than ever to build immersive experiences.

219

In this video, you'll see a developer using ExpoGo on Quest, making changes to the React Native project, and instantly seeing those updates in real time,

220

thanks to Odd Reload, now in VR.

221

And on VR, the possibility goes far beyond what you could do on mobile.

222

In this video, you'll see how

223

React Native enables you to leverage VR -specific APIs, such as accessing the ad set,

224

pass -through cameras, rendering your avatar directly inside your app, and so on.

225

These capabilities open up a whole new world of interactive and engaging experience.

226

The app you see on screen is available on GitHub at the URL that you see over here, and we'll be releasing more libraries to access

227

Horizon -specific APIs, such as in -app purchases,

228

notifications, and much more, with detailed guides and examples on how to use those APIs in the coming months.

229

And as we have seen, React Native runtime and adoption have reached new heights.

230

But there is another growth area that we want to spotlight, which is tooling.

231

Over the past years, we have seen major advancements in developer tools,

232

libraries, and framework that will make developing with React Native more enjoyable than ever.

233

So let's take a closer look at some of those.

234

Well, first, we couldn't talk about tooling without mentioning Expo.

235

So we want to take a brief moment to look at their latest release, Expo SDK 54.

236

With this release, you will get a bunch of new features, such as support for React Native 81, Liquid Glass, and pre -compiled binaries for iOS.

237

Also, Expo just announced the Expo App Awards, an initiative to spotlight some of the most beautiful and innovative

238

Expo apps out there, giving well -deserved recognition to the talented developers behind them.

239

And finally, we also want to mention

240

Expo launch, which allows to ship your application to stores faster than ever before.

241

And if you want to learn more about it, don't miss Evan's talk later today.

242

So, folks, I think that

243

Expo has been, like, really groundbreaking for React Native.

244

So, again, they really deserve a huge round of applause.

245

Please.

246

Yes.

247

So let's move on to the first party side, because we want to celebrate our beloved

248

React Native DevTools.

249

Since we launched it last year, we saw huge community adoption.

250

In case you don't know, React Native DevTools was a complete rebuild of our debugger architecture, closely integrated with React Native and Hermes.

251

It's a focused product with a focused set of features,

252

addressing fundamental reliability issues which have affected the React Native ecosystem for a number of years.

253

All while offering a cohesive experience which is aligned with the web, with the same web experience that you're familiar with on web.

254

And again, React Native DevTools has been a huge hit with the community.

255

And because we built

256

React Native tools on standardized web debugging protocols, this has enabled third -party tooling,

257

such as Raidon IDE, to build upon our core.

258

In this video, you'll see how Raidon IDE now offers practical features like inline breakpoints.

259

This means you can now manage, set, and hit breakpoints right where you've read your code, making debugging for React Native faster and more intuitive.

260

But this is just a sneak peek of where the tooling of React Native has arrived so far.

261

I know you folks in the audience are eager to hear about some newly released features for React Native.

262

So to talk about new capabilities, I'm excited to invite on stage my colleague Ruben and Alex.

263

Hi, everyone.

264

I'm Ruben, and I work on the React team at Meta.

265

I'm very excited to be here to talk to you about the progress we've made bringing new capabilities to React Native.

266

In the last few years,

267

we've put a lot of effort into rolling out the new architecture and making it easier for people to adopt it.

268

We have been talking about how it improves performance and quality, and that it's a solid foundation to build what's coming next.

269

Now that it's here, we want to show you all the value that we're getting from it.

270

First of all, many libraries in the ecosystem have not only been adapted to work with the new architecture,

271

but have been completely reimagined to do things they could not do before.

272

Reanimated 4 is a great example of this.

273

It's a full rewrite of the library built specifically for the new architecture.

274

It has all the features available in previous versions and brings new ones like CSS animations and transitions,

275

making it easier than ever to build spectacular user experiences.

276

Flashlist v2 and legendlist, the most popular community libraries for lists in React Native, have also been completely written from scratch to leverage the new architecture.

277

Features like synchronous layout access allow them to make leads faster using less resources.

278

All this with a cross -platform implementation written exclusively using JavaScript.

279

And it's not just well -established libraries adapting to the new architecture.

280

React Native and Reached is a new library that provides a fully native

281

Reached text editor.

282

And it was created targeting the new architecture from day one.

283

It is so exciting to see how our community is embracing the new architecture and building amazing products and libraries with it.

284

Now, let's take a look at what we're doing with it within the React Native runtime.

285

I just talked about lists and how community libraries are innovating to improve performance and capabilities of lists today.

286

The new architecture give us exceptional control over the 3D model and blocking very exciting capabilities, like synchronous rendering.

287

We are currently leveraging this flexibility

288

to experiment with new primitives and abstractions in the runtime

289

that will allow us to bring lists in React native to the next level.

290

If you want to learn more about this, don't miss Luna's talk on this topic later today.

291

Another big area where the new architecture is driving innovation is web convergence.

292

Last year, we talked about a shift in how we saw cross -platform development, from being inspired by the web to being aligned with it.

293

That means evolving

294

React Native to support more web capabilities that are idiomatic in React apps.

295

React Strict DOM allows us to start experimenting with that vision today.

296

It is implemented as a standalone library, fully filling a subset of the web stack, like HTML elements and CSS.

297

Also, if you want to learn more about this, Nicholas Gallagher is going to talk about it later today.

298

Some of the functionality that

299

React Strict DOM is meant to provide require a deeper integration with the runtime, runtime and could not be implemented in user land.

300

Because of this, we've invested in the implementation of new web capabilities in the React Native runtime directly.

301

And I'm very excited to share with you what we're going to bring to the community very soon, starting with DOM APIs.

302

guys.

303

The DOM is a web interface that represents the application UI as a tree of nodes.

304

It is the main API that allowed us to go from static HTML documents to highly interactive web apps.

305

In React apps, it's what the React DOM renderer uses under the hood to render our components.

306

We rarely need to use them directly, but there are some important use cases for which some of these APIs are a necessary escape hatch.

307

So we've implemented some of them.

308

Here you can see a small sample of how some of those APIs are used on React apps on web.

309

And starting today in version 82, also in React Native.

310

We've added support for other web capabilities in the past in React Native,

311

but this is the first time that we had an imperative API that integrates directly with the React Native Renderer.

312

With these APIs, you can access the DOM representation of any native component in your application.

313

You can get information about the layout, their position on the screen, their size, margins, and so on.

314

You can also traverse the tree through links to parent and child nodes.

315

And also for the first time in React Native, it provides access to text nodes.

316

And they also provide access to a new type of node, the document, which represents the root of the tree

317

and provides useful methods like get element by ID to access any arbitrary nodes in the tree.

318

Thanks to this, more code can now be shared between

319

React Native and web.

320

In this case, you can share all of it using React Strictdom.

321

Thanks.

322

This is, of course, a very simple example showcasing some of the new APIs.

323

But the API changes are much larger than that.

324

We've added more than 50 new properties and methods across 10 net new web interfaces.

325

As a more practical example, this is one of the core APIs that allowed us to use

326

Visual Completion Tracker in React Native Apps at Meta.

327

VC Tracker is our internal JavaScript library to help us understand the performance of user or navigations,

328

which we've been using for years on websites like Facebook and Instagram.

329

It doesn't only give us the duration of these interactions,

330

but it also gives us a very deep understanding of how our users experience the loading stages in the page.

331

This is how it works.

332

When we detect a mutation on the page, we use DOM APIs to detect the content and the location of the inserted views on the screen.

333

Then, when the interaction has completed,

334

we can go back and determine what percentage of pixels rendered in those mutations made it to the final UI.

335

Thanks to these web convergence efforts, we were able to bring that feature to React Native Apps, reducing most of its existing code.

336

And we're not stopping there.

337

We are paying attention to how our community is using things like

338

React Strict DOM and finding ways to accelerate our vision for cross -platform React apps.

339

So please stay tuned for future announcements on new exciting web APIs coming to React Native in the future.

340

If you want to start using DOM APIs today, please check the new documentation that's available on our website.

341

Now, Alex will tell us about more exciting capabilities that we're bringing to React Native.

342

ALEX KOMOROSKEYSKI - Thanks, Ruben.

343

Confidenting these new DOM APIs, I'm very happy to talk about new performance APIs and tooling coming to React Native.

344

Performance is a huge focus for us.

345

Having a fast and responsive app is pivotal to good user experience.

346

This is something we've always cared about in the React team, and we've gone to great lengths to optimize

347

React Native over the years to deliver amazing experiences out of the box.

348

But we haven't always given people the tools they need to understand and improve their own app performance,

349

or in particular, concepts and tooling that are standardized, understandable, and easy to work with.

350

Today, that changes as we're excited to bring the web performance APIs to React Native.

351

These are new web -aligned performance events, as well as new runtime JavaScript APIs for apps to report measurements and tap into native details,

352

all with minimal overhead.

353

React Native now supports event timings, which for the first time give you visibility inside the runtime,

354

from the start of a user user interaction through the rendering pipeline to paint, following the familiar web rendering model.

355

This means that event timings can indicate the responsiveness of your app, the time between user input and UI updates.

356

And being able to instrument these timings means we can identify potential bottlenecks in user experience.

357

We're also providing new access to the JavaScript thread by exposing long tasks, tasks on the event loop that block and interrupt rendering across multiple frames,

358

which can also indicate degraded performance.

359

User timings allow apps to report their own custom performance events with labels, metadata, and categorization.

360

Use performance .mark to label a moment in time, or performance .measure to record a span in time.

361

These APIs can be thought of like logs, but better, recording events in high precision that will be rendered graphically in the performance timeline.

362

User timings can be used by both apps and libraries, and in fact, they're the mechanism used by React's next generation performance profiling,

363

which Ruslan demoed yesterday.

364

Performance Observer gives apps efficient access to read these performance timings.

365

It's great for measuring performance in production, and it's useful if you want to report telemetry

366

and see what's really slowing down performance across the real devices in your app's install base.

367

So these new APIs are really useful building blocks for measuring performance, giving us more capabilities aligned with standardized web concepts.

368

We have new performance events and a new API for accessing them via the runtime, even in production.

369

But we also need some way to conveniently understand these performance characteristics during development.

370

And of course, when you need to understand your React Native app, we have React Native DevTools.

371

Yeah.

372

Today, we're excited to announce that the Performance Panel is coming to React Native DevTools.

373

And this is a really huge deal, bringing everything we've just seen together.

374

It's packed with new and familiar capabilities to deeply inspect the performance of your app, and really to understand everything your app is doing.

375

With the performance panel, you can take a recording of an interaction

376

or journey and receive a detailed profiling trace in a timeline view.

377

This is organized in expandable, synchronized performance tracks, just like on the web.

378

In React Native, we're supporting performance events from various sources, including JavaScript samples, user timings, and from React.

379

With JavaScript samples, you can see what code is taking time in Hermes and what's been and scheduled on the event loop.

380

You get a visual flame graph reflecting the cool stack of your application.

381

This hides framework code by default, helping you focus on your business logic.

382

User timings are a place for custom performance events in the timeline, such as those recorded by performance mark and performance measure.

383

For example, the Facebook app uses

384

Relay and records user timings corresponding with network and lifecycle transitions.

385

Having these custom events can be great markers to highlight performance metrics that matter for your application.

386

And with the React components and scheduler tracks,

387

you can see the component stack being rendered over time and understand the operations and phases of the scheduler.

388

This includes cascading updates, which is where a new update was scheduled during a render.

389

These events are specifically highlighted in the performance panel as they're a common pattern for React performance issues.

390

You can learn more about the React performance tracks on the React website, or again by watching Rustan's talk from yesterday.

391

This tooling is really powerful, and this is just the beginning.

392

Our team is heavily invested in improving app performance across our range of target devices.

393

Our goals include offering optimized performance build in open source, lighting up more of the performance features that are available on web, and integrating MCP.

394

As well as this, we want to innovate where it makes sense to make these features more proactive and useful.

395

And we're working with the Chrome team to build out the trace event format, performance panel, and other areas.

396

Next, let's talk about network inspection.

397

And yes, we're bringing the network panel to React Native Core.

398

This is a native implementation of network inspection in our modern debugger stack, meaning it will work consistently and fully across all

399

React Native apps.

400

We support fetch, XHR, and the image component out of the box.

401

The network panel records automatically, and just like on web, you can inspect request URLs,

402

metadata, timings, and response payloads.

403

And we support rich response previews for both text and image data, bringing across these familiar debugging features from the web.

404

Our support for network expansion is also deeply integrated into the whole

405

React Native DevTools experience in a couple of new and important ways.

406

First, with support for request initiator.

407

Requests show the symbolicated JavaScript call site, so you can immediately understand which piece of code fired off a request.

408

Look at that.

409

And React Native now populates the network track in the performance panel.

410

This is such a useful integration, making the performance timeline even richer.

411

Network timings are synchronized with all other performance events, providing useful context for what part of your app is running,

412

as well as helping you debug slow responses and unwanted request waterfalls.

413

With the performance panel and the network panel, we're happy to provide a comprehensive set of capabilities within

414

React Native DevTools.

415

And with our network support, we're exposing a third -party integrator API for frameworks and specialist libraries to hook into our native reporting layer.

416

And we've got one more change to share.

417

We're rolling out a first -class desktop experience for React Native DevTools.

418

Our new desktop app, which will come out of the box, addresses a number of quality of life issues.

419

It features zero setup with no browser requirement, one window per app, and windowing improvements,

420

such as auto -raising when hitting a breakpoint, and saved window arrangements across launches,

421

remembering the position of each window for the target app it was connected to.

422

We're so excited about all of these new developer capabilities.

423

We're rolling out DOM APIs today in React Native 82.

424

And our other features will be landing in React Native 83, planned for the end of the year.

425

Now it's over to Ricardo to talk about our broader future plans.

426

Ricardo.

427

Hi everybody.

428

I'm Ricardo.

429

I'm a software engineer in the React team at Meta.

430

And wow, have you seen how many new features are coming up for React Native this year?

431

And they are all based on the new architecture.

432

If you were following us in the last conferences and talks that we gave over the year, there was one sentence that we kept repeating,

433

and that is, the new architecture is the future of React Native.

434

We did a lot of work in the past months to get to this point.

435

we started last year i mean the new architecture started in 2018

436

but last year we moved it from experimental to beta

437

and you could start using that in your application

438

and testing out to see how it was performing for you then five months later in october we released react native 076.

439

it was the first release of react native where the new architecture was enabled by default

440

And as you've seen previously during this keynote, companies like Shopify already started using the new architecture in production successfully.

441

And that's why in May, we decided to freeze the legacy architecture.

442

That meant that at Meta, we were not using the legacy architecture anymore.

443

We were not accepting pull requests against it

444

and we are not even testing the legacy architecture before releasing a new version of react native

445

so we basically deprecated the legacy architecture

446

so that's why today starting from react native 082 is

447

time to make the new architecture the only architecture or more simply the react native architecture.

448

Having a single architecture has a lot of benefits, of course.

449

The first one that we discover is bundle size reduction.

450

So in our preliminary test, we have seen an improvement in bundle sizes for React Native up to one megabyte.

451

And the second benefit is bundle time, sorry, build time reduction.

452

In iOS, for example, where we don't have pre -compiled binaries as default just yet,

453

our example application went from 300 seconds to build to 140 seconds.

454

Having a single architecture gives you a simpler mental model for you as an app developer or a library maintainer.

455

You don't have to worry about the next library that you want to use in your app,

456

whether it will work with the current architecture of your app.

457

Because there is only one architecture, so the library will work.

458

And for library maintainer, they only have to care about the new architecture when they develop the new library.

459

So this means that the whole ecosystem can develop new features faster and in a simpler way.

460

The only architecture means that you cannot opt out from the new architecture anymore.

461

So the methods that you learned over the past few months to go back to the legacy architecture, they are going to simply be ignored,

462

starting from React Native 0 .82.

463

So your app will start always with the new architecture turned on.

464

And if you try to forcibly enable the legacy architecture, for example, by manually instantiating in the bridge,

465

well, you're going to see this exception or this exception.

466

So please don't do that.

467

If you're not on the new architecture just yet, we want to know why.

468

So please, if you find somebody with the blue t -shirt, come to us.

469

Tell us what is blocking you from adopting the new architecture.

470

We are very committed to help you out and understand how we can unblock the remaining steps for you.

471

But today I also want to provide you some guides on how to migrate

472

if you are on an older version of React Native.

473

So listen up.

474

The first step for you is to migrate it to React Native 0 .81.

475

That's the last version where we support bot architecture.

476

And it's the best version for you to try

477

and enable the new architecture and see how the app performs

478

and what you have to change to make sure that everything runs smoothly.

479

So once you have done that, our suggestion is to move to 0 .82, our latest release.

480

This will make for you much easier to update to the next version of React Native

481

that we're going to release in the next future.

482

If you are on the new architecture already instead, you'll probably reach this point by leveraging interop layers.

483

Those are an abstraction layer that we created in the last couple of years

484

that allows you to use legacy libraries also on your new architecture app.

485

We have good news for you.

486

Interop layers are going to stay for the foreseeable future.

487

We want for the community to have a smooth transition between the legacy architecture and the new architecture, and we don't have plans to remove them.

488

The removal of the doubt is a transparent change for people already on the new architecture.

489

And library will keep working as they are doing today because we are not removing any class in 0 .82.

490

Of course, the plan is to get there, is to remove the legacy architecture.

491

So today we are in this situation where we are not allowing you to use the new architecture, the legacy architecture in 0 .82.

492

But starting from tomorrow, we are going to start removing classes from the code base.

493

This is the step that we need to push in order for you to get all the benefits that I described before.

494

So the new architecture is not the future of React Native anymore.

495

It's the present of of React Native, and it is the only architecture for React Native.

496

It is the foundation for smaller bundle, faster builds, and for new features such as DOM API,

497

new evolution of the current libraries, and even for new libraries to be developed.

498

And we are just getting started.

499

At Meta, we are already working on a lot of new features that we're going to present in the next future.

500

If you're not on the new architecture, you are missing out everything that we described today during the keynote

501

and everything that we released in the past few versions of React Native.

502

Now, there is one thing we didn't talk about over the keynote today, and this thing is Hermes.

503

Hermes is our JavaScript engine tailored specifically to improve performances of React Native application.

504

And today, we have another announcement for you guys, and that is Hermes V1.

505

Hermes V1 is the next evolution of our JavaScript engine, with improvements on the virtual machine and the compiler for better performance.

506

It is the foundation for just -in -time compilation and JavaScript -to -native compilation,

507

something that we presented in the past couple of years with under the name of static Hermes.

508

As I mentioned, that Hermes v1 comes with performance improvement.

509

But here are the data to prove that.

510

We run Hermes v1, comparing it against the current version of Hermes with a set of synthetic benchmark from the JavaScript ecosystem.

511

And we have seen Hermes v1 outperforming current version of Hermes across the board.

512

and with an average improvement of 60%.

513

But as Josefona mentioned yesterday during his talk, synthetic benchmark only tells part of the story, right?

514

So we also try to enable Hermes v1 in a real -world, complex application which is completely open source, the Expensify app.

515

And we measure a few metrics, such as total time to interactive, bundle time loading, and content time to interactive.

516

And we have seen improvements in Hermes v1 against current version of Hermes up to 9%.

517

We also run the same test using low -end

518

Android devices, and we have seen similar improvements on the same metrics up to 7 .6%.

519

Hermes v1 is not only about performance, but it also comes with support for modern JavaScript features natively.

520

We are introducing support for ES classes with public and private class fields, Latin cost binding, async function,

521

and new set methods, and many more new features.

522

The catch here is that you can already write your application using those features in your TypeScript code,

523

but today they are going through Babel plugins and polyfills.

524

Hermes V1 supports those natively.

525

That means that we can get rid of all the polyfills and embrace smaller bundles and faster loading time for your app.

526

Hermes V1 is available starting today as an experimental feature in Reignative 0 .82.

527

In our blog post, you can find all the instruction to enable it in your application,

528

and you will have to build from source to actually integrate

529

Terms v1 in your app.

530

We want to say a huge thank you to people from Software Mention,

531

which helped us rolling out this new feature in the last version of React Native.

532

So a round of applause for Software Mention, please.

533

And now, to wrap up the keynote and to kickstart the second day of the conference, I want to call back on stage Jorge.

534

So good to see that Hermes is no longer static.

535

What a presentation we had.

536

We saw our React Native community is growing and getting stronger every day.

537

We looked into new web -aligned capabilities with DOM and performance APIs.

538

And quality of life improvements made to our tooling.

539

And we've heard about the foundation of the future of React Native with Hermes v1.

540

What an exciting year we had.

541

But the thing I'm more excited about is what happened over this decade.

542

And what happened over this decade?

543

Well, I think we all know what happened.

544

We fundamentally changed the way that a lot of people think about native app development.

545

And a lot of native UI frameworks have taken notice and have been influenced by this work.

546

And it's just, I guess, how many native platforms were influenced by the work we've done with React and React Native?

547

Well, this is just an approximation.

548

Thank you, Christopher.

549

But the number of frameworks influenced by our work is roughly all of them.

550

React and React Native's approach to app development with features like declarative UI programming, component -based architecture, state management,

551

hot preload, and our focus on developer experience, they're all industry standards now.

552

And we haven't done it ourselves.

553

We did it with all of you.

554

So I want to take this amazing community of React and React Native developers for getting us there.

555

A round of applause to all of you.

556

Thank you so much for being with us today and hearing about the future of React Native.

557

And I hope you have a wonderful rest of the day and the conference.

558

Thank you so much.

アプリをダウンロード

流暢に話すために必要なすべて

AI発音採点文ごとに採点

IPA練習すべての音をマスター

単語学習自分の単語帳を作る

単語ゲーム遊びながら覚える

QRをスキャン

Download on theApp Store Get it onGoogle Play

FOR YOU

このレッスンの語彙とスピーキングのポイント

このスピーキングレッスンは、動画「React Conf 2025 React Native Keynote」を教材にしています。繰り返し出てくる語は次のとおりです：react, native, app, architecture, performance。この動画には、シャドーイング用の文が558文、単語が7315語あります。音声の長さは54:44です。話す速さは1分あたり約134語で安定しており、シャドーイングしやすいペースです。英語の頻出3,000語に含まれる単語は80%だけなので、語彙は難しめです。

この動画の重要語彙

動画に出てくる覚えておきたい単語15語を、発音と意味つきで紹介します。

単語	発音	意味
architecture 名詞	/ˈɑː.kɪˌtɛk.t͡ʃə/	建築, 建築学
capability 名詞	/ˌkeɪ.pəˈbɪl.ɪ.ti/	能力
timing 名詞	/ˈtaɪmɪŋ/	タイミング
ecosystem 名詞	/ˈikoʊˌsɪstəm/	生態系
legacy 名詞	/ˈlɛɡəsi/	遺産
framework 名詞	/ˈfɹeɪm.wɜːk/	骨組み
migration 名詞	/maɪˈɡɹeɪʃ(ə)n/	移住
component 名詞	/kəmˈpoʊ.nənt/	部分
leverage 名詞	/ˈlɛv.(ə.)ɹɪd͡ʒ/	レバレッジ, レバ
desktop 名詞	/ˈdɛsktɒp/	机の上
stack 名詞	/stæk/	塚
bundle 名詞	/ˈbʌn.dl̩/	束
showcase 名詞	/ˈʃoʊˌkeɪs/	飾り棚, ショーケース
applause 名詞	/əˈplɔːz/	拍手
layer 名詞	/ˈleɪ̯ɚ/	層, 膜

動画に出てくる句動詞

単語	発音	意味
slow down 動詞		遅らせる
check out 動詞		試験する, 検査する
go back 動詞		戻る, 帰る
miss out 動詞		逃す
zoom out 動詞	/ˌzuːm ˈaʊt/	ズームアウトする, 縮小する

繰り返し練習したい文

動画に出てくる短く完結した文です。日常会話でそのまま使えます。

I'm a runner myself and I love this app.
Next, let's talk about network inspection.
That's the last version where we support bot architecture.

この動画の文法

話し手がよく使っている文型を、動画の実際の表現とともに紹介します。

文型	動画での表現
現在完了進行形 have/has been + -ing — 以前に始まり今も続いている動作	have been talking · we've been using
現在完了形 have/has + 過去分詞 — 過去の出来事が今も関係している	has gone · We've come · has seen
受動態 be + 過去分詞 — 誰がするかより、何が起きるかに焦点を当てる	was built · are crafted · are rendered
関係詞節 who / which + 節 — 人や物について情報を加える	Union which will · Conf, which is · spotlight, which is

注意したい発音

話し手はwe're, we've, I'mなど、短縮形や弱形を95回使っています。聞こえたとおりの短い形で発音しましょう。

「th」の音: smooth /smuːð/, synthetic /sɪnˈθɛtɪk/, thrill /θɹɪl/, smoothly /ˈsmuːðli/, thread /ˈθɹɛd/
「sh」と「zh」の音: migration /maɪˈɡɹeɪʃ(ə)n/, showcase /ˈʃoʊˌkeɪs/, integration /ˌɪn.tɪˈɡɹeɪ.ʃən/, transition /tɹænˈzɪʃ.ən/, implementation /ˌɪmplɪmənˈteɪʃən/
長い単語（アクセントの位置に注意）: architecture /ˈɑː.kɪˌtɛk.t͡ʃə/, capability /ˌkeɪ.pəˈbɪl.ɪ.ti/, developer /dɪˈvɛləpɚ/, ecosystem /ˈikoʊˌsɪstəm/, integration /ˌɪn.tɪˈɡɹeɪ.ʃən/

日本語話者が苦手な音：

/r/ と /l/ の区別 — /l/ は舌先を歯茎につけ、/r/ はどこにもつけない: leverage /ˈlɛv.(ə.)ɹɪd͡ʒ/, practical /ˈpɹæk.tɪ.kəl/, experimental /ɪkspɛɹəˈmɛntəl/, thrill /θɹɪl/, accelerate /ɪkˈsɛl.əˌɹeɪt/
/v/ — /b/ にならないように、上の歯を下唇に当てる: developer /dɪˈvɛləpɚ/, leverage /ˈlɛv.(ə.)ɹɪd͡ʒ/, interactive /ˌɪn.tɚˈæk.tɪv/, evolution /ˌiːvəˈluːʃ(ə)n/, innovation /ˌɪn.əˈveɪ.ʃən/
/f/ — 「フ」ではなく、上の歯と下唇で出す: framework /ˈfɹeɪm.wɜːk/, default /dɪˈfɔlt/, format /ˈfɔːɹ.mæt/, successfully /səkˈsɛs.fə.li/, efficient /ɪˈfɪʃənt/

この動画での練習方法

まず声を出さずに動画を最後まで聞き、知らない単語をメモします。
通常の速度で一文ずつシャドーイングし、話し手のリズムに合うまで繰り返します。
自分の声を録音して元の音声と比べます。architecture, capability, timingなどの単語に特に注意しましょう。

シャドーイングとは？英語上達に効果的な理由

シャドーイング（Shadowing）は、もともとプロの通訳者養成プログラムで開発された言語学習法で、多言語習得者として知られるDr. Alexander Arguelles によって広く普及されました。方法はシンプルですが非常に効果的：ネイティブスピーカーの英語を聞きながら、1〜2秒の遅延で声に出してすぐに繰り返す——まるで「影（shadow）」のように話者を追いかけます。文法ドリルや受動的なリスニングと異なり、シャドーイングは脳と口の筋肉が同時にリアルタイムで英語を処理・再現することを強制します。研究により、発音精度、抑揚、リズム、連音、リスニング力、そして会話の流暢さが大幅に向上することが確認されています。IELTSスピーキング対策や自然な英語コミュニケーションを目指す方に特におすすめです。

シャドーイングのやり方: ステップ別の完全ガイドを読む →

シャドーイング練習: React Conf 2025 React Native Keynote - 動画で英語スピーキングを学ぶ

練習モードを選ぶ

アプリをダウンロード

おすすめ動画

Is React Native Dead? Shopify Is Leaving

The future unfolds! How to optimize Android apps for adaptive layouts

We've got separation of concerns wrong

Video

Trust the Process: How to Design Teams That Actually Work

The last real programmers are dying out...

How I deploy serverless containers for free

NVIDIA GTC 2025 - Keynote Highlights by NVIDIA CEO Jensen Huang

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

Go’s Big Mistake

Tim Cook’s Final Lines from Apple’s Q3 2026 Earnings Call

How To Land Your First Junior Dev Role