Реактивный вид наложения (Android) отображается за основным текстом

Question

проблема

Я отображаю вид с текстом как наложение поверх другого вида, устанавливая вид наложения как полностью непрозрачный.

Когда я устанавливаю этот наложенный вид как обычный вид, охватывает весь текст под ним. Когда я заменяю наложенный вид на Animated.View, он покрывает только часть основного текста.

Вот так выглядит нижележащий текст без наложенного текста (наложенный текст должен покрывать верхнюю строку, как 'Beer', так и '$ 1,00'):

Вот как отображается обычный вид: (Наложение текста («текстовый текст ...» скрывает текст под ним, как левый, так и правый):

Вот как отображается анимированный вид: (до начала исчезновения. 'Текстовый текст ...' не покрывает $ 1,00 справа, потому что по причине, которую я пытаюсь найти, «$ 1,00» отображается поверх «текстовый текстовый текст ...»)

код обычного вида:

export default class NonAnimatedOverlay extends Component {
  render() {
    return (
      <View style={{ width: 100, height: 30, backgroundColor: '#fff',
        zIndex: 2, opacity: 1 }}>
          <Text style={{ color: '#000000' }}>not animated</Text>
      </View>
    )
  }
}

Код для анимированного просмотра:

export default class AnimatedOverlay extends Component {
  constructor(props) {
    super(props);
    this.state = {
     fadeAnim: new Animated.Value(1)
   }
  }

  componentDidMount() {
    Animated.timing(
      this.state.fadeAnim,
      {
        toValue: 0,
        duration: 5000
      }
    ).start();
  }

  render() {
    return (
      <Animated.View style={{ opacity: this.state.fadeAnim }}>
        <View style={{ width: 100, height: 30, backgroundColor: '#fff',
          zIndex: 2, opacity: 1 }}>
        <Text style={{ color: '#000000' }}>Animated</Text>
        </View>
      </Animated.View>
    )
  }
}