How to use ImageBackground to set background image for screen in react-native

Question

When I use  in react-native it gives warning that using  with children is deprecated and will be error in future  User  instead   So  If I use  it doesn t give expected result which I was getting using   Here is the code I wrote for using    lt ImageBackground source  require        img splash splash bg png    style  styles backgroundImage   gt           lt  ImageBackground gt    And style code is   const styles   StyleSheet create   backgroundImage        flex  1         width  undefined         height  undefined         flexDirection   column          backgroundColor  transparent          justifyContent   flex-start

User · Answer

I think this will help u    import React    Component   from  react   import   homePageStyles   from     styles Style   import   Text  ImageBackground   from  react-native   import HomePageWallpaper from     images homePageWallpaper jpg    export default class Home extends Component       render             return                lt ImageBackground source  HomePageWallpaper  style    flex  1  justifyContent   center   width  null  height  null    gt                   lt Container gt                                           lt Content gt                           lt Text style  homePageStyles description text  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  lt  Text gt                       lt  Content gt                   lt  Container  gt               lt  ImageBackground gt

User · Answer

Here is a link to the RN docs  https   facebook github io react-native docs images     A common feature request from developers familiar with the web is background-image  To handle this use case  you can use the  lt ImageBackground gt  component  which has the same props as  lt Image gt   and add whatever children to it you would like to layer on top of it    You might not want to use  lt ImageBackground gt  in some cases  since the implementation is very simple  Refer to  lt ImageBackground gt  s source code for more insight  and create your own custom component when needed   return      lt ImageBackground source  require    image png    style   width   100    height   100     gt       lt Text gt Inside lt  Text gt     lt  ImageBackground gt       Note that you must specify some width and height style attributes   Note also that the file path is relative to the directory the component is in

User · Answer

ImageBackground is a very simple and useful component Put your component inside ImageBackground as a nested component and tweak a position of your component by using position   Here s an example    x000D   x000D   lt ImageBackground x000D    source    uri  hoge    x000D    style    x000D      height  100  x000D      width  100  x000D      position   relative    x000D      top  0  x000D      left  0 x000D       x000D   gt  x000D     lt Text x000D      style    x000D        fontWeight   bold   x000D        color   white   x000D        position   absolute    x000D        bottom  0   x000D        left  0 x000D         x000D     gt  x000D      Hello World x000D     lt  Text gt  x000D   lt  ImageBackground gt  x000D   x000D   x000D

User · Answer

To add background Image  React Native is based on component  the ImageBackground Component requires two props style      and source  require         lt ImageBackground source  require    wallpaper jpg    style   width   100    height   100     gt    lt     yourContent Goes here    gt       lt  ImageBackground gt

User · Answer

Two options     Try setting width and height to width and height of the device screen Good old position absolute   Code for  2     render        return           lt View style    flex  1    gt              lt Image style    width  screenWidth  height  screenHeight  position   absolute   top  0  left  0     gt              lt Text gt Hey look  image background lt  Text gt           lt  View gt            Edit  For option  2 you can experiment with resizeMode  stretch cover   Edit 2   Keep in mind that option  2 renders the image and then everything after that in this order  which means that some pixels are rendered twice  this might have a very small performance impact  usually unnoticeable  but just for your information

User · Answer

i achieved this by   import   ImageBackground   from  react-native     lt ImageBackground style   styles imgBackground                     resizeMode  cover                    source  require    Your Path png    gt        place your now nested component JSX code here   lt  ImageBackground gt    And then the Styles   imgBackground            width   100            height   100            flex  1

User · Answer

You have to import background component first to use backgroundimage on your code

User · Answer

const   width  height     Dimensions get  window      lt View style   marginBottom  20   gt      lt Image          style    height  200  width  width  position   absolute   resizeMode   cover             source    uri   https   picsum photos   width   200  random                       gt      lt View style  styles productBar  gt          lt View style  styles productElement  gt               lt Image                   style    height  160  width  width - 250  position   relative   resizeMode   cover                       source    uri   https   picsum photos    250    160  random                               gt          lt  View gt          lt View style  styles productElement  gt                lt Text style    fontSize  16  paddingLeft  20    gt Baslik lt  Text gt                lt Text style    fontSize  12  paddingLeft  20  color   blue    gt Alt Baslik lt  Text gt          lt  View gt      lt  View gt   lt  View gt      productBar        margin  20      marginBottom  0      justifyContent   flex-start         flexDirection   row         productElement        marginBottom  0

User · Answer

const img          img splash splash bg png    lt ImageBackground  source    uri  img    style  styles backgroundImage   gt       lt  ImageBackground gt    This worked for me  Reference to RN docs can be found here I wrote mine by reading this- https   facebook github io react-native docs images html background-image-via-nesting

User · Answer

I faced same problem with background image and its child components including logo images  After wasting few hours  I found the correct way to solve this problem  This is surely helped to you  var  View  Text  Image  ImageBackground    require  react-native    import Images from   assets    export default class Welcome extends Component       render             return                lt ImageBackground source  Images main bg  style  styles container  gt                   lt View style  styles markWrap  gt                       lt Image source  Images main logo                       style  styles mark  resizeMode  quot contain quot    gt                   lt  View gt                   lt View style   styles wrapper   gt                         Here put your other components                   lt  View gt                                              lt  ImageBackground gt                      var styles   StyleSheet create       container           flex  1             markWrap            flex  1          marginTop  83          borderWidth 1  borderColor   quot green quot               mark            width  null          height  null          flex  1             wrapper           borderWidth 1  borderColor   quot green quot     for debug         flex  1          position  quot relative quot             Logo on background Image   PS  I put on the dummy image on this screen instead of real company logo

User · Answer

lt ImageBackground             source  require     assests background image jpg                style  styles container            gt               lt View                 style                        flex  1                      justifyContent   center                       alignItems   center                                  gt                   lt Button                     onPress       gt  this props showImagePickerComponent this props navigation                       title  START                      color   841584                      accessibilityLabel  Increase Count                    gt               lt  View gt           lt  ImageBackground gt    Please use this code for set background image in react native

User · Answer

You can use  ImageBackground  component on React Native    lt ImageBackground   source  yourSourceFile    style   width   100    height   100      gt        lt     yourContent    gt   lt  ImageBackground gt

User · Answer

hero-image     background-image  url  photographer jpg       The image used      background-color   cccccc     Used if the image is unavailable      height  500px     You must set a specified height      background-position  center     Center the image      background-repeat  no-repeat     Do not repeat the image      background-size  cover     Resize the background image to cover the entire container        look result

[javascript] How to use ImageBackground to set background image for screen in react-native

Examples related to javascript

Examples related to react-native

Examples related to imagebackground