0.8.0rc2 - rounded View issue

index.ios.js

/* @flow */

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated
} = React;

var Dimensions = require('Dimensions');
var Constants = {
  vw: Dimensions.get('window').width / 100,
  vh: Dimensions.get('window').height / 100
}

class Option extends React.Component {

  constructor() {
    super();
    this.state = {
      enter: new Animated.Value(0.5),
      press: new Animated.Value(1),
      isSelected: false
    };
  }

  componentDidMount() {
    setTimeout(() => {
       this.state.enter.setValue(1.5);
       this._animateEntrance();
    }, this.props.timeout);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.option !== this.props.option) {
      this.setState({isSelected: false})
      setTimeout(() => {
         this.state.enter.setValue(1.5);
         this._animateEntrance();
      }, nextProps.timeout);
    }
  }

  _animateEntrance() {
     Animated.spring(
       this.state.enter,
       { toValue: 1, friction: 1 }
     ).start();
  }

  render() {
    const handlers = {
      onStartShouldSetResponder: () => !this.state.isActive,
      onResponderGrant: () => {
        this.setState({isSelected: true});
        Animated.spring(
          this.state.enter,
          { toValue: 1.5 }
        ).start();
      },
      onResponderRelease: () => {
        setTimeout(() => {
          this.state.enter.setValue(1);
          this.props.onSelect(this.props.option)
        }, 200);
      }
    }
    const scale = this.state.enter;
    const buttonStyles = [styles.roundButton, {transform: [{scale: scale}]}, (this.state.isSelected ? styles.roundButtonActive : {})]
    const textStyles = [styles.textStyles, (this.state.isSelected ? {color: 'black'} : {})];
    return (
      <Animated.View style={buttonStyles} {...handlers}>
        <Text style={textStyles}>{this.props.option}</Text>
      </Animated.View>

    )
  }
}

class animatedrounded extends React.Component {
  constructor() {
    super();
    this.state = {}
  }

  render() {
    var gen = () => Math.round(Math.random()*10);
    const options = [gen(), gen(), gen()].map((o, i) => <Option
      option={o} timeout={i*200}
      onSelect={(e) => this.setState({selected: e})}/>)
    return (
      <View style={styles.container}>
        {options}
      </View>
    );
  }
};

const BASE_BUTTON_RADIUS = 10;
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  roundButton: {
    width: Constants.vw*2*BASE_BUTTON_RADIUS,
    height: Constants.vw*2*BASE_BUTTON_RADIUS,
    borderRadius: Constants.vw*BASE_BUTTON_RADIUS,
    borderColor: '#FBF8BD',
    borderWidth: 4,
    backgroundColor: 'white',
    alignItems: 'center',
    //flex: 1,
    margin: 0,
    padding: 0,
    justifyContent: 'center'
  },
  roundButtonActive: {
    backgroundColor: '#FBF8BD',
    overflow: 'hidden'
  },
  textStyles: {
    fontSize: 28,
  }
});

AppRegistry.registerComponent('animatedrounded', () => animatedrounded);