animatedjs/animated

Failed prop type: Invalid prop `shadowOffset.width`

Opened this issue · 0 comments

It's react-native-web, but this could be a animated bug.

This code works for opacity animation

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

class SampleApp extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			fadeAnim: new Animated.Value(1), 
		};
	}

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


	}

	render() {
		return (
				<Animated.View style={{width : 300, opacity:this.state.fadeAnim, shadowColor: "black"}}>
					<Text>React Native Web</Text>
				</Animated.View>
				);
	}
}

const rootTag = document.getElementById('react-root');
AppRegistry.registerComponent('SampleApp', () => SampleApp);
AppRegistry.runApplication('SampleApp', { rootTag });

but if I try to use it with shadowOffset

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

class SampleApp extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			fadeAnim: new Animated.Value(1), 
		};
	}

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


	}

	render() {
		return (
				<Animated.View style={{width : 300, shadowColor: "black", shadowOffset: {width: this.state.fadeAnim , height: this.state.fadeAnim }}}>
					<Text>React Native Web</Text>
				</Animated.View>
				);
	}
}

const rootTag = document.getElementById('react-root');
AppRegistry.registerComponent('SampleApp', () => SampleApp);
AppRegistry.runApplication('SampleApp', { rootTag });

It doesn't work

Warning: Failed prop type: Invalid prop `shadowOffset.width` supplied to `View`.
Bad object: {
  "width": 300,
  "shadowColor": "black",
  "shadowOffset": {
    "width": {
      "_children": [],
      "_value": 1,
      "_offset": 0,
      "_animation": null,
      "_listeners": {}
    }