I'm building a Markdown text input component in
#ReactNative
for the
@expensify
app.
โก๏ธDrop-in replacement for <๐๐๐ก๐๐ธ๐๐๐๐>
โก๏ธFully native experience (autocomplete, selection)
โก๏ธSynchronous formatting with no jumps or delays
More examples coming soon! ๐
I've had a lot of fun writing this labyrinth game in React Native and
#Reanimated
using its new `useAnimatedSensor()` hook added by
@piaskowyk
! ๐
For more details, check out Reanimated docs:
๐๐ธ๐๐ธ๐๐ธ
After 2 months, I finally got RNVisionCamera working with Reanimated v3 !!!
๐ Barcode detection using frame processor from ๐๐๐๐๐๐-๐๐๐๐๐๐-๐๐๐๐-๐๐๐๐๐๐๐
๐จ Overlays using @๐๐๐๐๐๐๐ข/๐๐๐๐๐-๐๐๐๐๐๐-๐๐๐๐
โ Works on Android & iOS
๐ฑ Billiards game implemented with Reanimated, Gesture Handler and react-native-box2d!
Physics and collisions calculated on the UI thread in 120 fps! ๐
#Reanimated
#gamedev
@swmansion
Announcing react-native-mutex, a JSI library that exposes C++ mutexes to the JavaScript world Implemented this in 30 minutes while waiting for a plane from Curaรงao โ
#ExpensiConX
This is my favorite demo from Reanimated's FabricExample app. I am grateful to
@swmansion
and
@ShopifyEng
for the opportunity to migrate our libraries to the new RN architecture.
Have you ever seen this error? ๐
Usually, it appears when you forget to add '๐ ๐๐๐๐๐๐'; directive. But where?
I've submitted a PR that includes the function name in the error message so you can easily find the offending function ๐ต๏ธ
Better developer experience! ๐
New React Native Gesture Handler Docs fresh out of the oven โ๏ธ๐ค
Give some love to the team behind the design and the implementation ๐
@AlisonStardust
@Gadangelika
@patkalinska
Made this cool 7-segment display of GitHub stats for our
#opensource
libraries โฆ
@swmansion
โฉ โญ๏ธ Leave a star, create an issue, or submit a PR and youโll be here!
React Native Screens 3.30.0 coming with a new ๐๐๐ฑ๐๐๐๐ถ๐๐๐๐๐๐ feature ๐๐ฅ
It powers Screen Transitions which will allow to specify custom transition animations in native-stack with Reanimated
Full release notes ๐
Big thanks from React Native Open Source team at
@swmansion
for making
@reactnative
0.71 so great! Faster builds, better app template and prefab integration turned out pretty well! Thanks
@cortinico
@CipolleschiR
@Kelset
& everyone involved for your contributions and support!๐ฅณ
Congratulations! ๐ฅณ RNQuickBase64 was one of the first JSI-enabled libraries and I remember looking through its code when I was starting my adventure with native side of RN ๐
A new major React Native SVG v14 is out! ๐
It features a reduced bundle size when CSS components arenโt used ๐
But if you still want to use them, just change the import to ๐๐๐๐๐-๐๐๐๐๐๐-๐๐๐/๐๐๐ ๐
I'm happy to announce that this year
@piaskowyk
and I will be hosting
@appjsconf
workshops again!
โ๏ธ "Debugging, profiling and optimization in React Native apps"
๐ May 10th, 2023
3 of Software Mansionโs React Native libraries are ready for Bridgeless Mode ๐โ
It will be enabled by default in React Native 0.74 โ๏ธ
We got you covered ๐ช
@swmansion
๐ฉJust fixed a bug in Reanimated 3.9.0 & 3.10.0 that happens only if react-native-reanimated is installed as a dependency but not actually used in JS code.
If you're affected, please see the PR in the description ๐
Good things come to those who wait โ today it is the stable V3 release of React Native Reanimated with Shared Element Transitions, DX improvements, perf upgrades, lower memory usage and more... Read our announcement post ๐
Why does
#ReactNative
rely so heavily on
#Yoga
? Yes, itโs faster than iOS layout engines in some benchmarks. But sometimes we need to calculate layout in 60 fps (e.g. resize window). Wouldnโt it be easier to just map CSS styles to platform-specific layouts like React does on web?
React Native Reanimated 3.9.0 is out! ๐ฅ
- Screen Transitions ๐
- useScrollViewOffset now works on Web ๐
- React Native 0.74 and Bridgeless Mode support
- Shared Element Transitions stability improvements
Full release notes ๐
Debugging & performance are
#2
and
#3
pain points of React Native according to the
#StateOfReactNative
survey. Luckily,
@piaskowyk
and I will be hosting a workshop "Debugging, profiling and optimization in React Native apps" on App.js Conf 2023!
React Native Screens just passed 1 million weekly downloads on npm โจ
No wonder as it's one of the most influential libraries in the ecosystem powering React Navigation & Expo Router ๐ฅ
We wanted to show the performance and the insane power of the Static Hermes native FFI. But we don't yet support the all language features needed to compile React Native (soon though!), so we improvised.
We imported the bindings for DearImGui (a popular C++ imperative game UI
Can't believe it. I've been trying to bring seamless native API access to React Native for 5+ years, and just tackled the final boss.
We just called an arbitrary UIKit API from JS, on the UI thread, with no native code โ thanks to NativeScript, Node-API, and Reanimated. ๐ฅน๐
The first announcement on the
@appjsconf
week is... ๐ฅ
Reanimated Beta Docs ๐
โ Beginner-friendly content rewrite
โ All-new design
โ Interactive examples powered by Reanimated
โ Dark mode
This is an early preview which is in active development
I doc commented every function, component, and prop in the whole React Native Reanimated codebase ๐ which means...
๐ฅ Better hints in your code editor! ๐ฅ
Available since Reanimated 3.6.1
@swmansion
If C++ TurboModules were autolinked on all platforms, JSI-powered libraries like Reanimated or MMKV wouldn't need complex platform-specific code for obtaining jsi::Runtime.
Hey
@discord
, are you using Fabric in your Android app? ๐คฏ The .apk file contains , libreact_render_uimanager.so and many more shared libs specific to the New Architecture of React Native.
This is a really big step for React Native.
New Architecture running on production in a fairly complex (open-source!) app.
Congratulations
@WoLewicki
@breskin67
and the whole SWM team!
Enabling the New Architecture has been a long-standing goal for us at
@swmansion
and it was accomplished recently when
@expensify
rolled it out to production. Check out the blog where we go through the process of enabling it:
I just created a synchronously rendering virtual list in React Native thanks to NativeScript! ๐
We subclass UITableViewController, implement its delegates, initialise it with some data, and insert its tableView into a <View>. You know, using the platformโฆ but via JavaScript!
To enable the new architecture, you only need one flag on both Android and iOS ๐ฉ
On Android, you need to switch the flag located in ๐๐๐๐๐๐๐/๐๐๐๐๐๐.๐๐๐๐๐๐๐๐๐๐ and rebuild you app ๐ฑ
On iOS, you need to set the flag in ๐๐๐/๐ฟ๐๐๐๐๐๐, reinstall pods
@mrousavy
With Reanimated you can animate props like width or height which may affect the position or size of other components, so we need to re-calculate the layout on UI thread. However, opacity or colors should be easy with CoreAnimation. We will definitely take a look at it soon! ๐
Recently, Iโve seen a thread with really bad volume controls and I couldnโt resist building one in React Native ๐คญ
โฆwhich I made even worse by connecting it to the gyroscope ๐
Building has been a blast with all these helpful tools:
-
@reactnative
with
@expo
and expo router
-
@gorhom
's bottom sheet, such a delight
-
@mrousavy
's mmkv for some offline support
-
@swmansion
's reanimated, gesture, screens, svg
Ty all! It's been great
I'm looking for some critical issues in
#Reanimated
that should be prioritized and taken care of. Three rules:
1. Must have a minimal reproducible example
2. Must affect high number of users
3. Not related to project setup/config/building Android on Windows etc.