What s the best way to add a full screen background image in React Native

Question

I wanted to add a full-screen image to the View so I write this code  return        lt View style  styles container  gt           lt Image source  require  image egg     style  styles backgroundImage   gt       lt  View gt      and defined the style as  var styles   StyleSheet create   container         flex  1       justifyContent   center        alignItems   center        backgroundColor    F5FCFF        flexDirection   column           backgroundImage        width 320       height 480             but in this way how am I supposed to find the actual iPhone screen size   I ve seen an API to access the Pixel Density but nothing about the screen size     Any idea

User · Answer

Note  This solution is old  Please refer to https   facebook github io react-native docs images html background-image-via-nesting instead  Try this solution  It is officially supported  I have just tested it and works flawlessly   var styles   StyleSheet create     backgroundImage        flex  1      alignSelf   stretch       width  null            And as for using it as Background image  just do the following    lt Image style  styles backgroundImage  gt     lt View gt       lt Text gt All your stuff lt  Text gt     lt  View gt   lt  Image gt

User · Answer

Based on Braden Rockwell Napier s answer  I made this BackgroundImage component  BackgroundImage js  import React    Component   from  react  import   Image   from  react-native   class BackgroundImage extends Component     render         const  source  children  style     props    this props     return          lt Image source   source                style     flex  1  width  null  height  null     style                      props  gt            children          lt  Image gt              BackgroundImage propTypes       source  React PropTypes object    children  React PropTypes object    style  React PropTypes object   export default BackgroundImage   someWhereInMyApp js   import BackgroundImage from    backgroundImage          lt BackgroundImage source     uri   https   facebook github io react-native img header logo png      gt       lt Text gt Test lt  Text gt    lt  BackgroundImage gt

User · Answer

incase you didn t solve it yet  React Native v 0 42 0 have resizeMode   lt Image style   resizeMode   contain    source  require    img png      gt

User · Answer

RN     46       the  component cannot contain children if you want to render content on top of the image  consider using absolute positioning    or you can use ImageBackground   x000D   x000D  import React from  react   x000D  import    x000D        x000D    StyleSheet  x000D    ImageBackground  x000D    from  react-native   x000D   x000D  render     x000D    return   x000D       x000D     lt ImageBackground source  require  path to img    style  styles backgroundImage   gt  x000D         lt View style   flex  1  backgroundColor   transparent      gt  x000D         lt View style   flex  3 backgroundColor   transparent     gt  x000D     lt  ImageBackground gt  x000D       x000D       x000D    x000D   x000D  const styles   StyleSheet create   x000D    backgroundImage    x000D          flex  1  x000D          width  null  x000D          height  null  x000D          resizeMode   cover  x000D         x000D      x000D   x000D   x000D

User · Answer

I ve heard about having to use BackgroundImage because in future you are supposed to not be able to nest the Image tag  But I could not get BackgroudImage to properly display my background  What I did was nest my Image inside a View tag and style both the outer View as well as the image  Keys were setting width to null  and setting resizeMode to  stretch   Below is my code    x000D   x000D  import React   Component  from  react   x000D  import   View  Text  StyleSheet  Image  from  react-native   x000D   x000D  export default class BasicImage extends Component   x000D   constructor props    x000D     super props   x000D   x000D     this state       x000D     x000D   x000D   render     x000D    return   x000D      lt View style  styles container  gt  x000D          lt Image  x000D           source  this props source  x000D           style  styles backgroundImage  x000D           gt  x000D         lt  View gt  x000D      x000D     x000D    x000D   x000D  const styles   StyleSheet create      x000D    container    x000D     flex  1  x000D     width  null  x000D     height  null  x000D     marginBottom  50 x000D       x000D      text    x000D        marginLeft  5  x000D        marginTop  22  x000D        fontFamily   fontawesome   x000D          color   black   x000D          fontSize  25  x000D          backgroundColor   rgba 0 0 0 0    x000D         x000D    backgroundImage    x000D     flex  1  x000D     width  null  x000D     height  null  x000D     resizeMode   stretch   x000D      x000D      x000D   x000D   x000D

User · Answer

You can use flex  1 styling on an  lt Image gt  element to have it fill the whole screen  You can then use one of the Image resize modes to have the image completely fill the element    lt Image source  require  image egg    style  styles backgroundImage    gt    Style   import React from  react-native    let   StyleSheet     React   let styles   StyleSheet create     backgroundImage        flex  1      resizeMode   cover      or  stretch            I m pretty sure you can get rid of the  lt View gt  wrapping your image and this will work

User · Answer

Oh God Finally I find a great way for React-Native V 0 52-RC and native-base   Your Content Tag Should be something like this                                                                     lt Content contentContainerStyle  styles container  gt       lt ImageBackground         source  require       assets img back jpg            style  styles backgroundImage  gt           lt Text gt              Some text here              lt  Text gt       lt  ImageBackground gt   lt  Content gt    And Your essential style is                                                                     container        flex  1      justifyContent   center       alignItems   center     backgroundImage       flex   1      width    100       It works fine friends     have fun

