Using Fade-in Animation from @shoutem/animation on s3 image

Question

I am displaying my images from S3. I would like them to fade-in on load. This seems like it should be a simple request. Can someone give me some guidance on this, if possible?

Thanks!

Answer 1

You can just use a TimingDriver to animate the component.

import React from 'react';
import { View, Easing } from 'react-native';
import { TimingDriver, FadeIn } from '@shoutem/animation';

class Screen extends React.Component {
  render() {
    driver = new TimingDriver({
      duration: 400 // 250 by default,
      easing: Easing.inOut // Easing.cubic is passed by default
      delay: 0 // 0 by default
    });

    return (
      <View>
        <FadeIn driver={driver}>
          {/* Some components to fade in with time passing */}
        </FadeIn>
      </View>
    )
  }
}

You can find out more about the Animation part of the toolkit here.