React Native custom animation: how to make one section of transition last longer?

Question

I have an Animatable.Text element in my React Native app, and I want it to fade in an out, but spend more time faded in than faded out. In other words, I want its opacity to behave like a sine curve, but where it's steeper and flatter at the top than a regular sine curve. This is what I have so far:

const pulseOpacity = {
    0: {
        opacity: 0
    },
    0.5: {
        opacity: 1
    },
    1: {
        opacity: 0
    }
}

<Animatable.Text
  animation={pulseOpacity}
  duration={2000}
  iterationCount={'infinite'}
>{this.props.text}</Animatable.Text>

Does anyone know how I can approach making the text be visible for longer?

Answer 1

You can use the easing prop for that purpose. Set it to ease-in when the text is about to fade and ease-out when the text is about to appear. You can choose from different available functions like ease-in-sine if you'd like.

You can read more about easing here.

Answer 2

const pulseOpacity = {
    0: {
        opacity: 0
    },
    0.2: {
        opacity: 0.8
    },
    0.5: {
        opacity: 1
    },
    0.8: {
        opacity: 0.8
    },
    1: {
        opacity: 0
    }
}