FadeIn

Fades in components wrapped by it.

Properties:

  • driver: Driver that is running the animation
  • children: Components that will be affected by the animation
  • inputRange: Array [from, to] including a 'from' animated value and 'to' animated value

Usage:

const driver = new ScrollDriver();

return (
  <ScrollView
    {...driver.scrollViewProps}
  >
    <FadeIn
      driver={driver}
      inputRange={[100,150]}
    >
      <Image />
    </FadeIn>
  </ScrollView>
);

The above code will create a scroll dependent fade in animation over Image component from scroll position 100 to scroll position 150 where Image is fully transparent at scroll position 100, and opaque at scroll position 150.