how to make a circular image in React Native with FlexBox (not fixed width/height). Note that this may not respond properly to changes such as device rotations; that's a todo.

react_native_circular_flex_image.js

class RoundImage extends React.Component {
  state = { borderRadius: null }

  // tactical hacks inbound
  componentDidMount() {
    setTimeout(function() {  // for some reason, have to do this async for it to work
      const image = this.refs.image
      image.measure((a, b, width, height, px, py) => {
        this.setState({borderRadius: width / 2})
      })
    }.bind(this))
  }

  render() {
    return (
      <Image
        ref="image"
        source={this.props.source}
        style={Object.assign(this.props.style, {aspectRatio: 1, borderRadius: this.state.borderRadius})}
      />
    )
  }
}