Adding whitespace between the border and the image : React Native

Question

I am trying to have my touchable when pressed have a border. I can do that, but I am looking for how to add white space between the border and the circle.
Example:

What I currently have:

colorPicker: {

        flex: 4,
        flexDirection: 'row',
        alignSelf: 'flex-start',
        width: '88%',
        paddingLeft: 16,
    },

circle: {
        position: 'relative',
        height: 40,
        width: 40,
        borderRadius: 40,
        margin: 10,
        borderColor: '#757083',
        borderWidth: 2,
    }

<View style={styles.colorPicker}>
   <TouchableWithoutFeedback
    style={[styles.circle, { backgroundColor: '#090C08' }]}
    onPress={() => this.setState({ color: '#090C08' })}/>

I have tried a couple things but none have come close. Is there a way to add like two borders? I tried using padding and it did nothing, I fiddled with the margins and radius but also nothing. thank you for any help.

Answer 1

I tried with TouchableWithoutFeedback but it didnt work. But a touchable opacity can be styled easily so here's the version with TouchableOpcity. The trick is to use in an inner view and have padding for the outer view or margin for the inner view.

<View style={styles.colorPicker}>
  <TouchableOpacity
    style={{
      backgroundColor: 'white',
      alignSelf: 'center',
      borderRadius: 40,
      borderColor: '#757083',
      borderWidth: 2,
    }}
    onPress={() => {}}>
    <View style={[styles.circle, { backgroundColor: '#090C08' }]}>
    </View>
  </TouchableOpacity>
</View>

Styles

  colorPicker: {
    flex: 4,
    flexDirection: 'row',
    alignSelf: 'flex-start',
    width: '88%',
    paddingLeft: 16,
    backgroundColor: 'red',
  },

  circle: {
    position: 'relative',
    height: 40,
    width: 40,
    borderRadius: 40,
    margin:5
  },