π’ 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.
π 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/
Aman Mittal's Blog
I'm Aman Mittal (@amanhimself). Software Developer and Tech Writer. Welcome to my digital garden!
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 Blog
Deep linking is one of the best strategies to optimize the user experience of your mobile apps. Learn how to set it up on your React Native apps.
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.
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
LegendApp
https://legendapp.com
Legend is designed for you - to work the way you do and to be the one place for all your productivity needs.
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: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. This is needed to acco...
Browser support has been reduced: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. This is needed to acco...
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
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
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.
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
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: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. This is needed to acco...
Browser support has been reduced: Safari 10.1+, Edge (Chromium), no IE, no legacy Android browser.
Styles are inserted on module eval, not component render. This is needed to acco...
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
Hermes as the Default
Hermes is designed for resource-constrained devicesπ± and optimizes for start-up, app size, and memory consumption.
β¨Difference : Hermes and other JS engines is its ability to compile JavaScript source code to bytecode ahead of time.
βοΈ React Native 0.70 will ship with Hermes as the default engine.
β‘οΈHermes will help your app to start faster via a pre-compilation in bytecode.
In this article, Michael shares various benchmarks from the open-source app Mattermost.
Happy Reading!
https://reactnative.dev/blog/2022/07/08/hermes-as-the-default
Hermes is designed for resource-constrained devicesπ± and optimizes for start-up, app size, and memory consumption.
β¨Difference : Hermes and other JS engines is its ability to compile JavaScript source code to bytecode ahead of time.
βοΈ React Native 0.70 will ship with Hermes as the default engine.
β‘οΈHermes will help your app to start faster via a pre-compilation in bytecode.
In this article, Michael shares various benchmarks from the open-source app Mattermost.
Happy Reading!
https://reactnative.dev/blog/2022/07/08/hermes-as-the-default
π’ Rollout for the New Architecture React Native 0.70
The rollout for the New Architecture keeps progressing, and while we are still in the early days, we wanted to share that we started working on 0.70: the first RC0 is already out and available to test!
https://github.com/reactwg/react-native-releases/discussions/26
The rollout for the New Architecture keeps progressing, and while we are still in the early days, we wanted to share that we started working on 0.70: the first RC0 is already out and available to test!
Check it out, and report your findingshttps://github.com/reactwg/react-native-releases/discussions/26
GitHub
Road to 0.70.0 Β· Discussion #26 Β· reactwg/react-native-releases
The branch cut has happened. Notice Current release candidate: 0.70.0-rc.2 Have an issue with current release candidate? File an issue and we will triage. Have a pick request for this release? Does...
π’ Another day, another library migrated to Fabric! π’
Introducing react-native-svg v13.0.0 with Fabric support π
https://github.com/react-native-svg/react-native-svg/releases/tag/v13.0.0
Introducing react-native-svg v13.0.0 with Fabric support π
https://github.com/react-native-svg/react-native-svg/releases/tag/v13.0.0
GitHub
Release v13.0.0 Β· react-native-svg/react-native-svg
Release introducing React Native SVG with Fabric support! π π
Please upgrade your apps and test if it does not introduce any bugs both on old and new architecture π Keep in mind that due to chang...
Please upgrade your apps and test if it does not introduce any bugs both on old and new architecture π Keep in mind that due to chang...