Wrong initial state using useNativeDriver: true and production bundle

[ferrannp]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

1. react-native -v: 0.48.3
2. node -v: 8.4.0
3. npm -v: 5.4.2
4. yarn --version: 1.0.2

Then, specify:

• Target Platform: Android O

• Development Operating System: macOS

Steps to Reproduce

1. Use onScroll event on FlatList

onScroll={Animated.event(
  [{ nativeEvent: { contentOffset: { y: scrollY } } }],
  { useNativeDriver: true }
)}

2. Use the value for some interpolations:

const imageTranslate = scrollY.interpolate({
  inputRange: [0, bannerHeight],
  outputRange: [0, -bannerHeight],
  extrapolate: 'clamp',
});

const opacityInterpolator = scrollY.interpolate({
  inputRange: [bannerHeight-56-24-24, bannerHeight-56-24],
  outputRange: [0, 1],
  extrapolate: 'clamp',
});

const fontScale = scrollY.interpolate({
  inputRange: [0.0, bannerHeight-56-24],
  outputRange: [1.5, 1.0],
  extrapolate: 'clamp',
});

const fontTranslateX = scrollY.interpolate({
  inputRange: [0, bannerHeight-56-24],
  outputRange: [0, -24],
  extrapolate: 'clamp',
});

const fontTranslateY = scrollY.interpolate({
  inputRange: [0, bannerHeight - 56 - 24],
  outputRange: [0, -bannerHeight + 56 + 24],
  extrapolate: 'clamp',
});

3. Apply them to Animated.View and Animated.Text. With state scrollY: new Animated.Value(0), the View should have 0 opacity and the text should be big (initial state).

Expected Behavior

See gif:

Actual Behavior

The issue happens only in production and in my real device (Nexus 5X) which is now using Android O. I cannot reproduce it in Genymotion. Initial state is wrong and it goes ok just when touching and scrolling a bit.

Temporal solution

this.state = {
  scrollY: new Animated.Value(0),
  useNativeDriver: true,
};

componentDidMount() {
  setTimeout(() => this.setState({ useNativeDriver: true }), 10);
}

[satya164]

cc @janicduplessis

[ferrannp]

Temporal solution does not really work always. At some point, if I click something in the list, the bug reappears.

[janicduplessis]

I'm not sure if it is the issue but could you try with this PR #15919?

[ferrannp]

Ok, gonna try that and let you know.

@janicduplessis I am having a hard time building my app using your PR. I followed all the instructions http://facebook.github.io/react-native/docs/android-building-from-source.html but I am having problems with external dependencies (had to disable some).

But basically, I have Realm. The app builds and works in dev but I get errors in prod... Not sure if there is some compatibility issue. So maybe I need to set up a totally new repo without external third party modules.

Anyway, maybe there is a place (Slack) we can chat? I could use some help.

[janicduplessis]

@ferrannp Hmm I'm not sure what could cause the issue in prod only. I'm around on the Expo slack if you want to give me more info I can try to help.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.