unable set my background image in react native?

Question

I am new to react native, while learning from native docs , I got stuck by ImageBackground usage. My code is given below , help will be appreciated . It was working fine, but when I started using navigator function, its not working as normal.please suggest an optimal solution to solve this problem.

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={{
            uri:
              'https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80',
          }}
          style={styles.backgroundContainer}/>
          <Text style={styles.welcomenote}>WELCOME TO ME</Text>
          <View style={styles.loginbtn}>
            <Button style={styles.loginbtn} title="LOGIN" />
          </View>
          <View style={styles.signupbtn}>
            <Button title="SIGNUP" />
          </View>

      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    flex: 1,
    width: 300,
    height: 100,
    resizeMode: 'cover',
    justifyContent: 'center',
    alignItems: 'center,',
  },
  loginbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 250,
    bottom: 0,
  },
  signupbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 200,
    bottom: 0,
  },
  welcomenote: {
    position: 'absolute',
    left: 70,
    right: 0,
    top: 200,
    bottom: 0,
    width: '90%',
    height: 40,
    color: 'white',
  },
});

everything is fine,it's not showing the background image

do you want background image to take full height? – Kamal Pandey Sep 25 '19 at 10:25 — Kamal Pandey, Sep 25 '19 at 10:25
@sachin did you try my answer? – stackdave Sep 25 '19 at 12:05 — stackdave, Sep 25 '19 at 12:05

score 2 · Accepted Answer · answered Sep 25 '19 at 10:01

Try this,

 import React from 'react';
    import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
    import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';

    class HomeScreen extends React.Component {
      render() {
        return (
          <View style={styles.container}>
         <Image source={require('https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80')}  style= 
         {styles.backgroundContainer}/>
              <Text style={styles.welcomenote}>WELCOME TO ME</Text>
              <View style={styles.loginbtn}>
                <Button style={styles.loginbtn} title="LOGIN" />
              </View>
              <View style={styles.signupbtn}>
                <Button title="SIGNUP" />
              </View>

          </View>
        );
      }
    }
    class DetailsScreen extends React.Component {
      render() {
        return (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
          </View>
        );
      }
    }

    const RootStack = createStackNavigator(
      {
        Home: HomeScreen,
        Details: DetailsScreen,
      },
      {
        initialRouteName: 'Home',
      }
    );

    const AppContainer = createAppContainer(RootStack);

    export default class App extends React.Component {
      render() {
        return <AppContainer />;
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
      backgroundContainer: {
        flex: 1,
        width: 300,
        height: 100,
        resizeMode: 'cover',
        justifyContent: 'center',
        alignItems: 'center,',
      },
      loginbtn: {
        padding: 20,
        width: '90%',
        height: 40,
        position: 'absolute',
        left: 20,
        right: 0,
        top: 250,
        bottom: 0,
      },
      signupbtn: {
        padding: 20,
        width: '90%',
        height: 40,
        position: 'absolute',
        left: 20,
        right: 0,
        top: 200,
        bottom: 0,
      },
      welcomenote: {
        position: 'absolute',
        left: 70,
        right: 0,
        top: 200,
        bottom: 0,
        width: '90%',
        height: 40,
        color: 'white',
      },
    });

i dont want image , iwant it to background image – sachin murali Sep 25 '19 at 10:10 — sachin murali, Sep 25 '19 at 10:10

stackdave · Answer 2 · 2019-09-25T10:39:48.930

You have some problems:

alignItems: 'center,', <- the comma inside ''
imageBackground component be the parent of view
remove height, left tops from 'loginbtn', 'signupbtn', etc

try use all flex css (that will be responsive); and don't use fixed height, or left or right or top

here the code working and tested:

import React from 'react';


import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <ImageBackground style={styles.backgroundContainer}
         source={{
           uri:
             'https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80',
         }}
      >
        <View style={styles.container}>

          <Text style={styles.welcomenote}>WELCOME TO ME</Text>
          <View style={styles.loginbtn}>
            <Button style={styles.loginbtn} title="LOGIN" />
          </View>
          <View style={styles.signupbtn}>
            <Button title="SIGNUP" />
          </View>

        </View>
      </ImageBackground>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loginbtn: {
    padding: 20,
    width: '90%',
    position: 'absolute',
    top: 250,
    bottom: 0,
  },
  signupbtn: {
    padding: 20,
    width: '90%',
    position: 'absolute',
    top: 200,
    bottom: 0,
  },
  welcomenote: {
    position: 'absolute',
    top: 200,
    bottom: 0,
    width: '90%',
    height: 40,
    color: 'white',
  },
});

did you copy and pasted ? i've changed the code today, what do you see on your screen?, are you using last version react native?, you tried cancel, and npm start ? — stackdave, Sep 26 '19 at 05:35
bro, Can u suggest me a db, where i can integrate with react-native? — sachin murali, Sep 27 '19 at 06:17
@sachinmurali please mark my answer like the right answer, it's nice you lear postgress and mongodb, both are needed ( relational database and no document db), but better to learn it with apollo graphql in client , and in server with node, or golang — stackdave, Sep 27 '19 at 08:27
@sachinmurali please dont forget to click on the check my answer like the right, another people won't you answer when you get the answer but you mark like correct — stackdave, Sep 30 '19 at 08:05

score 1 · Answer 3 · answered Sep 25 '19 at 10:27

Try with

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground, Dimensions } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={{
            uri:
              'https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80',
          }}
          style={styles.backgroundContainer}/>
          <Text style={styles.welcomenote}>WELCOME TO ME</Text>
          <View style={styles.loginbtn}>
            <Button style={styles.loginbtn} title="LOGIN" />
          </View>
          <View style={styles.signupbtn}>
            <Button title="SIGNUP" />
          </View>

      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    width: 300,
    height: Dimensions.get('window').height

  },
  loginbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 250,
    bottom: 0,
  },
  signupbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 200,
    bottom: 0,
  },
  welcomenote: {
    position: 'absolute',
    left: 70,
    right: 0,
    top: 200,
    bottom: 0,
    width: '90%',
    height: 40,
  },
});

In the above as you are setting height of backgroundContainer to 100 it is taking only 100

if i set height to 100, then why it is not showing the image? — sachin murali, Sep 25 '19 at 11:24
It is showing but only 100px in height not covering all the screen. — Kamal Pandey, Sep 25 '19 at 11:25

unable set my background image in react native?

3 Answers3