позиционирование элемента поверх элемента с абсолютным позиционированием

Question

Я создал эту кнопку и пытаюсь добиться чего-то подобного:

Вот мой подход на данный момент:

    <TouchableOpacity disabled={disabled} style={{position:'absolute', bottom:5, right:10}} 
onPress={()=>navigation.navigate('FilterByIngreds')}> 
      <View  style={floatStyle}>

      <Image style={{ width:40, height: 44, justifyContent:'center', alignItems:'center'}} 
source= {require('../../assets/img/05_items/ingIcon.png')}/>
      </View> 

      <View style={{width:16, height:16, borderWidth:2, borderColor:'#fff', 
 borderRadius:8, backgroundColor:'rgba(65, 204, 151, 1)', 
 position:'absolute', top:2, right:5, zIndex:5}}/>

    </TouchableOpacity>

НоDOT находится за кнопкой.Любая помощь будет оценена.Заранее спасибо!

Answer 1

Вам нужно удалить и попробовать этот код

< TouchableOpacity
  disabled={true}
  style={{ position: "absolute", bottom: 5, right: 10 }}
  onPress={() => navigation.navigate("FilterByIngreds")}
>
  <Image
    style={{
      width: 100,
      height: 100,
      justifyContent: "center",
      borderRadius: 100 / 2,
      backgroundColor: "#000",
      alignItems: "center"
    }}
  />

  <View
    style={{
      width: 16,
      height: 16,
      borderWidth: 2,
      borderColor: "#f0f",
      borderRadius: 8,
      backgroundColor: "rgba(65, 204, 151, 1)",
      position: "absolute",
      top: 5,
      right: 10,
      zIndex: 5
    }}
  />
</TouchableOpacity>