How to set background color of view transparent in React Native

Question

This is the style of the view that i have used  backCover      position   absolute     marginTop  20    top  0    bottom  0    left  0    right  0      Currently it has a white background  I can change the backgroundColor as i want like   343434  but it accepts only max 6 hexvalue for color so I cannot give opacity on that like   00ffffff   I tried using opacity like this  backCover      position   absolute     marginTop  20    top  0    bottom  0    left  0    right  0    opacity  0 5      but it reduces visibility of view s content  So any answers

User · Answer

Try this backgroundColor    00000000  it will set background color to transparent  it follows  rrggbbaa hex codes

User · Answer

The following works fine   backgroundColor   rgba 52  52  52  alpha     You could also try   backgroundColor   transparent

User · Answer

Try to use transparent attribute value for making transparent background color  backgroundColor   transparent

User · Answer

Surprisingly no one told about this  which provides some  clarity   style    backgroundColor   white   opacity  0 7

User · Answer

You should be aware of the current conflicts that exists with iOS and RGBA backgrounds      Summary  public React Native currently exposes the iOS layer shadow   properties more-or-less directly  however there are a number of   problems with this       1  Performance when using these properties is poor by default  That s   because iOS calculates the shadow by getting the exact pixel mask of   the view  including any tranlucent content  and all of its subviews    which is very CPU and GPU-intensive  2  The iOS shadow properties do   not match the syntax or semantics of the CSS box-shadow standard  and   are unlikely to be possible to implement on Android  3  We don t   expose the layer shadowPath property  which is crucial to getting   good performance out of layer shadows       This diff solves problem number 1  by implementing a default   shadowPath that matches the view border for views with an opaque   background  This improves the performance of shadows by optimizing for   the common usage case  I ve also reinstated background color   propagation for views which have shadow props - this should help   ensure that this best-case scenario occurs more often       For views with an explicit transparent background  the shadow will   continue to work as it did before   shadowPath will be left unset    and the shadow will be derived exactly from the pixels of the view and   its subviews   This is the worst-case path for performance  however    so you should avoid it unless absolutely necessary  Support for this   may be disabled by default in future  or dropped altogether       For translucent images  it is suggested that you bake the shadow into   the image itself  or use another mechanism to pre-generate the shadow    For text shadows  you should use the textShadow properties  which work   cross-platform and have much better performance       Problem number 2  will be solved in a future diff  possibly by   renaming the iOS shadowXXX properties to boxShadowXXX  and changing   the syntax and semantics to match the CSS standards       Problem number 3  is now mostly moot  since we generate the shadowPath   automatically  In future  we may provide an iOS-specific prop to set   the path explicitly if there s a demand for more precise control of   the shadow       Reviewed By  weicool   Commit  https   github com facebook react-native commit e4c53c28aea7e067e48f5c8c0100c7cafc031b06

User · Answer

Use rgba value for the backgroundColor   For example   backgroundColor   rgba 52  52  52  0 8     This sets it to a grey color with 80  opacity  which is derived from the opacity decimal  0 8  This value can be anything from 0 0 to 1 0

User · Answer

Here is my solution to a modal that can be rendered on any screen and initialized in App tsx  ModalComponent tsx  import React    Component   from  react   import   Modal  Text  TouchableHighlight  View  StyleSheet  Platform   from  react-native   import EventEmitter from  events      I keep localization files for strings and device metrics like height and width which are used for styling  import strings from        config strings   import metrics from        config metrics    const emitter   new EventEmitter    export const  modalEmitter   emitter  export class ModalView extends Component       state            modalVisible  boolean          text  string           callbackSubmit  any           callbackCancel  any          animation  any            constructor props            super props          this state                 modalVisible  false              text                   callbackSubmit        gt                    callbackCancel        gt                   animation  new Animated Value 0                        componentDidMount              modalEmitter addListener strings modalOpen   event    gt                var state                     modalVisible  true                  text  event text                   callbackSubmit  event onSubmit                   callbackCancel  event onClose                  animation  new Animated Value 0                             this setState state                      modalEmitter addListener strings modalClose   event    gt                var state                     modalVisible  false                  text                       callbackSubmit        gt                        callbackCancel        gt                       animation  new Animated Value 0                             this setState state                        componentWillUnmount             var state                 modalVisible  false              text                   callbackSubmit        gt                    callbackCancel        gt                         this setState state             closeModal        gt             modalEmitter emit strings modalClose             startAnimation     gt           Animated timing this state animation                toValue   0 5              duration   500            start              body        gt            const animatedOpacity                opacity   this state animation                   this startAnimation           return                lt View style    height  0    gt                   lt Modal                     animationType  fade                      transparent  true                      visible  this state modalVisible  gt                          render a transparent gray background over the whole screen and animate it to fade in  touchable opacity to close modal on click out                       lt Animated View style   styles modalBackground  animatedOpacity    gt                            lt TouchableOpacity onPress       gt  this closeModal    activeOpacity  1  style   styles modalBackground   opacity  1      gt                            lt  TouchableOpacity gt                       lt  Animated View gt                          render an absolutely positioned modal component over that background                      lt View style  styles modalContent  gt                            lt View key  text container  gt                               lt Text gt  this state text   lt  Text gt                           lt  View gt                           lt View key  options container  gt                                 keep in mind the content styling is very minimal for this example  you can put in your own component here or style and make it behave as you wish                              lt TouchableOpacity                                 onPress       gt                                        this state callbackSubmit                                       gt                                   lt Text gt Confirm lt  Text gt                               lt  TouchableOpacity gt                                lt TouchableOpacity                                 onPress       gt                                        this state callbackCancel                                       gt                                   lt Text gt Cancel lt  Text gt                               lt  TouchableOpacity gt                            lt  View gt                       lt  View gt                   lt  Modal gt               lt  View gt                         render             return this body               to center the modal on your screen     top  metrics DEVICE HEIGHT 2 positions the top of the modal at the center of your screen    however you wanna consider your modal s height and subtract half of that so that the     center of the modal is centered not the top  additionally for  ios  taking into consideration    the 20px top bunny ears offset hence -  Platform OS     ios   120   100     where 100 is half of the modal s height of 200 const styles   StyleSheet create       modalBackground            height   100             width   100             backgroundColor   gray            zIndex  -1             modalContent             position   absolute            alignSelf   center            zIndex  1           top  metrics DEVICE HEIGHT 2 -  Platform OS     ios   120   100            justifyContent   center            alignItems   center            display   flex            height  200           width   80             borderRadius  27          backgroundColor   white            opacity  1              App tsx render and import  import   ModalView   from     your path  ModalComponent    render         return            lt React Fragment gt               lt StatusBar barStyle   dark-content     gt               lt AppRouter   gt               lt ModalView   gt           lt  React Fragment gt            and to use it from any component  SomeComponent tsx   import    modalEmitter   from     your path  ModalComponent      Some functions within your component  showModal modalText  callbackOnSubmit  callbackOnClose         modalEmitter emit strings modalOpen    text  modalText  onSubmit  callbackOnSubmit bind this   onClose  callbackOnClose bind this        closeModal          modalEmitter emit strings modalClose      Hope I was able to help some of you  I used a very similar structure for in-app notifications  Happy coding

[react-native] How to set background color of view transparent in React Native

Examples related to react-native