Skip to content

Instantly share code, notes, and snippets.

@mmazzarolo
Last active May 26, 2021 15:29
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mmazzarolo/3ed3883d5c838c7010c353c6f3ac2be8 to your computer and use it in GitHub Desktop.
Save mmazzarolo/3ed3883d5c838c7010c353c6f3ac2be8 to your computer and use it in GitHub Desktop.
Simple animated stateless React-Native radio button
import React, { PropTypes } from 'react'
import { StyleSheet, TouchableOpacity } from 'react-native'
import { View } from 'react-native-animatable'
const DEFAULT_SIZE_MULTIPLIER = 0.7
const DEFAULT_OUTER_BORDER_WIDTH_MULTIPLIER = 0.2
const RadioButton = ({ size, innerColor, outerColor, isSelected, onPress, ...props }) => {
const outerStyle = {
borderColor: outerColor,
width: size + size * DEFAULT_SIZE_MULTIPLIER,
height: size + size * DEFAULT_SIZE_MULTIPLIER,
borderRadius: (size + size * DEFAULT_SIZE_MULTIPLIER) / 2,
borderWidth: size * DEFAULT_OUTER_BORDER_WIDTH_MULTIPLIER
}
const innerStyle = {
width: size,
height: size,
borderRadius: size / 2,
backgroundColor: innerColor
}
const innerContent = isSelected
? <View style={innerStyle} {...props} />
: null
return (
<TouchableOpacity style={[styles.radio, outerStyle]} onPress={onPress}>
{isSelected ? <View style={innerStyle} {...this.props} /> : null}
</TouchableOpacity>
)
}
RadioButton.propTypes = {
size: PropTypes.number,
innerColor: PropTypes.string,
outerColor: PropTypes.string,
isSelected: PropTypes.bool,
onPress: PropTypes.func
}
RadioButton.defaultProps = {
size: 16,
innerColor: 'dodgerblue',
outerColor: 'dodgerblue'
}
const styles = StyleSheet.create({
radio: {
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center'
}
})
export default RadioButton
@mmazzarolo
Copy link
Author

mmazzarolo commented May 23, 2016

Preview:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment