Incompatibility with react-native-reanimated@3.3.0

[thecoorum]

When I tried to upgrade from react-native-reanimated@2.14.4 (officially supported by expo) to react-native-reanimated@3.3.0 the development client failed to launch with error reading from '_value' directly is possible only on UI thread. The stacktrace was pointing to the createThemedComponent. I'm using Animated.createAnimatedComponent on some components with styled

[nandorojo]

hmm and you rebuilt the dev client i assume?

[nandorojo]

could it be a reanimated issue? all dripsy does is combine the style prop

[thecoorum]

hmm and you rebuilt the dev client i assume?

Yes

[thecoorum]

could it be a reanimated issue? all dripsy does is combine the style prop

I'd say so, but most of entry points from error stacktrace were pointing to memo-hash. I'll post error screenshot later today

[nandorojo]

hard to say without a stack trace

[thecoorum]

Hey @nandorojo! Sorry for the delay, including stack trace with a screenshot

Error: Reading from `_value` directly is only possible on the UI runtime

This error is located at:
    in Wrapped (created by DateTimePicker)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by Dripsy.NoNameComponent)
    in Wrapped (created by DateTimePicker)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by Dripsy.NoNameComponent)
    in Wrapped (created by DateTimePicker)
    in DateTimePicker (created by Transaction)
    in RCTView (created by View)
    in View (created by Transaction)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by Transaction)
    in RCTView (created by View)
    in View (created by Transaction)
    in Transaction (created by CreateTransaction)
    in CreateTransaction (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by Navigation)
    in RCTView (created by View)
    in View (created by Navigation)
    in Navigation (created by App)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by ConfirmationProvider)
    in ConfirmationProvider (created by App)
    in ErrorBoundary (created by App)
    in InitializationProvider (created by App)
    in IdentificationProvider (created by App)
    in UserProvider (created by App)
    in AppProvider (created by App)
    in Unknown (created by App)
    in BreakpointIndexProvider (created by DripsyProvider)
    in DripsyProvider (created by App)
    in FontProvider (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in KeyboardControllerView (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by AnimatedComponent(Component))
    in AnimatedComponent(Component)
    in Unknown (created by KeyboardProvider)
    in KeyboardProvider (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in LocaleProvider (created by App)
    in AnalyticsProvider (created by App)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

[nandorojo]

looks like the error is caused by a date time picker?

[thecoorum]

DateTimePicker is my own component which utilizes dripsy for styling. The whole component is wrapped with styled(Animated.View)

[nandorojo]

and removing styled() fixes it?

[nandorojo]

i would want to make sure it’s isolated to dripsy somehow

[thecoorum]

Yes, removing usage of dripsy in the whole component resolves the issue

[nandorojo]

weird. i wonder if the animated view allows array style props still. a minimal repro would be easiest to debug for me. thanks!

[thecoorum]

Will try to reproduce it later today

[thecoorum]

Hey @nandorojo! Sorry for the delay with the reproduction, wasn't able to get to it, but now it's done
https://github.com/thecoorum/dripsy-reanimated-issue

[thecoorum]

@nandorojo any news here?

[nandorojo]

I think it's possible that reanimated is completely highjacking the style prop. That said, if you're using useSx(), theres no need to wrap your view with styled(Animated.View)!

Just do this: <Animated.View style={[sx(style), animatedStyle]} />. useSx() should work like that, right?

[thecoorum]

I'm mostly using styled(Animated.View) to add default styles and then using sx() to style depending on conditionals. Is sx prop in styled components supports passing animated styles?

[nandorojo]

Just for reference, I'd typically split out animated components from styled to keep it simpler. Multiple libraries doing magic on the style prop might have some conflicts.