react native - Reactnative make Dialog background transparent

Question

I am using Dialog to show a popup issue is i am not able to change its background color to transparent.

return (
    <View style={styles.container}>
      {
        loading
          ? <ActivityIndicator color="#10cea8" size="large" />
          : brands == null || brands.length < 1
            ?
            <Text style={{ fontSize: 20, fontWeight: 'bold', color: 'grey' }}>
              No restaurants found :(
            </Text>
            :
            <ScrollView contentContainerStyle={{ paddingBottom: 24 }} style={{ paddingBottom: 24 }} keyboardShouldPersistTaps="handled">
              <Dialog contentStyle={{ margin: 0, padding: 0, marginTop: 0, paddingTop: 0, backgroundColor: 'rgba(52, 52, 52, 0.9)' }}


                visible={dialogVisible}
                animationType={'slide'}
              >
                <View style={styles.pop}>
                  <Image
                    source={require('../../../public/images/logo.png')}
                    resizeMode={'contain'}
                    style={{
                      width: 200,
                      height: 130
                    }}
                  />
                  <View style={{ height: 10 }}></View>

                  <Text style={{ textAlign: 'center', color: "white", fontSize: 21, }}>Happy to serve you !</Text>
                  <Text style={{ textAlign: 'center', color: "white", fontSize: 18 }}>Choose your nearest Branch.</Text>

                  <View style={{ height: 30 }}></View>
                  <TouchableOpacity onPress={() => setDialogVisible(false)} style={{ backgroundColor: 'white', width: '100%', height: 45, justifyContent: 'center' }}><Text style={{ textAlign: 'center', color: "#10cea8", fontSize: 18 }}>GOT IT</Text></TouchableOpacity>
                </View>
              </Dialog>
              {
                brands.length > 0 && brands.map((b, i) => {
                  return (
                    <TouchableOpacity key={`brand-${i}`}
                      onPress={() => {
                        navigation.navigate('Menus', {
                          Locations: b.Locations,
                          brandID: b.BrandID,
                          brandName: b.Name
                        })
                      }}>
                      <View style={styles.cardStyle} >
                        <ImageBackground
                          style={styles.backgroundImgStyle}
                          imageStyle={{ borderRadius: 15 }}
                          source={{ uri: b.CompanyURl }}
                        >
                          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                            <Image
                              style={styles.logoStyle}
                              source={{ uri: b.Image }}
                            />
                            <Text style={styles.title} >
                              {b.Name}
                            </Text>
                            <Text style={styles.description} >
                              {b.Address}
                            </Text>
                          </View>
                        </ImageBackground>
                      </View>
                    </TouchableOpacity>
                  )
                })
              }
            </ScrollView>
      }

    </View>
  )
}

export default Home;

const styles = StyleSheet.create({

  pop: {
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    borderBottomRightRadius: 30,
    borderBottomLeftRadius: 30,
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#10cea8'
  },

  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    
  },
  cardStyle: {
    borderColor: '#B0A8A6',
    width: Dimensions.get('window').width - 30,
    height: 185,
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 24
  },
  backgroundImgStyle: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover'
  },
  logoStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 65,
    height: 65
  },
  title: {
    color: 'white',
    fontSize: 20,
    marginTop: 10,
    lineHeight: 28,
    fontWeight: 'bold'
  },

  description: {
    color: 'white',
    fontSize: 13,
    lineHeight: 20,
    fontWeight: '400'
  }
});

As you can see i have set backgroundColor to rgba(52, 52, 52, 0.9) but its not going to transparent. if i change it to red or blue something it working but transparent not working on this.

[![enter image description here]

you can see the popup behind borderRadius its showing dark grey color. I need to make it full transparent.

Answer 1

等待大神答复