Как сделать показанное ниже изображение похожим на стиль, используя TouchableNativeFeedback в React Native?

Я прикрепляю два изображения, одно из которых показывает текущее представление, а другое — представление, которое я хочу видеть.

Вы можете видеть на изображениях выше, на первом изображении выделенная область представляет собой прямоугольник, а на втором — прямоугольник со скругленными углами. Я хочу добиться второго стиля, но я не могу этого сделать.

Выделенная область на самом деле является результатом использования компонента TouchableNativeFeedback в React Native

Пожалуйста, помогите мне достичь этого

Фрагмент кода указан ниже:-

<View style={styles.chatDetailsScreenActionBar}>
   <View style={styles.chatDetailsScreenBackButtonView}>
       <TouchableNativeFeedback>
           <View style={styles.chatDetailsScreenBackButton}>
               <MaterialIcons name="arrow-back" size={30} color="white" />
               <Image source={{ uri: this.state.selectedChat.chat_thumbnail }} 
                          style={styles.chatDetailsScreenBackButtonImage} />
           </View>
       </TouchableNativeFeedback>
   </View>
</View>

Код стилей для вышеуказанного макета:-

chatDetailsScreenActionBar: {
        height: 70,
        backgroundColor: '#006156',
        justifyContent: 'center',
        paddingHorizontal: 10
    },
    chatDetailsScreenBackButtonView: {
        height: 55,
        width: 70,
        borderRadius: 24
    },
    chatDetailsScreenBackButton: {
        flexDirection: 'row',
        alignItems: 'center',
        height: "100%"
    },
    chatDetailsScreenBackButtonImage: {
        height: 36,
        width: 36,
        borderRadius: 18
    }