Реагируйте на родной развернуть и свернуть ширину и высоту вида на весь экран

Question

Я создал приложение expative native expo, и в настоящее время я использую модуль реагировать на нативные календари.В моем приложении у меня есть экран повестки дня.На экране у меня есть несколько различных элементов, которые при нажатии я хотел бы анимировать, масштабируя их до полного экрана, подобно приложению календаря Google.

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

  expand = () => {
    const {height, width} = Dimensions.get('window');

    Animated.parallel([
      Animated.timing(this.height, {
        toValue : height,
        duration : 600,
        easing : Easing.linear
      }).start(),
      Animated.timing(this.width, {
        toValue : width,
        duration : 600,
        easing : Easing.linear
      }).start()
    ])

  }

Этот код здесь управляет расширением высоты и ширины

<Animated.View style={[styles.item, {backgroundColor: this.props.item.type === 'HOMEWORK' ? this.props.item.color : '#fff', height : this.height, width : this.width, position: this.height > 67 ? 'absolute' : 'relative',}]}>
  <TouchableOpacity onPress = {() => this.expand() } style = {{flex : 1, flexDirection : 'row'}}>


  </TouchableOpacity>
</Animated.View>

Видео анимация: https://i.imgur.com/Mw3m6vv.mp4

Я ожидал, что представление займет весь экран, но поскольку оно вложено во многие элементы, оно не работает так.Он просто занимает часть, в которую он вложен. См. Ниже: