React Native - Filling background color with a transition

Question

I have a view that i fill it with background color accordingly. For example if a user selects one item out of five components ,my view has to fill 20% with color. I have done the filling my view with color correctly. But as i cannot use transition property, there's no way to get the color fill with a transition, so it looks like gradually filling. How can i animate my view so it has a smooth color filling effect?

my code

<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

You might want to use Animated from React Native. https://facebook.github.io/react-native/docs/animations. Store the percentage value in a variable in the state and then you can do something like this for the 20% and so on:

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