React Native - заливка цвета фона с переходом

Question

У меня есть вид, что я заполняю его цветом фона соответственно. Например, если пользователь выбирает один элемент из пяти компонентов, мой взгляд должен заполнить 20% цветом. Я правильно заполнил свой взгляд цветом. Но так как я не могу использовать свойство transition, нет способа получить цветную заливку с переходом, поэтому это выглядит как постепенное заполнение. Как я могу оживить мой вид, чтобы он имел эффект плавного цветового наполнения?

мой код

<View style={{backgroundColor: 'green', opacity: 0.6, height: '100%', position: 'absolute',width: (selectedList.length === 0 ? 0 
: selectedList.length === 1 ? '20%' : selectedList.length === 2 ? '40%' :selectedList.length === 3 ? '60%' : selectedList.length === 4 ? '80%' : selectedList.length === 5 ? '100%' : 0)
            }}>
</View>

Answer 1

Вы можете использовать Animated от React Native. https://facebook.github.io/react-native/docs/animations. Сохраните процентное значение в переменной в состоянии, а затем вы можете сделать что-то вроде этого для 20% и так далее:

Animated.timing(this.state.percentageFilled, {
  toValue: 20,
  duration: 1000,
}).start();