react-native-shared-element
react-native-shared-element copied to clipboard
Published
20 hours ago •
IjzerenHein
IjzerenHein
Reanimated 2 support?
Hi, please add a test-case that reproduces the problem to the example app. Without a reproducible test-case this is really hard to fix.
package.json
{
"name": "mobile",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"storybook": "rnstl && start-storybook -p 7007",
"build-storybook": "build-storybook"
},
"dependencies": {
"@react-native-firebase/analytics": "^12.7.0",
"@react-native-firebase/app": "^12.7.0",
"@react-native-firebase/dynamic-links": "^12.7.0",
"@react-native-masked-view/masked-view": "^0.2.6",
"@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.1.0",
"@react-navigation/stack": "^6.0.7",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.3.0-alpha.2",
"react-native-safe-area-context": "^3.3.0",
"react-native-screens": "^3.5.0",
"react-native-shared-element": "^0.8.2",
"react-navigation-shared-element": "^3.1.2"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@storybook/addon-actions": "^5.3",
"@storybook/addon-knobs": "^5.3",
"@storybook/addon-links": "^5.3",
"@storybook/addon-ondevice-actions": "^5.3.23",
"@storybook/addon-ondevice-knobs": "^5.3.25",
"@storybook/react-native": "^5.3.25",
"@storybook/react-native-server": "^5.3.23",
"@testing-library/jest-native": "^4.0.2",
"@testing-library/react-native": "^7.2.0",
"@types/jest": "^27.0.1",
"@types/react": "^17.0.19",
"@types/react-native": "^0.64.13",
"@types/react-test-renderer": "^17.0.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-dom": "17.0.2",
"react-native-codegen": "^0.0.7",
"react-native-storybook-loader": "^2.0.4",
"react-test-renderer": "17.0.2",
"typescript": "^4.3.5"
},
"config": {
"react-native-storybook-loader": {
"searchDir": [
"./"
],
"pattern": "**/*.stories.tsx",
"outputFile": "./storybook/storyLoader.js"
}
},
"jest": {
"preset": "react-native"
}
}
AppNavigation.tsx
import {NavigationContainer} from '@react-navigation/native';
import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
import React from 'react';
import Home from '../screens/home';
import Detail from '../screens/detail';
import {RootStackParamList} from './types';
const Stack = createSharedElementStackNavigator<RootStackParamList>();
export default function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{headerShown: false}}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen
name="Detail"
component={Detail}
sharedElements={(route, otherRoute, showing) => {
return ['box'];
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
home.tsx
import {NavigationProp, useNavigation} from '@react-navigation/native';
import React from 'react';
import {
SafeAreaView,
StatusBar,
useColorScheme,
Pressable,
Text,
View,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {RootStackParamList} from '../router/types';
import {SharedElement} from 'react-navigation-shared-element';
export default function Home() {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<Text>App.js</Text>
<Pressable onPress={() => navigation.navigate('Detail')}>
<SharedElement id="box">
<View
style={[
{
height: 200,
width: 200,
backgroundColor: 'black',
},
]}
/>
</SharedElement>
</Pressable>
</SafeAreaView>
);
}
detail.tsx
import React from 'react';
import {
SafeAreaView,
StatusBar,
useColorScheme,
Pressable,
Text,
ViewStyle,
} from 'react-native';
import Animated, {
useAnimatedStyle,
useSharedValue,
withTiming,
} from 'react-native-reanimated';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {SharedElement} from 'react-navigation-shared-element';
export default function Detail() {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
justifyContent: 'center',
flex: 1,
alignItems: 'center',
} as ViewStyle;
const animatedValue = useSharedValue(100);
function animate() {
animatedValue.value = withTiming(200, {duration: 1000});
}
const rStyle = useAnimatedStyle(
() => ({
width: animatedValue.value,
}),
[],
);
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<Text>App.js</Text>
<Pressable onPress={animate}>
<SharedElement id="box">
<Animated.View
style={[
{height: 200, width: 100, backgroundColor: 'black'},
rStyle,
]}
/>
</SharedElement>
</Pressable>
</SafeAreaView>
);
}
https://user-images.githubusercontent.com/48694725/130493961-9ae714f0-6aac-4481-bf35-5d5627f2518a.mov
https://user-images.githubusercontent.com/48694725/130494454-9f862287-5330-4fda-b283-1a16a16c6775.mov
2021-08-23 15:24:51.609 17006-17063/com.mobile2 E/ReactNativeJS: TypeError: property is not configurable
This error is located at:
in RNSharedElementTransition (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (created by SharedElementTransition)
in RCTView (at View.js:32)
in View (created by SharedElementTransition)
in SharedElementTransition (created by SharedElementRendererView)
in RCTView (at View.js:32)
in View (created by SharedElementRendererView)
in SharedElementRendererView
in SharedElementStackNavigator (created by WrapNavigator)
in WrapNavigator (at AppNavigation.tsx:13)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at AppNavigation.tsx:12)
in AppNavigator (at App.tsx:5)
in App (at renderApplication.js:48)
in RCTView (at View.js:32)
in View (at AppContainer.js:106)
in RCTView (at View.js:32)
in View (at AppContainer.js:133)
in AppContainer (at renderApplication.js:41)
in mobile(RootComponent) (at renderApplication.js:57), js engine: hermes
2021-08-23 15:24:51.671 17006-17063/com.mobile2 E/ReactNativeJS: TypeError: property is not configurable
This error is located at:
in RNSharedElementTransition (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (created by SharedElementTransition)
in RCTView (at View.js:32)
in View (created by SharedElementTransition)
in SharedElementTransition (created by SharedElementRendererView)
in RCTView (at View.js:32)
in View (created by SharedElementRendererView)
in SharedElementRendererView
in SharedElementStackNavigator (created by WrapNavigator)
in WrapNavigator (at AppNavigation.tsx:13)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at AppNavigation.tsx:12)
in AppNavigator (at App.tsx:5)
in App (at renderApplication.js:48)
in RCTView (at View.js:32)
in View (at AppContainer.js:106)
in RCTView (at View.js:32)
in View (at AppContainer.js:133)
in AppContainer (at renderApplication.js:41)
in mobile(RootComponent) (at renderApplication.js:57), js engine: hermes
2021-08-23 15:24:51.712 17006-17063/com.mobile2 E/ReactNativeJS: Error: You attempted to set the key `waitForRemoveSync` with the value `true` on an object that is meant to be immutable and has been frozen.
This error is located at:
in AnimatedComponent(View) (at createAnimatedComponent.js:525)
in AnimatedComponentWrapper (at detail.tsx:47)
in RCTView (at View.js:32)
in View (created by SharedElement)
in SharedElement
in SharedElement (at detail.tsx:46)
in RCTView (at View.js:32)
in View (at Pressable.js:242)
in Pressable (created by Pressable)
in RCTView (at View.js:32)
in View (at SafeAreaView.js:41)
in SafeAreaView (at detail.tsx:42)
in Detail (created by SharedElementSceneView)
in RCTView (at View.js:32)
in View (created by SharedElementSceneView)
in SharedElementSceneView (at SceneView.tsx:126)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:118)
in SceneView (at useDescriptors.tsx:209)
in RCTView (at View.js:32)
in View (at CardContainer.tsx:280)
in RCTView (at View.js:32)
in View (at CardContainer.tsx:278)
in RCTView (at View.js:32)
in View (at CardSheet.tsx:33)
in CardSheet (at Card.tsx:556)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (at Card.tsx:535)
in PanGestureHandler (at GestureHandlerNative.tsx:14)
in PanGestureHandler (at Card.tsx:529)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (at Card.tsx:525)
in RCTView (at View.js:32)
in View (at Card.tsx:519)
in Card (at CardContainer.tsx:218)
in CardContainer (at CardStack.tsx:649)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (at src/index.native.tsx:174)
in Screen (at Screens.tsx:37)
in MaybeScreen (at CardStack.tsx:642)
in RCTView (at View.js:32)
in View (at src/index.native.tsx:192)
in ScreenContainer (at Screens.tsx:20)
in MaybeScreenContainer (at CardStack.tsx:561)
in RCTView (at View.js:32)
in View (at Background.tsx:13)
in Background (at CardStack.tsx:559)
in CardStack (at StackView.tsx:437)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at StackView.tsx:430)
in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
in GestureHandlerRootView (at StackView.tsx:429)
in StackView
in SharedElementStackNavigator (created by WrapNavigator)
in WrapNavigator (at AppNavigation.tsx:13)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at AppNavigation.tsx:12)
in AppNavigator (at App.tsx:5)
in App (at renderApplication.js:48)
in RCTView (at View.js:32)
in View (at AppContainer.js:106)
in RCTView (at View.js:32)
in View (at AppContainer.js:133)
in AppContainer (at renderApplication.js:41)
in mobile(RootComponent) (at renderApplication.js:57), js engine: hermes
2021-08-23 15:24:51.748 17006-17063/com.mobile2 E/ReactNativeJS: Error: You attempted to set the key `waitForRemoveSync` with the value `true` on an object that is meant to be immutable and has been frozen.
This error is located at:
in AnimatedComponent(View) (at createAnimatedComponent.js:525)
in AnimatedComponentWrapper (at detail.tsx:47)
in RCTView (at View.js:32)
in View (created by SharedElement)
in SharedElement
in SharedElement (at detail.tsx:46)
in RCTView (at View.js:32)
in View (at Pressable.js:242)
in Pressable (created by Pressable)
in RCTView (at View.js:32)
in View (at SafeAreaView.js:41)
in SafeAreaView (at detail.tsx:42)
in Detail (created by SharedElementSceneView)
in RCTView (at View.js:32)
in View (created by SharedElementSceneView)
in SharedElementSceneView (at SceneView.tsx:126)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:118)
in SceneView (at useDescriptors.tsx:209)
in RCTView (at View.js:32)
in View (at CardContainer.tsx:280)
in RCTView (at View.js:32)
in View (at CardContainer.tsx:278)
in RCTView (at View.js:32)
in View (at CardSheet.tsx:33)
in CardSheet (at Card.tsx:556)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (at Card.tsx:535)
in PanGestureHandler (at GestureHandlerNative.tsx:14)
in PanGestureHandler (at Card.tsx:529)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (at Card.tsx:525)
in RCTView (at View.js:32)
in View (at Card.tsx:519)
in Card (at CardContainer.tsx:218)
in CardContainer (at CardStack.tsx:649)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:243)
in AnimatedComponent (at createAnimatedComponent.js:296)
in AnimatedComponentWrapper (at src/index.native.tsx:174)
in Screen (at Screens.tsx:37)
in MaybeScreen (at CardStack.tsx:642)
in RCTView (at View.js:32)
in View (at src/index.native.tsx:192)
in ScreenContainer (at Screens.tsx:20)
in MaybeScreenContainer (at CardStack.tsx:561)
in RCTView (at View.js:32)
in View (at Background.tsx:13)
in Background (at CardStack.tsx:559)
in CardStack (at StackView.tsx:437)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at StackView.tsx:430)
in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
in GestureHandlerRootView (at StackView.tsx:429)
in StackView
in SharedElementStackNavigator (created by WrapNavigator)
in WrapNavigator (at AppNavigation.tsx:13)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at AppNavigation.tsx:12)
in AppNavigator (at App.tsx:5)
in App (at renderApplication.js:48)
in RCTView (at View.js:32)
in View (at AppContainer.js:106)
in RCTView (at View.js:32)
in View (at AppContainer.js:133)
in AppContainer (at renderApplication.js:41)
in mobile(RootComponent) (at renderApplication.js:57), js engine: hermes
2021-08-23 15:24:51.929 17006-17063/com.mobile2 E/ReactNativeJS: Error: You attempted to set the key `waitForInsertSync` with the value `false` on an object that is meant to be immutable and has been frozen., js engine: hermes
Moving this to react-native-shared-element as this is a not specifically related to react-navigation-shared-element, but a native problem
I actually just noticed that if the first and only child of the <SharedElement> is an <Animated.View> then it would throw the error.
If I wrap the <Animated.View> in a regular <View> I'm able to use the getDetailSharedElements external function again.
this is using ReAnimated 2.2.4, passing a common headerHeight & footerHeight from the SharedStackNavigator to each screen:
https://user-images.githubusercontent.com/50343717/151300161-87667ad6-3556-4079-85de-35b95eb40119.mov
Hello all :)
Thank you for adding code snippets, they help understand the problem. However an even better solution would be to create an Expo Snack https://snack.expo.dev or a GitHub repo with a minimal reproducible example.
As far as I can tell the issue has been solved? @FernandoJMedina please let me know, so we can close this issue 💪
This issue occurred to me when trying to upgrade Storybook for React Native. And it had nothing to do with reanimated, was a babel configuration issue. Removing some babel plugins from babel.config.js did the job.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-reanimated/plugin',
'@babel/plugin-proposal-export-namespace-from',
// '@babel/plugin-proposal-private-methods',
// '@babel/plugin-proposal-private-property-in-object',
// '@babel/plugin-proposal-class-properties',
],
};
