Failed prop type: Invalid prop `opacity` of type `object` supplied to `RCTView`

Issue

I'm following the React Native tutorial from: https://facebook.github.io/react-native/docs/animated.html

However, I got the following warning when I ran my code: Failed prop type: Invalid prop opacity of type object supplied to RCTView

And the component just disappear without animation when fade() got called.

And here is a sample code:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  Animated,
  StyleSheet
} from 'react-native';

import Icon from 'react-native-vector-icon/FontAwesome'

export default class Sample extends Component {
  state = {
    fadeAnim: new Animated.Value(0),
  }
  fade() {
    Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 10000,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }
  render() {
    let { fadeAnim } = this.state;

    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={() => {this.fade()}}>
          <Icon name="circle" size={30} color="#fff" style={{opacity: fadeAnim}}
          >
        </TouchableHighlight>
      </View>
    );
  }
......
}

Solution

There is a problem in your code:

Icon tag can not be used in animcation, so react native complaint.

Instead, you should wrap the Icon with either: TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback whichever works.

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

And bind the property to the Touchable* rather than Icon.

Answered By - hotap