Skip to content

Instantly share code, notes, and snippets.

@ptmt
Created Jul 20, 2015
Embed
What would you like to do?
0.8.0rc2 - rounded View issue
/* @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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment