[react-native] Animated bug

<View>
      <Animated.View style={{opacity: fadeOutAnimation}}>
      {...}
      </Animated.View>
      {completed && (
        <Animated.View style={[{opacity: fadeInAnimation}, styles.character]}>
          {...}
        </Animated.View>
      )}
    </View>

const fadeIn = () => {
    Animated.timing(fadeInAnimation, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: true,
    }).start();
  };
  const fadeOut = () => {
    Animated.timing(fadeOutAnimation, {
      toValue: 0,
      duration: 2000,
      useNativeDriver: true,
    }).start();
  };

  useEffect(() => {
    if (completed) {
      fadeOut();
      fadeIn();
    }
  }, [completed]);

처음 화면은 파란색 View만 보이는 상황이다.
어떠한 동작이 완료 되어 completed 라는 state가 true가 되면
파란색 View는 fadeOut을 적용해서 사라지게 할것이고,
빨간색 View는 fadeIn을 적용해서 보이게 하려는 시나리오다.

ios에서는 원하는대로 잘 동작 하였다. 그러나 android에서는 빨간색 View의 fadeIn은 잘 적용이 되고,
파란색 View의 fadeOut 만 동작을 하지 않았다.

Device의 문제인지 모르겠으나 android 에뮬레이터에서도 동일한 문제가 발생한다.

const fadeOut = () => {
    Animated.timing(fadeOutAnimation, {
      toValue: 0,
      duration: 2000,
      useNativeDriver: true,
    }).start(()=>console.log(123));
  };

start(callback) 함수는 애니메이션이 종료된 이후에 콜백을 실행시킨다.
위와같은 방법으로 확인 해보니 콘솔에 '123'은 잘 출력되었다. 코드의 문제가 아닌것이다.

그래서 Animated.View 에 backgroundColor를 추가해보았다.(그냥 해봄... 별 이유없이)
근데 왜인지 모르겠으나 잘 되는것이었다. (왜 인지 이유를 모르겠는게 너무 화가난다.)
개발을 하면 할 수록 공부해야 할게 많아진다. 너무 즐겁다 ㅎㅎㅎㅎ

      <Animated.View style={{opacity: fadeOutAnimation, backgroundColor:'transparent'}}>
          {...}
      </Animated.View>