Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Clicking the navigation to and from results in error

See original GitHub issue

I am getting the following error when switching between screens.

The correct instance could not be fetched but here goes the error.


Error while updating property 'endNode' of a view managed by: RNSharedElementTransition

null

Trying to resolve view with a tag 3419 which doesn't exist

Once I dismiss the error a faded image of the shared element remains

Issue Analytics

State:
Created 4 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

ducpt2commented, Oct 15, 2020

+1 i met the same issue. Thanks for the greate lib.

1reaction

xseignardcommented, May 8, 2020

Same problem here, happens randomly.

Here is the output of react-native info:

info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 114.24 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.10 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Testing on xiaomi redmi note 7, android 9 PKQ1.180904.001

Relevant lib versions:

"@react-navigation/drawer": "^5.4.1",
"@react-navigation/native": "^5.1.5",
"@react-navigation/stack": "^5.2.13",
"react-native-shared-element": "^0.7.0",
"react-navigation-shared-element": "^5.0.0-alpha1",
"react-native-fast-image": "^8.1.5",

Screen conf:

<Stack.Screen
  name="Manifestation"
  component={Manifestation}
  options={({ route }) => ({
    headerShown: false,
    title: route.params.title,
    cardStyleInterpolator({ current: { progress } }) {
      return {
        cardStyle: {
          opacity: progress,
          transform: [
            {
              translateY: progress.interpolate({
                inputRange: [0, 1],
                outputRange: [50, 0],
              }),
            },
          ],
        },
      }
    },
  })}
  sharedElementsConfig={(route, otherRoute, showing) => {
    const { id } = route.params
    return [`manifestation.${id}.image`]
  }}
/>

And shared elements:

<TouchableOpacity
  onPress={() =>
    navigation.push('Manifestation', {
      id: manifestation.id,
      title: manifestation.title,
    })
  }
  activeOpacity={0.5}
>
  <SharedElement id={`manifestation.${manifestation.id}.image`}>
    <FastImage
      style={[
        styles.image,
        { width: cardHeight, height: cardHeight },
      ]}
      source={{
        uri: `https://XXXXX/${manifestation.image}`,
        priority: FastImage.priority.high,
      }}
      resizeMode={FastImage.resizeMode.cover}
    />
  </SharedElement>
</TouchableOpacity>

AND

<SharedElement id={`manifestation.${manifestation.id}.image`}>
  <FastImage
    style={styles.image}
    source={{
      uri: `https://XXXXX/${manifestation.image}`,
      priority: FastImage.priority.high,
    }}
    resizeMode={FastImage.resizeMode.cover}
  />
</SharedElement>

Hope this helps, let me know if you need more informations.

And thanks for this cool lib 👍