User · Answer

Since 0 14 this method won t work  so I built a static component that will make this simple for you guys   You can just paste this in or reference it as a component     This should be re-useable and it will allow you to add additional styles and properties as-if it were a standard  lt Image   gt  component  const BackgroundImage      source  children  style     props      gt      return          lt Image         source  source          style   flex  1  width  null  height  null     style               props  gt           children         lt  Image gt           just paste this in and then you can use it like image and it should fit the entire size of the view it is in  so if it s the top view it will fill your screen    lt BackgroundImage source  require        assets backgrounds palms jpg    gt       lt Scene styles  styles      store    gt   lt  BackgroundImage gt    Click here for a Preview Image

User · Answer

If you want to add a background image you can do so by using  but first you have to import this from  react-native  as follows  import  ImageBackground  from  react-native    then      export default function App              return            lt View style  styles body  gt                lt ImageBackground source  require    path to yourimage    style  styles backgroungImage  gt                   lt View style  styles container  gt Hello world                   lt  View gt               lt  ImageBackground gt           lt  View gt                const styles   StyleSheet create       backgroungImage        flex  1      maxWidth   100

User · Answer

import React    Component   from  react   import   Image  StyleSheet   from  react-native    export default class App extends Component     render         return          lt Image source   uri   http   i imgur com IGlBYaC jpg    style  s backgroundImage    gt                const s   StyleSheet create     backgroundImage          flex  1        width  null        height  null            You can try it at  https   sketch expo io B1EAShDie  from  github com Dorian sketch-reactive-native-apps   Docs  https   facebook github io react-native docs images html background-image-via-nesting

User · Answer

If you want to use it as a background image  you will need to use the new  lt ImageBackground gt  component introduced at the end of June 2017 in v0 46  It supports nesting while  lt Image gt  soon won t   Here is the commit summary      We are removing support of nesting views inside  component  We decided to do this because having this feature makes supporting   intrinsinc content size of the  lt Image gt  impossible  so when the   transition process is complete  there will be no need to specify image   size explicitly  it can be inferred from actual image bitmap       And this is the step  0        is very simple drop-in replacement which implements   this functionality via very simple styling  Please  use    instead of  if you want to put something   inside

User · Answer

This has been deprecated now you can use ImageBackground   This is how I ve done it  The main deal was getting rid of the static fixed sizes   class ReactStrap extends React Component     render         return          lt Image source  require  image background    style  styles container  gt              Your Content            lt  Image gt                var styles   StyleSheet create     container        flex  1         remove width and height to override fixed static size     width  null      height  null

User · Answer

import   ImageBackground   from  quot react-native quot    lt ImageBackground      style   width   100    height   100          source  require     assets backgroundLogin jpg     gt    path here inside      lt Text gt React lt  Text gt   lt  ImageBackground gt

User · Answer

Easiest way to implemet background    lt ImageBackground style  styles container  source  require        images screen login jpg    gt     lt View style  styles logoContainer  gt       lt Image style  styles logo        source  require        images logo png          gt     lt  View gt      lt View style  styles containerTextInput  gt       lt  LoginForm   gt     lt  View gt      lt  ImageBackground gt   const styles   StyleSheet create     container        flex  1           backgroundColor   0984e3         containerTextInput        marginTop  10      justifyContent   center          logoContainer        marginTop  100      justifyContent   center       alignItems   center         logo        height  150      width  150

User · Answer

I solved my background image issue using this code   import React from  react   import   StyleSheet  Text  View Alert ImageBackground   from  react-native    import   TextInput Button IconButton Colors Avatar   from  react-native-paper    class SignInScreen extends React Component        state            UsernameOrEmail               Password                  render           return                 lt ImageBackground  source  require     assets icons background3 jpg    style  styles backgroundImage  gt                 lt Text gt React Native App lt  Text gt               lt  ImageBackground gt                               export default SignInScreen       const styles   StyleSheet create        backgroundImage          flex  1        resizeMode   cover      or  stretch

User · Answer

x000D   x000D  import React from  react   import            StyleSheet    ImageBackground    from  react-native    render       return           lt ImageBackground source  require  path to img    style  styles backgroundImage   gt         lt View style   flex  1  backgroundColor   transparent      gt         lt View style   flex  3 backgroundColor   transparent     gt     lt  ImageBackground gt               const styles   StyleSheet create     backgroundImage            flex  1          width  null          height  null          resizeMode   cover             x000D   x000D   x000D

User · Answer

You can also use your image as a container   render         return            lt Image             source  require    images background png                style  styles container  gt               lt Text gt                This text will be on top of the image              lt  Text gt           lt  Image gt             const styles   StyleSheet create       container            flex  1          width  undefined          height  undefined          justifyContent   center           alignItems   center

User · Answer

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   Example   return      lt ImageBackground source       style   width   100    height   100     gt       lt Text gt Inside lt  Text gt     lt  ImageBackground gt       For more  ImageBackground   React Native     Note that you must specify some width and height style attributes

User · Answer

