title: change custom radio button image onclick
body: <p>I'm trying to create a button that can change the image when it is clicked, I've tried with changing its opacity now I'm trying to change the image. Here's what I've done for the custom button</p>
  
  <pre><code>const styles = StyleSheet.create({
      container: {
          marginVertical: normalize(5),
          opacity: 0.5
      },
  
      activeButton: {
          opacity: 1
      }
  });
  
  export default class RadioButton extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              selected: this.props.currentSelection === this.props.value,
          }
      }
  
      componentDidUpdate(prevProps) {
          if (this.props.currentSelection !== prevProps.currentSelection) {
              this.setState({ selected: this.props.currentSelection === this.props.value });
          }
      }
  
      render() {
          let activeButton = this.props.activeStyle ? this.props.activeStyle : styles.activeButton;
  
          return (
              &lt;View style={[styles.container, this.props.containerStyle, this.state.selected ? activeButton : null]}&gt;
                  &lt;TouchableOpacity onPress={() =&gt; {
                      this.setState({ selected: !this.state.selected });
                      this.props.onPress();
                  }}&gt;
                      {
                          this.props.element ?
                              this.props.element :
                              &lt;Text&gt; {this.props.value} &lt;/Text&gt;
                      }
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
  
          );
      }
  }
  </code></pre>
  
  <p>It should be like this <a href="https://i.stack.imgur.com/bR84p.png" rel="nofollow noreferrer">image</a></p>