React Native Status
165 subscribers
9 photos
154 links
Sharing weekly news / articles about:
βš›οΈ React Native / React
🐍 JavaScript / TypeScript
πŸ›  NPM Libraries / Tools
Take a seat and enjoy your stay! 😊
Download Telegram
πŸ“’ 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
πŸ‘‰ 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/
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/
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
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
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/
React Native Web v0.18 is out! πŸŽ‰

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
Adding React Native to an existing iOS app

* 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
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
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
πŸ“’ React Native 0.69

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/
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
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
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
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!

Check it out, and report your findings


https://github.com/reactwg/react-native-releases/discussions/26