Issue 187 p{ margin:10px 0; padding:0; } table{ border-collapse:collapse; } h1,h2,h3,h4,h5,h6{ display:block; margin:0; padding:0; } img,a img{ border:0; height:auto; outline:none; text-decoration:none; } body,#bodyTable,#bodyCell{ height:100%; margin:0; padding:0; width:100%; } .mcnPreviewText{ display:none !important; } #outlook a{ padding:0; } img{ -ms-interpolation-mode:bicubic; } table{ mso-table-lspace:0pt; mso-table-rspace:0pt; } .ReadMsgBody{ width:100%; } .ExternalClass{ width:100%; } p,a,li,td,blockquote{ mso-line-height-rule:exactly; } a[href^=tel],a[href^=sms]{ color:inherit; cursor:default; text-decoration:none; } p,a,li,td,body,table,blockquote{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } .ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{ line-height:100%; } a[x-apple-data-detectors]{ color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; } table[align=left]{ float:left; } table[align=right]{ float:right; } .templateContainer{ max-width:600px !important; } a.mcnButton{ display:block; } .mcnImage,.mcnRetinaImage{ vertical-align:bottom; } .mcnTextContent{ word-break:break-word; } .mcnTextContent img{ height:auto !important; } .mcnDividerBlock{ table-layout:fixed !important; } body,#bodyTable{ background-color:#ffffff; } #bodyCell{ border-top:0; } h1{ color:#202020; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:28px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left; } h2{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:25px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left; } h3{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:18px; font-style:normal; font-weight:normal; line-height:150%; letter-spacing:normal; text-align:left; } h4{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:19px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left; } #templatePreheader{ background-color:#transparent; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px; } #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ color:#656565; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; text-align:left; } #templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{ color:#412951; font-weight:normal; text-decoration:underline; } #templateHeader{ background-color:#transparent; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:20px; padding-bottom:12px; } #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:20px; line-height:100%; text-align:center; } #templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{ color:#302c32; font-weight:bold; text-decoration:underline; } #templateBody{ background-color:#ffffff; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:32px; padding-bottom:48px; } #templateBody .mcnTextContent,#templateBody .mcnTextContent p{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; text-align:left; } #templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{ color:#302c32; font-weight:normal; text-decoration:underline; } #templateFooter{ background-color:#transparent; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px; } #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:14px; line-height:150%; text-align:center; } #templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{ color:#302c32; font-weight:normal; text-decoration:underline; } @media only screen and (min-width:768px){ .templateContainer{ width:600px !important; } } @media only screen and (max-width: 480px){ body,table,td,p,a,li,blockquote{ -webkit-text-size-adjust:none !important; } } @media only screen and (max-width: 480px){ body{ width:100% !important; min-width:100% !important; } } @media only screen and (max-width: 480px){ .mcnRetinaImage{ max-width:100% !important; } } @media only screen and (max-width: 480px){ .mcnImage{ width:100% !important; } } @media only screen and (max-width: 480px){ .mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{ max-width:100% !important; width:100% !important; } } @media only screen and (max-width: 480px){ .mcnBoxedTextContentContainer{ min-width:100% !important; } } @media only screen and (max-width: 480px){ .mcnImageGroupContent{ padding:9px !important; } } @media only screen and (max-width: 480px){ .mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{ padding-top:9px !important; } } @media only screen and (max-width: 480px){ .mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{ padding-top:18px !important; } } @media only screen and (max-width: 480px){ .mcnImageCardBottomImageContent{ padding-bottom:9px !important; } } @media only screen and (max-width: 480px){ .mcnImageGroupBlockInner{ padding-top:0 !important; padding-bottom:0 !important; } } @media only screen and (max-width: 480px){ .mcnImageGroupBlockOuter{ padding-top:9px !important; padding-bottom:9px !important; } } @media only screen and (max-width: 480px){ .mcnTextContent,.mcnBoxedTextContentColumn{ padding-right:18px !important; padding-left:18px !important; } } @media only screen and (max-width: 480px){ .mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{ padding-right:18px !important; padding-bottom:0 !important; padding-left:18px !important; } } @media only screen and (max-width: 480px){ .mcpreview-image-uploader{ display:none !important; width:100% !important; } } @media only screen and (max-width: 480px){ h1{ font-size:24px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ h2{ font-size:22px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ h3{ font-size:18px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ h4{ font-size:20px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ .mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templatePreheader{ display:block !important; } } @media only screen and (max-width: 480px){ #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ font-size:18px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templateBody .mcnTextContent,#templateBody .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } }
Featured: React Native Worklets, LegendKit CLI, React Native Survey results. and more!
Issue 187 • Open in browser
React Native Newsletter
This issue: React Native Worklets, LegendKit CLI, React Native Survey results, and more!
Welcome to another issue of React Native Newsletter!
There’s been a lot of updates in the React Native world lately, and we’re here to catch you up on all the coolest updates, tools, and happenings from around the community.
But first… a heads-up! Next week is going to be HUGE for Infinite Red. On Wednesday, March 26, make sure you’re following us on X, Bluesky, and LinkedIn—we’re dropping some epic announcements. Think themed podcast episodes, fresh blog posts, and one brand-new surprise we’re really excited about. Trust us, you won’t want to miss it.
Our friends at Callstack have just released their Ultimate Guide to React Native Optimization 2025. Last year, Callstack went on tour, providing free seminars on this topic, and I attended the one they presented in San Francisco, CA. It was super exciting and very informative. Be sure to download their PDF and give it a read.
Alright, let’s dive into this week’s newsletter!
The latest React Native release is 0.78.1
⚠️ We are aware of an incompatibility using resolver.unstable_enablePackageExports and the defaults from @react-native/metro-config. It will error with a redbox “interopRequireDefault is not a function”. Set resolver.unstable_conditionNames = ['react-native'] to mitigate. It will be fixed in 0.78.2 ⚠️
Fixed
- Deps: community-cli-plugin: resolve cli-server-api via peer dependency on cli (9ffbeadf8a by @robhogan)
- DevTools: Fix disconnections of DevTools when the network is under significant strain (9e47ed9a20 by @vzaidman)
Android specific
- Image: Fix Android Image defaultSource runtime error (665212e22c by @mateoguzmana)
- style: Fix elevation with border-radius set (#48982) (68dc582305 by @polovi)
iOS specific
- Initialization: Call
extraModulesForBridgecallback in the New Architecture. (97adbd897f by @Bruno125) - Initialization: Added custom load js block in bridge mode (bdc83cb129 by @zhongwuzw)
- Interop Layer: Properly pass
nilfor nullable parameters instead ofNSNullfor legacy modules (619d5dfbb2 by @cipolleschi) - TextInput: Fixes TextInput crashes when any text is entered while running as iOS app on apple silicon mac (282cdc9fb4 by @zhongwuzw)
There’s a lot more to discover in today’s issue. Enjoy!
Our top React Native picks this month
React Native articles, social media posts, and docs submitted by Infinite Red’s team of engineers.
React Native Worklets — multithreading library
Software Mansion announces react-native-worklets: their new React Native multithreading library powering Reanimated 4
Check it out here
How React Native Reanimated Updates Styles
This article is a deep dive into some of the underlying mechanisms of how React Native Reanimated updates styles from 3 types of props (Non-layout Props (UI), Layout Props (Native) and JS Props, each with their own specifications)
Check it out here
LegendKit CLI
LegendKit CLI is a tool for for installing free and paid utilities to your React Native project, from the legendary (and Legend) developer Jay Meistrich,. .
Check it out here
Build Your First Mobile App in 2025
This is a free YouTube course that guides inexperienced React Native developers through the process of building an Instagram-type app from scratch, using 2025 techniques.
Check it out here
New React Native Framework for Enterprise Apps
This framework is poised to be the successor to the React Native Community CLI.
Check it out here
Exposing SwiftUI Views to React Native: An Integration Guide
Reading this article, you’ll learn how to seamlessly integrate SwiftUI views in React Native and enhance your app’s iOS capabilities with SwiftUI superpowers.
Check it out here
State of React Native 2024 Survey Results Are In
Software Mansion has released the results of their annual State of React Native Survey.
Check it out here
React Native Directory VS Code Extension
Now you can effortlessly discover & integrate React Native libraries into your project, without leaving VS Code.
Check it out here
Transitive Dependencies and React Native Autolinking
Infinite Red’s own Tyler Williams wrote this blog because a particular question came up in his last two client projects: “Why don’t transitive native dependencies get autolinked?”
Check it out here
Open source highlights from the React Native community
Open source React Native projects, libraries, node modules, or components submitted by the community.
Legend Photos
Jay Meistrich, creator of Legend State and Legend List, has released an open source React Native macOS app.
Check it out here
iOS Simulator MCP Server
Josh Yoes, a brilliant engineer and React Native consultant at Infinite Red, created a Model Context Protocol (MCP) server for interacting with iOS simulators. This server allows you to interact with iOS simulators by getting information about them, controlling UI interactions, and inspecting UI elements. It’s useful for programs like Cursor to do their own QA for iOS UI changes
Check it out here
React Native Package Checker
Simplify your new architecture migration with this auditing tool.
“I used this for a client project…really helpful, saved me time.” - Dan Edwards, Senior React Native Engineer at Infinite Red
Check it out here
RNR 325 - Legend List with Jay Meistrich;
This week: Shopify’s Mustafa Ali joins Robin and Mazen to discuss Shopify’s React Native migration! Mustafa talks about how Shopify went all in on React Native, sharing how they improved performance, streamlined development, and boosted the open-source ecosystem!
RNR 324 - Migrating to Expo with Alfred Lieth Årøe
Migrating to Expo in 4 days! Alfred Lieth Årøe joins Robin and Mazen to share how he pulled off a smooth transition, the challenges he tackled, and why Expo was the right move for his app. He dives into upgrading dependencies, improving CI/CD, and how Expo simplified his workflow. Tune in!
RNR 323 - Static Hermes with Tzvetan Mikov
Tzvetan Mikov joins Jamon, Robin, and Mazen to discuss Static Hermes—how it improves React Native performance through bytecode and native compilation. They dive into optimization strategies, the role of typing, and what this means for developers. Plus, insights into Hermes’s evolution and what’s next for JavaScript performance in React Native!
RNR 322 - Building React Native Libraries With Builder Bob
Burak Güner joins Robin and Mazen to discuss React Native Builder Bob and Create React Native Library—tools that streamline building and maintaining React Native libraries. Plus, insights on upcoming features and the future of library development!
Issue 187 p{ margin:10px 0; padding:0; } table{ border-collapse:collapse; } h1,h2,h3,h4,h5,h6{ display:block; margin:0; padding:0; } img,a img{ border:0; height:auto; outline:none; text-decoration:none; } body,#bodyTable,#bodyCell{ height:100%; margin:0; padding:0; width:100%; } .mcnPreviewText{ display:none !important; } #outlook a{ padding:0; } img{ -ms-interpolation-mode:bicubic; } table{ mso-table-lspace:0pt; mso-table-rspace:0pt; } .ReadMsgBody{ width:100%; } .ExternalClass{ width:100%; } p,a,li,td,blockquote{ mso-line-height-rule:exactly; } a[href^=tel],a[href^=sms]{ color:inherit; cursor:default; text-decoration:none; } p,a,li,td,body,table,blockquote{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } .ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{ line-height:100%; } a[x-apple-data-detectors]{ color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; } table[align=left]{ float:left; } table[align=right]{ float:right; } .templateContainer{ max-width:600px !important; } a.mcnButton{ display:block; } .mcnImage,.mcnRetinaImage{ vertical-align:bottom; } .mcnTextContent{ word-break:break-word; } .mcnTextContent img{ height:auto !important; } .mcnDividerBlock{ table-layout:fixed !important; } body,#bodyTable{ background-color:#ffffff; } #bodyCell{ border-top:0; } h1{ color:#202020; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:28px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left; } h2{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:25px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left; } h3{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:18px; font-style:normal; font-weight:normal; line-height:150%; letter-spacing:normal; text-align:left; } h4{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:19px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left; } #templatePreheader{ background-color:#transparent; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px; } #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ color:#656565; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; text-align:left; } #templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{ color:#412951; font-weight:normal; text-decoration:underline; } #templateHeader{ background-color:#transparent; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:20px; padding-bottom:12px; } #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:20px; line-height:100%; text-align:center; } #templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{ color:#302c32; font-weight:bold; text-decoration:underline; } #templateBody{ background-color:#ffffff; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:32px; padding-bottom:48px; } #templateBody .mcnTextContent,#templateBody .mcnTextContent p{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; text-align:left; } #templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{ color:#302c32; font-weight:normal; text-decoration:underline; } #templateFooter{ background-color:#transparent; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px; } #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ color:#302c32; font-family:‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size:14px; line-height:150%; text-align:center; } #templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{ color:#302c32; font-weight:normal; text-decoration:underline; } @media only screen and (min-width:768px){ .templateContainer{ width:600px !important; } } @media only screen and (max-width: 480px){ body,table,td,p,a,li,blockquote{ -webkit-text-size-adjust:none !important; } } @media only screen and (max-width: 480px){ body{ width:100% !important; min-width:100% !important; } } @media only screen and (max-width: 480px){ .mcnRetinaImage{ max-width:100% !important; } } @media only screen and (max-width: 480px){ .mcnImage{ width:100% !important; } } @media only screen and (max-width: 480px){ .mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{ max-width:100% !important; width:100% !important; } } @media only screen and (max-width: 480px){ .mcnBoxedTextContentContainer{ min-width:100% !important; } } @media only screen and (max-width: 480px){ .mcnImageGroupContent{ padding:9px !important; } } @media only screen and (max-width: 480px){ .mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{ padding-top:9px !important; } } @media only screen and (max-width: 480px){ .mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{ padding-top:18px !important; } } @media only screen and (max-width: 480px){ .mcnImageCardBottomImageContent{ padding-bottom:9px !important; } } @media only screen and (max-width: 480px){ .mcnImageGroupBlockInner{ padding-top:0 !important; padding-bottom:0 !important; } } @media only screen and (max-width: 480px){ .mcnImageGroupBlockOuter{ padding-top:9px !important; padding-bottom:9px !important; } } @media only screen and (max-width: 480px){ .mcnTextContent,.mcnBoxedTextContentColumn{ padding-right:18px !important; padding-left:18px !important; } } @media only screen and (max-width: 480px){ .mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{ padding-right:18px !important; padding-bottom:0 !important; padding-left:18px !important; } } @media only screen and (max-width: 480px){ .mcpreview-image-uploader{ display:none !important; width:100% !important; } } @media only screen and (max-width: 480px){ h1{ font-size:24px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ h2{ font-size:22px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ h3{ font-size:18px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ h4{ font-size:20px !important; line-height:125% !important; } } @media only screen and (max-width: 480px){ .mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templatePreheader{ display:block !important; } } @media only screen and (max-width: 480px){ #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ font-size:18px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templateBody .mcnTextContent,#templateBody .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } } @media only screen and (max-width: 480px){ #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ font-size:16px !important; line-height:150% !important; } }
Featured: React Native Worklets, LegendKit CLI, React Native Survey results. and more!
Issue 187 • Open in browser
React Native Newsletter
This issue: React Native Worklets, LegendKit CLI, React Native Survey results, and more!
Welcome to another issue of React Native Newsletter!
There’s been a lot of updates in the React Native world lately, and we’re here to catch you up on all the coolest updates, tools, and happenings from around the community.
But first… a heads-up! Next week is going to be HUGE for Infinite Red. On Wednesday, March 26, make sure you’re following us on X, Bluesky, and LinkedIn—we’re dropping some epic announcements. Think themed podcast episodes, fresh blog posts, and one brand-new surprise we’re really excited about. Trust us, you won’t want to miss it.
Our friends at Callstack have just released their Ultimate Guide to React Native Optimization 2025. Last year, Callstack went on tour, providing free seminars on this topic, and I attended the one they presented in San Francisco, CA. It was super exciting and very informative. Be sure to download their PDF and give it a read.
Alright, let’s dive into this week’s newsletter!
The latest React Native release is 0.78.1
⚠️ We are aware of an incompatibility using resolver.unstable_enablePackageExports and the defaults from @react-native/metro-config. It will error with a redbox “interopRequireDefault is not a function”. Set resolver.unstable_conditionNames = ['react-native'] to mitigate. It will be fixed in 0.78.2 ⚠️
Fixed
- Deps: community-cli-plugin: resolve cli-server-api via peer dependency on cli (9ffbeadf8a by @robhogan)
- DevTools: Fix disconnections of DevTools when the network is under significant strain (9e47ed9a20 by @vzaidman)
Android specific
- Image: Fix Android Image defaultSource runtime error (665212e22c by @mateoguzmana)
- style: Fix elevation with border-radius set (#48982) (68dc582305 by @polovi)
iOS specific
- Initialization: Call
extraModulesForBridgecallback in the New Architecture. (97adbd897f by @Bruno125) - Initialization: Added custom load js block in bridge mode (bdc83cb129 by @zhongwuzw)
- Interop Layer: Properly pass
nilfor nullable parameters instead ofNSNullfor legacy modules (619d5dfbb2 by @cipolleschi) - TextInput: Fixes TextInput crashes when any text is entered while running as iOS app on apple silicon mac (282cdc9fb4 by @zhongwuzw)
There’s a lot more to discover in today’s issue. Enjoy!
Our top React Native picks this month
React Native articles, social media posts, and docs submitted by Infinite Red’s team of engineers.
React Native Worklets — multithreading library
Software Mansion announces react-native-worklets: their new React Native multithreading library powering Reanimated 4
Check it out here
How React Native Reanimated Updates Styles
This article is a deep dive into some of the underlying mechanisms of how React Native Reanimated updates styles from 3 types of props (Non-layout Props (UI), Layout Props (Native) and JS Props, each with their own specifications)
Check it out here
LegendKit CLI
LegendKit CLI is a tool for for installing free and paid utilities to your React Native project, from the legendary (and Legend) developer Jay Meistrich,. .
Check it out here
Build Your First Mobile App in 2025
This is a free YouTube course that guides inexperienced React Native developers through the process of building an Instagram-type app from scratch, using 2025 techniques.
Check it out here
New React Native Framework for Enterprise Apps
This framework is poised to be the successor to the React Native Community CLI.
Check it out here
Exposing SwiftUI Views to React Native: An Integration Guide
Reading this article, you’ll learn how to seamlessly integrate SwiftUI views in React Native and enhance your app’s iOS capabilities with SwiftUI superpowers.
Check it out here
State of React Native 2024 Survey Results Are In
Software Mansion has released the results of their annual State of React Native Survey.
Check it out here
React Native Directory VS Code Extension
Now you can effortlessly discover & integrate React Native libraries into your project, without leaving VS Code.
Check it out here
Transitive Dependencies and React Native Autolinking
Infinite Red’s own Tyler Williams wrote this blog because a particular question came up in his last two client projects: “Why don’t transitive native dependencies get autolinked?”
Check it out here
Open source highlights from the React Native community
Open source React Native projects, libraries, node modules, or components submitted by the community.
Legend Photos
Jay Meistrich, creator of Legend State and Legend List, has released an open source React Native macOS app.
Check it out here
iOS Simulator MCP Server
Josh Yoes, a brilliant engineer and React Native consultant at Infinite Red, created a Model Context Protocol (MCP) server for interacting with iOS simulators. This server allows you to interact with iOS simulators by getting information about them, controlling UI interactions, and inspecting UI elements. It’s useful for programs like Cursor to do their own QA for iOS UI changes
Check it out here
React Native Package Checker
Simplify your new architecture migration with this auditing tool.
“I used this for a client project…really helpful, saved me time.” - Dan Edwards, Senior React Native Engineer at Infinite Red
Check it out here
RNR 325 - Legend List with Jay Meistrich;
This week: Shopify’s Mustafa Ali joins Robin and Mazen to discuss Shopify’s React Native migration! Mustafa talks about how Shopify went all in on React Native, sharing how they improved performance, streamlined development, and boosted the open-source ecosystem!
RNR 324 - Migrating to Expo with Alfred Lieth Årøe
Migrating to Expo in 4 days! Alfred Lieth Årøe joins Robin and Mazen to share how he pulled off a smooth transition, the challenges he tackled, and why Expo was the right move for his app. He dives into upgrading dependencies, improving CI/CD, and how Expo simplified his workflow. Tune in!
RNR 323 - Static Hermes with Tzvetan Mikov
Tzvetan Mikov joins Jamon, Robin, and Mazen to discuss Static Hermes—how it improves React Native performance through bytecode and native compilation. They dive into optimization strategies, the role of typing, and what this means for developers. Plus, insights into Hermes’s evolution and what’s next for JavaScript performance in React Native!
RNR 322 - Building React Native Libraries With Builder Bob
Burak Güner joins Robin and Mazen to discuss React Native Builder Bob and Create React Native Library—tools that streamline building and maintaining React Native libraries. Plus, insights on upcoming features and the future of library development!
发布者