React-native-navigation shared element transition is not working in navigation

[hristowwe]

I tried to make the simplest possible shared element transition with text but it didn't work at all. The text does not move smoothly at all. I read the documentation and followed the steps but no luck. So my code so far -

App.js

import {NavigationContainer} from '@react-navigation/native';
import * as React from 'react';
import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
import DetailScreen from './DetailScreen';
import ListScreen from './ListScreen';

const Stack = createSharedElementStackNavigator();
const App = ({navigation}) => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="List"
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="MainScreen" component={ListScreen} />
        <Stack.Screen
          name="DetailScreen"
          component={DetailScreen}
          options={navigation => ({
            headerBackTitleVisible: false,
            cardStyleInterpolator: ({current: {progress}}) => {
              return {
                cardStyle: {
                  opacity: progress,
                },
              };
            },
          })}
          sharedElements={route => {
            const {data} = route.params;
            console.log(data);
            return [
              {
                id: `item.${data.id}`,
                animation: 'move',
                resize: 'stretch ',
                align: 'center-top',
              },
            ];
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

ListScreen.js -

import * as React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {SharedElement} from 'react-native-shared-element';
const ListScreen = props => {
  const {navigation} = props;
  const persons = [
    {
      id: '1',
      name: 'Earnest Green',
    },
    {
      id: '2',
      name: 'Winston Orn',
    },
    {
      id: '3',
      name: 'Carlton Collins',
    },
    {
      id: '4',
      name: 'Malcolm Labadie',
    },
    {
      id: '5',
      name: 'Michelle Dare',
    },
  ];

  return (
    <View
      style={{
        flex: 1,
        padding: 50,
      }}>
      {persons.map(person => {
        return (
          <TouchableOpacity
            onPress={() => navigation.navigate('DetailScreen', {data: person})}>
            <SharedElement id={`item.${person.id}`}>
              <Text style={{padding: 20, fontSize: 15, marginTop: 5}}>
                {person.name}
              </Text>
            </SharedElement>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
export default ListScreen;

And DetailScreen.js -

import * as React from 'react';
import {Text, View} from 'react-native';
import {SharedElement} from 'react-navigation-shared-element';

const DetailScreen = ({route}) => {
  const {data} = route.params;
  return (
    <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
      <SharedElement id={`item.${data.id}`}>
        <Text style={{fontSize: 22}}>{data.name}</Text>
      </SharedElement>
    </View>
  );
};
export default DetailScreen;

So my transition now look like

it is not smooth at all. How can i fix that?

Sorry for my bad English!

[mxm87]

In List.js import { SharedElement } from "react-navigation-shared-element"

[frankcalise]

Yeah I ran into similar issues as well @hristowwe - you ever resolve this ?

Expo SDK 44

[hristowwe]

Yeah I ran into similar issues as well @hristowwe - you ever resolve this ?

Expo SDK 44

Yeah I ran into similar issues as well @hristowwe - you ever resolve this ?

Expo SDK 44

look my ListScreen i imported import {SharedElement} from 'react-native-shared-element'; instead import {SharedElement} from 'react-navigation-shared-element';

i fix that when import this

import {SharedElement} from 'react-navigation-shared-element';

[frankcalise]

Yeah I ran into similar issues as well @hristowwe - you ever resolve this ? Expo SDK 44

Yeah I ran into similar issues as well @hristowwe - you ever resolve this ? Expo SDK 44

look my ListScreen i imported import {SharedElement} from 'react-native-shared-element'; instead import {SharedElement} from 'react-navigation-shared-element';

i fix that when import this

import {SharedElement} from 'react-navigation-shared-element';

@hristowwe thanks for the update, glad you got it fixed. Was this just for Android or both Android and iOS?

Also please consider closing the issue if it is now resolved.