UPDATE to ImageBackground  Since using  lt Image   gt  as a container is deprecated for a while  all answers actually miss something important  For proper use choose  lt ImageBackground   gt  with style and imageStyle prop  Apply all Image relevant styles to imageStyle   For example    lt ImageBackground     source  yourImage      style          backgroundColor    fc0         width   100       applied to Image       height   100               imageStyle          resizeMode   contain     works only here          gt       lt Text gt Some Content lt  Text gt   lt  ImageBackground gt    https   github com facebook react-native blob master Libraries Image ImageBackground js

User · Answer

For me this works fine  I used ImageBackground to set background image   import React from  react   import   SafeAreaView  StyleSheet  ScrollView  View  Text  StatusBar  Image  ImageBackground   from  react-native   const App       gt  React Node        gt    return        lt  gt         lt StatusBar barStyle  dark-content    gt         lt View style  styles container  gt          lt ImageBackground source  require    Assets xcassets AppBackGround imageset 2x png    style  styles backgroundImage  gt           lt View style  styles sectionContainer  gt                 lt Text style  styles title  gt Marketing at the speed of today lt  Text gt           lt  View gt         lt  ImageBackground gt         lt  View gt       lt   gt            const styles   StyleSheet create     container        flex  1      fontFamily   -apple-system  BlinkMacSystemFont Segoe UI       justifyContent   center       alignItems   center          backgroundImage        flex  1      resizeMode   cover       height   100        width   100          title       color    9A9A9A       fontSize  24      justifyContent   center       alignItems   center        sectionContainer        marginTop  32      paddingHorizontal  24            export default App

User · Answer

The width and height with value null doesn t work for me  then I thought to use top  bottom  left  and right position and it worked  Example   bg            position   absolute           top  0          bottom  0          left  0          right  0          resizeMode   stretch        And the JSX    lt Image style  styles bg  source   uri   IMAGE URI      gt

User · Answer

ImageBackground might have limit  Actually  you can use  directly and it is not deprecated   If you want to add Background Image in React Native and also wants to add other elements on that Background Image  follow the step below    Create a Container View Create an Image element with 100  width and height  Also resizeMode   Cover  Create another View element under Image element with position   absolute    This is the code I use  import React    Component   from  react   import  Text  View  Image  from  react-native   import Screen from     library ScreenSize   export default class MenuScreen extends Component       static navigationOptions           header  null           render             return              lt View style    flex  1    gt               lt Image               style                    resizeMode   quot cover quot                   width   quot 100  quot                   height   quot 100  quot                   justifyContent   quot center quot                   alignItems   quot center quot                   opacity  0 4                                source  require  quot    assets images menuBackgroundImage jpg quot                 gt  lt  Image gt                lt View style                    width  Screen width                  height  Screen height   0 55                  position   absolute                   bottom  0   gt                   lt Text style                        fontSize  48                    gt Glad to Meet You  lt  Text gt               lt  View gt             lt  View gt                       Enjoy Coding     Output

User · Answer

An another easy solution    lt Image source  require     assets background png          style   position   absolute   zIndex  -1    gt    lt View style   flex  1  position   absolute    gt        rest of your content     lt  View gt

User · Answer

I tried several of these answers to no avail for android using react-native version   0 19 0     For some reason  the resizeMode inside my stylesheet did not work appropriately  However  when sytlesheet had   backgroundImage    flex  1  width  null  height  null      and  within the Image tag I specified the resizeMode     lt Image source  require  path to image png    style   styles backgroundImage  resizeMode  Image resizeMode sretch  gt    It worked perfectly  As mentioned above  you can use Image resizeMode cover or contain as well   Hope this helps

User · Answer

Latest as of Oct 17  RN     46   import React from  react   import            ImageBackground    from  react-native    render       return        lt ImageBackground source  require  path to img    style  styles urStyle  gt       lt  ImageBackground gt           http   facebook github io react-native releases 0 49 docs images html background-image-via-nesting

User · Answer

Update March 2018 Using Image is deprecated use ImageBackground     lt ImageBackground            source   uri   https   images pexels com photos 89432 pexels-photo-89432 jpeg h 350 amp dpr 2 amp auto compress amp cs tinysrgb              style    flex  1              width  null              height  null                          gt          lt View style    flex  1  alignItems   center   justifyContent   center     gt           lt Text gt Your Contents lt  Text gt          lt  View gt     lt  ImageBackground  gt

User · Answer

Use  lt ImageBackground gt  as already said by antoine129  Using  lt Image gt  with children is deprecated now   class AwesomeClass extends React Component     render         return          lt ImageBackground source  require  image background    style  styles container  gt           lt YourAwesomeComponent  gt         lt  ImageBackground gt                var styles   StyleSheet create     container        flex  1

User · Answer

You need to ensure your Image has resizeMode  Image resizeMode contain  or  Image resizeMode stretch  and set image style width to null   lt Image source  CharacterImage  style   width  null    resizeMode  Image resizeMode contain   gt

[javascript] What's the best way to add a full screen background image in React Native

Examples related to javascript

Examples related to react-native