React Native Status pinned Β«Expo SDK 45 Released! π β‘Highlights: π SDK 45 includes React Native 0.68.1 π Updated UI for Expo Go, More runtime version validation β SDK 45 beta is not yet available on Snack or classic builds π₯ You can easily try SDK 45 beta by setting the EXPO_BETAβ¦Β»
React Native Skia - A fun API π
New Features: React Native Skia offers a wide range of APIs such as advanced image filters, shaders, SVG, path operations, vertices, and text layouts.This new API enables direct communication between JavaScript and native modules using C++ instead of asynchronous messages between the two worlds.
Collin Gray has beautifully written π about the New React Native Skia along with examples suggesting that this API itβs designed for everyone π§βπ».
https://shopify.engineering/react-native-skia-shopify?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter
New Features: React Native Skia offers a wide range of APIs such as advanced image filters, shaders, SVG, path operations, vertices, and text layouts.This new API enables direct communication between JavaScript and native modules using C++ instead of asynchronous messages between the two worlds.
Collin Gray has beautifully written π about the New React Native Skia along with examples suggesting that this API itβs designed for everyone π§βπ».
https://shopify.engineering/react-native-skia-shopify?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter
Shopify
React Native SkiaβFor Us, For You, and For Fun - Shopify
React Native Skia, an open source project, provides a set of powerful 2D drawing primitives that are consistent across iOS, Android, and the Web.
π3
π£ You should start looking for an alternative of Enzyme, why?
The fact is that Enzyme and React Native Testing Library are fundamentally different libraries, and Enzyme was never intended to be used with React Native.
Tanner West explains that the days of using Enzyme as a viable tool for React Native testing π§βπ» are drawing to an end.
Happy Reading π
https://medium.com/@tanner.west/never-use-enzyme-to-test-react-native-apps-726b57329c45
The fact is that Enzyme and React Native Testing Library are fundamentally different libraries, and Enzyme was never intended to be used with React Native.
Tanner West explains that the days of using Enzyme as a viable tool for React Native testing π§βπ» are drawing to an end.
Happy Reading π
https://medium.com/@tanner.west/never-use-enzyme-to-test-react-native-apps-726b57329c45
Medium
Never use Enzyme to test React Native apps
Enzyme emerged alongside React as one of the most popular React testing libraries. It provides a powerful API for querying the React DOMβ¦
π1
π’ Reanimated 3.0
Important features π£ :
β Fabric support
β Fully compatible with Reanimated 2 code
β No longer ship with pre-built binaries for Android
Read this 5 min article π to make things super clear about how, when, and who should upgrade, by Krzysztof Magiera.
https://blog.swmansion.com/announcing-reanimated-3-16167428c5f7?gi=f817c1fb2406
Important features π£ :
β Fabric support
β Fully compatible with Reanimated 2 code
β No longer ship with pre-built binaries for Android
Read this 5 min article π to make things super clear about how, when, and who should upgrade, by Krzysztof Magiera.
https://blog.swmansion.com/announcing-reanimated-3-16167428c5f7?gi=f817c1fb2406
Medium
Announcing Reanimated 3
Reanimated 3 release candidate is out with Fabric support. Learn when and how to upgrade from this blog post.
π₯5
π When to Use the keyExtractor Prop?
* keyExtractor helps indicate the ids of the list. The default keyExtractor function checks item.key, then item.id, if none of them were found, it throws an error. That's when specifying implicitly the key it's important!
Read this article π by Aman to know when to use and when not to use the keyExtractor in a FlatList component. π
Happy Reading π
https://amanhimself.dev/blog/use-key-extractor-in-react-native-flatlist/
* keyExtractor helps indicate the ids of the list. The default keyExtractor function checks item.key, then item.id, if none of them were found, it throws an error. That's when specifying implicitly the key it's important!
Read this article π by Aman to know when to use and when not to use the keyExtractor in a FlatList component. π
Happy Reading π
https://amanhimself.dev/blog/use-key-extractor-in-react-native-flatlist/
amanhimself.dev
When to use keyExtractor prop in React Native's FlatList | amanhimself.dev
π2
A better design pattern for instant feedback in React Native
by Andrei Barabas
Happy Reading β€οΈ!
https://medium.com/achieving-100ms/rfc-proposal-for-instant-feedback-3dcd4ae4b297
by Andrei Barabas
Happy Reading β€οΈ!
https://medium.com/achieving-100ms/rfc-proposal-for-instant-feedback-3dcd4ae4b297
Medium
A better design pattern for instant feedback in React Native
Part of the Achieving 100ms Series.
Do you know how to handle Deep Linking in React Native?
Deep Linking is a technique in which a given URL or resource is used to open a specific page or screen on mobile.
Also it brings significant improvements to the user experience of our mobile apps.
This blog π by Aman Mittal will help us to understand how to handle deep linking in a React Native app π±using React Navigation library.
Happy Reading β€οΈ
https://blog.jscrambler.com/how-to-handle-deep-linking-in-a-react-native-app/
Deep Linking is a technique in which a given URL or resource is used to open a specific page or screen on mobile.
Also it brings significant improvements to the user experience of our mobile apps.
This blog π by Aman Mittal will help us to understand how to handle deep linking in a React Native app π±using React Navigation library.
Happy Reading β€οΈ
https://blog.jscrambler.com/how-to-handle-deep-linking-in-a-react-native-app/
Jscrambler
How To Handle Deep Linking in a React Native App | Jscrambler
Deep linking is one of the best strategies to optimize the user experience of mobile apps. Learn how to set it up on your React Native apps.
π2
What is React Native capable of?
A team of consultants π§βπ» shared this post outlining their work - to show what React Native can handle, especially when considering how this was all done by the same team.
If youβre interested βΊοΈ in what cross-platform applications are capable of and why is it possible sometimes to save tons of money and not invest in iOS π± and Android developers, than you're welcome to read this excellent 8-min article π!
Happy Reading π
https://medium.com/@dev.family/what-is-react-native-capable-of-739cbadfc36d
A team of consultants π§βπ» shared this post outlining their work - to show what React Native can handle, especially when considering how this was all done by the same team.
If youβre interested βΊοΈ in what cross-platform applications are capable of and why is it possible sometimes to save tons of money and not invest in iOS π± and Android developers, than you're welcome to read this excellent 8-min article π!
Happy Reading π
https://medium.com/@dev.family/what-is-react-native-capable-of-739cbadfc36d
Medium
What is React Native capable of?
We are dev.family team and we want to share our cases of cross-platform development in the past couple of years.
β€1
React and React Native finally feel the same
If you're a developer of both React and React Native apps π±, it can be tough to switch between platforms because they feel so different.
In this article, Jay explains the 3 main challenges of the web/mobile cross-platform today: styling, animation, and navigation.
Happy Reading π
https://legendapp.com/dev/react-and-native
If you're a developer of both React and React Native apps π±, it can be tough to switch between platforms because they feel so different.
In this article, Jay explains the 3 main challenges of the web/mobile cross-platform today: styling, animation, and navigation.
Happy Reading π
https://legendapp.com/dev/react-and-native
π3
React Native JSI/TurboModules pitfalls
Oscar has significant experience with JSI. He is the authorπ§βπ» of React Native packages, and also has a Youtube βΆοΈ playlist dedicated just to JSI.
In this article, Oscar is giving us interesting feedback on the use of various languages ββfor the native side and on the difficulty to benchmark JSI appropriately compared to the old bridge architecture.
Hope you will like this interesting article!
https://ospfranco.com/post/2022/06/05/jsi-pitfalls/
Oscar has significant experience with JSI. He is the authorπ§βπ» of React Native packages, and also has a Youtube βΆοΈ playlist dedicated just to JSI.
In this article, Oscar is giving us interesting feedback on the use of various languages ββfor the native side and on the difficulty to benchmark JSI appropriately compared to the old bridge architecture.
Hope you will like this interesting article!
https://ospfranco.com/post/2022/06/05/jsi-pitfalls/
Oscar Franco
React Native JSI/TurboModules pitfalls
Here is the latest information dump my findings with React Nativeβs JSI.
React Native Web v0.18 is out! π
Important Changes:
Read the release notes for full details and comment below what do you think about this release! π
https://github.com/necolas/react-native-web/releases/tag/0.18.0
Important Changes:
- StyleSheet rewrite for React 18 βοΈ
- Improves bi-directional layouts
- Improves support for multiple windows & shadow roots.
- Drops legacy browser support
Read the release notes for full details and comment below what do you think about this release! π
https://github.com/necolas/react-native-web/releases/tag/0.18.0
GitHub
Release 0.18 Β· necolas/react-native-web
Breaking changes
Browser support has been reduced. Changes as follows: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. Th...
Browser support has been reduced. Changes as follows: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. Th...
π3
Adding React Native to an existing iOS app
*
One of the best things about React Native is that it is cross platform which makes it easy to share code between both iOS and Android applications π±.
I hope this explains how you can add React Native to an existing iOS application. Happy Reading π
https://medium.com/gitconnected/how-to-add-react-native-to-an-existing-ios-app-in-2022-97bb7d38cf96
*
React Native βοΈ uses Cocoapods to add iOS dependencies when you add new modules to your application and it is the only way to add React Native and it's native modules to iOS projects.One of the best things about React Native is that it is cross platform which makes it easy to share code between both iOS and Android applications π±.
I hope this explains how you can add React Native to an existing iOS application. Happy Reading π
https://medium.com/gitconnected/how-to-add-react-native-to-an-existing-ios-app-in-2022-97bb7d38cf96
Medium
How to add React Native to an existing iOS app in 2022
The documentation for how to do this on the React Native site is out of date
Migrate your React Native Libraries to New Architecture
βοΈ React Native team is working on to support library developers in migrating to the New Architecture.
In the coming days React Native βοΈ community will offer best-effort support in the Working Group π¨βπΌπ©βπΌ and Provide clear and up-to-date documentation on the New Architecture
We're also attaching an image of migrating status of popular Libraries with this post
Happy Reading π
https://twitter.com/ReactNativeBlog/status/1538953669743353858?t=Mo2_FTql8k0ooUxMTGeCng&s=09
βοΈ React Native team is working on to support library developers in migrating to the New Architecture.
In the coming days React Native βοΈ community will offer best-effort support in the Working Group π¨βπΌπ©βπΌ and Provide clear and up-to-date documentation on the New Architecture
We're also attaching an image of migrating status of popular Libraries with this post
Happy Reading π
https://twitter.com/ReactNativeBlog/status/1538953669743353858?t=Mo2_FTql8k0ooUxMTGeCng&s=09
π3
Evan Bacon who's into building Expo wrote a thread last week about all the key points in the Expo Dev Tools Keynote at app.js conference.
Have a Good Day π
https://twitter.com/Baconbrix/status/1535256333397725191
Have a Good Day π
https://twitter.com/Baconbrix/status/1535256333397725191
π’ React Native 0.69
βοΈ React Native 0.69 is the first release to support React 18.
βοΈ Before this release, Hermes and React Native were released separately. That led to confusion on which version of Hermes is compatible with which version of React Native.
React native βοΈ team has few breaking changes and also they have upgraded some of the dependencies.
Read on to learn more! π
https://reactnative.dev/blog/2022/06/21/version-069
React Native 0.69.0 version comes with several improvements for the New Architecture of React Native βοΈ and new features: React 18 support & bundled Hermes.βοΈ React Native 0.69 is the first release to support React 18.
βοΈ Before this release, Hermes and React Native were released separately. That led to confusion on which version of Hermes is compatible with which version of React Native.
React native βοΈ team has few breaking changes and also they have upgraded some of the dependencies.
Read on to learn more! π
https://reactnative.dev/blog/2022/06/21/version-069
π2
Fast & Performant React Native List - FlashList
β‘ FlashList delivers:
π₯ 60 FPS scrolling on low-end devicesπ±.
π No more blank spaces.
βοΈ Ridiculously easy implementation.
Get FlashListπ
https://shopify.github.io/flash-list/
β‘ FlashList delivers:
π₯ 60 FPS scrolling on low-end devicesπ±.
π No more blank spaces.
βοΈ Ridiculously easy implementation.
Get FlashListπ
https://shopify.github.io/flash-list/
shopify.github.io
FlashList - super fast list for react native
FlashList is a faster alternative to FlatList with a similar API. Migrate in a few seconds and get major performance boost.
π8
Simple list comparison between β‘οΈ FlashList vs FlatList
Find out which performs better when Alexandre Moureaux just made a comparison of scrolling between Shopify β‘οΈ FlashList vs React Native βοΈ FlatList.
Have a good day!π
https://twitter.com/almouro/status/1542848782693449728
Find out which performs better when Alexandre Moureaux just made a comparison of scrolling between Shopify β‘οΈ FlashList vs React Native βοΈ FlatList.
Have a good day!π
https://twitter.com/almouro/status/1542848782693449728
X (formerly Twitter)
Alexandre Moureaux (@almouro) on X
Simple list comparison (Twitter clone)
@ShopifyEng FlashList vs @reactnative FlatList
on a low end Android
On the left, trying my best to scroll the FlatList π : the scroll locks because JS is dead! β οΈ
Right side: no locking! β
Will post #performance metricsβ¦
@ShopifyEng FlashList vs @reactnative FlatList
on a low end Android
On the left, trying my best to scroll the FlatList π : the scroll locks because JS is dead! β οΈ
Right side: no locking! β
Will post #performance metricsβ¦
π5
Hunting JS memory leaks in React Native apps
βοΈ If your app happens to suffer from memory issues, you will learn how to tell if your app is leaking memory, and if so, how to pinpoint and fix the source of the leak.
In this article π you will find a list of most common mistakes in React Native apps π± that can lead to memory leaks.
We hope this will give you a better understanding of memory leaks in React Native βοΈ app.
Happy Reading π
https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde
βοΈ If your app happens to suffer from memory issues, you will learn how to tell if your app is leaking memory, and if so, how to pinpoint and fix the source of the leak.
In this article π you will find a list of most common mistakes in React Native apps π± that can lead to memory leaks.
We hope this will give you a better understanding of memory leaks in React Native βοΈ app.
Happy Reading π
https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde
Medium
Hunting JS memory leaks in React Native apps
At Software Mansion we are often asked by our clients to review their React Native apps for possible performance improvements. One of theβ¦
React Native for Web 0.18 is out
βοΈ StyleSheet rewrite for React 18.
βοΈ Improves bi-directional layouts.
βοΈ Improves support for multiple windows & shadow roots.
βοΈ Drops legacy browser support.
Read the release notes for full details
https://github.com/necolas/react-native-web/releases/tag/0.18.0
βοΈ StyleSheet rewrite for React 18.
βοΈ Improves bi-directional layouts.
βοΈ Improves support for multiple windows & shadow roots.
βοΈ Drops legacy browser support.
Read the release notes for full details
https://github.com/necolas/react-native-web/releases/tag/0.18.0
GitHub
Release 0.18 Β· necolas/react-native-web
Breaking changes
Browser support has been reduced. Changes as follows: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. Th...
Browser support has been reduced. Changes as follows: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. Th...
π1
MAJOR: App Store Connect v2.0 is now available!
ο£Ώ Apple Docs: https://developer.apple.com/documentation/appstoreconnectapi
β‘οΈ Diff: https://github.com/EvanBacon/App-Store-Connect-OpenAPI-Spec/commit/27298854f947017094f1233498d18e693d79e8f0
Backlog: https://github.com/EvanBacon/App-Store-Connect-OpenAPI-Spec/tree/main/specs
ο£Ώ Apple Docs: https://developer.apple.com/documentation/appstoreconnectapi
β‘οΈ Diff: https://github.com/EvanBacon/App-Store-Connect-OpenAPI-Spec/commit/27298854f947017094f1233498d18e693d79e8f0
Backlog: https://github.com/EvanBacon/App-Store-Connect-OpenAPI-Spec/tree/main/specs
GitHub
[Upgrade] App Store Connect API v2.0 Β· EvanBacon/App-Store-Connect-OpenAPI-Spec@2729885
Automatically tracks every copy of the App Store Connect OpenAPI JSON Spec - [Upgrade] App Store Connect API v2.0 Β· EvanBacon/App-Store-Connect-OpenAPI-Spec@2729885