Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attempting to disconnect view that has not been connected with the given animated node #12942

Closed
arsen opened this issue Mar 14, 2017 · 2 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@arsen
Copy link

arsen commented Mar 14, 2017

Hi @janicduplessis ,
I am having another issue with Animated library when useNativeDriver=true.

Randomly when I mount the component it will throw an error "Attempting to disconnect view that has not been connected with the given animated node"
The component has styles that are are controller through Animated.event (onScroll).

once I change useNativeDriver=false it will never happen again.
Was wondering if this could be related to #11317 or #11809 ?

This is happening only on Android (tested on RN 0.42.0 and 0.41.2)

@hramos
Copy link
Contributor

hramos commented Mar 14, 2017

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I am going to close this, but feel free to open a new issue with the additional information provided. Thanks!

@hramos hramos closed this as completed Mar 14, 2017
@koenpunt
Copy link
Contributor

I see the same Attempting to disconnect view that has not been connected with the given animated node error. For me it happens when a parent component has a Animated.Value passed to child components, which is driven by a native scroll event.

Where the children consume this scrollPosition with interpolation.
And even though there are actually multiple consumers of this animated value, only one seems to cause the before mentioned error.

Something like this (contrived example):

const Block = (props) => {
  const translateY = props.scrollPosition.interpolate({
    inputRange: [offset, offset + 100],
    outputRange: [0, -100],
    extrapolate: 'clamp',
  });
  return (
    <View>
      <Heading style={{ transform: [{ translateY }] }} />
      <Content>
        // ...
      </Content>
    </View>
  );
}

const Blocks = (props) => {
  // Removing the animated scale from the image actually prevents the error from happening.
  const scaleStyle = {
    transform: [{
      scale: props.scrollPosition.interpolate({
        inputRange: [-100, 0],
        outputRange: [2, 1],
        extrapolateRight: 'clamp',
      }),
    }],
  };
  return (
    <View>
      <Animated.Image
        style={scaleStyle}
      />
      <AnimatedListView
        {...props}
        renderRow={rowData => <Block scrollPosition={props.scrollPosition} block={rowData} />}
        // ...
      />
    </View>
  )
);

const Page = () => (
  <Blocks
    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.state.scrollPosition } } }],
      { useNativeDriver: true },
    )}
    scrollPosition={this.state.scrollPosition}
    // ...
  />
);

Also when I take out the component that causes the error, and a second Page component appears on top of the previous one (a screen from react navigation in my case), and later this second Page component is removed, all attached animated components in the previous Page component below do no longer respond to the scroll event.

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants