Анимация.Изображение в реакции-родной

Question

Привет! Я использую Animated и Easing в Reaction-native для отображения анимации маленькой иконки в заголовке. Дело в том, что он работает в эмуляторе, но когда я запускаю свое приложение на реальном устройстве, анимация не отображается. Вот код:

constructor(props) {
    super(props)
    this.animatedValue = new Animated.Value(1)
  }

  _setNavigationParams() {
    const animatedValue = this.animatedValue.interpolate({
      inputRange: [1, 9],
      outputRange: [9, 30],
      extrapolate: 'clamp',
    });
    let headerRight = (
      <TouchableOpacity onPress = {() => {this.openDialog(true)} }>
          <View style={{ flexDirection:'row', justifyContent: 'space-around'}}>
          <View style={{borderRadius: 30, padding:4, overflow: 'hidden', alignItems: 'center',backgroundColor:'white', justifyContent: 'center', marginRight:20 }}>
          <Animated.Image 
              style={{ width:animatedValue, height: animatedValue}}
              source={require("../Images/icone-sonnerie.png")}/>
         </View>
         </View>
        </TouchableOpacity>
    );

    this.props.navigation.setParams({ 
      headerRight
    });
  }

  componentWillMount() {
    this._setNavigationParams();
  }

  componentDidMount(){
    this._loopAnimationUp();
  }

  _loopAnimationUp() {
    this.animatedValue.setValue(5);
    Animated.timing(this.animatedValue, {
      toValue: 9,
      duration: 2000,
      easing: Easing.linear
    }).start((o) => {
      if (o.finished) {
        this._loopAnimationDown();
      }
    });
  }

  _loopAnimationDown() {
    this.animatedValue.setValue(9);
    Animated.timing(this.animatedValue, {
      toValue: 5,
      duration: 2000,
      easing: Easing.linear
    }).start((o) => {
      if (o.finished) {
        this._loopAnimationUp();
      }
    });
  }