Shared transition not working properly with text component

[Glazzes]

Hi and thank you for creating such an awesome library.

I've been trying to transition a text component from one screen to another while following some tutorials where the transition works really well (in IOS), but no matter what i do the text does not transitions properly instead of interpolating its properties nicely, it only stretches for both screens backwards and forwards, I've tried to add specific dimensions to the text component, flex properties, providing styles to SharedElement component, wrapping it inside a View, but nothing seems to work for me.

I've also tried with other properties like color, but there's no interpolation at all between the styles from the first screen to the ones in the second screen, they move nicely from screen to screen, but styles are only applied once the transition has ended.

As i do not own an Iphone myself, I've tested this behaviour both on an Android emulator and a physical device and they produce the same result.

Here are the components I'm using, package.json and a short video of my problem.

import {useNavigation} from '@react-navigation/core';
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import {SharedElement} from 'react-navigation-shared-element';

export const One = () => {
  const navigation = useNavigation();

  return (
    <View style={styles.rootOne}>
      <SharedElement id="text">
        <Text style={styles.textOne}>Hello world</Text>
      </SharedElement>
      <Button title="Go to second" onPress={() => navigation.navigate('Two')} />
    </View>
  );
};

export const Two = () => {
  return (
    <View style={styles.rootTwo}>
      <SharedElement id="text">
        <Text style={styles.textTwo}>Hello world</Text>
      </SharedElement>
    </View>
  );
};

const styles = StyleSheet.create({
  rootOne: {
    flex: 1,
  },
  rootTwo: {
    flex: 1,
    marginTop: 200,
  },
  textOne: {
    fontSize: 15,
    textAlign: 'center',
  },
  textTwo: {
    fontSize: 30,
    textAlign: 'center',
  },
});

{
  "name": "testnavigation",
  "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 . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.1",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.8.0",
    "react-native-shared-element": "^0.8.3",
    "react-navigation-shared-element": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.65.0",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

https://user-images.githubusercontent.com/52082794/138578177-96be0c59-8481-4f8a-a309-f954b3668692.mp4

[Only-IceSoul]

Wrap it up with a view

[Glazzes]

Wrap it up with a view

As i mentioned in this issue i tried wrapping it with a view, still it does not change much, there's still no interpolation at all and now you're not "interpolating" the text but the view containing it, i tried wix/react-native-navigation and i got the expected result, but one will sooner or later have to fully opt out expo libraries that's something i don't like

[keremkurtulus]

I have the same issue here also in IOS :(

[vlmihajlovic]

Try this

<SharedElement id="text" style={{alignItems: 'flex-start'}}>
    <Text style={styles.textTwo}>Hello world</Text>
</SharedElement>

[Only-IceSoul]

https://www.youtube.com/watch?v=7LC9eHZBoJM

[fpe-dev]

I was able to solve this by adding animation: 'fade'

          sharedElements={(route, otherRoute, showing) => {
            const { id } = route.params
            return [
              { id: `item.${id}.photo` },
              { id: `item.${id}.text`, animation: 'fade' },
            ]
          }}

[kostas64]

I was able to solve this by adding animation: 'fade'

          sharedElements={(route, otherRoute, showing) => {
            const { id } = route.params
            return [
              { id: `item.${id}.photo` },
              { id: `item.${id}.text`, animation: 'fade' },
            ]
          }}

Struggling a lot of times with this issue trying custom interpolations with no success. Worked like a charm. Thanks @fpe-dev !