CODEWITHSUNDEEP
reactjsreact-nativeimagebackground
sachin murali
sachin murali

Reputation: 489

unable set my background image in react native?

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

Upvotes: 2

Views: 620

Answers (3)

stackdave
stackdave

Reputation: 7054

You have some problems:

  1. alignItems: 'center,', <- the comma inside ''
  2. imageBackground component be the parent of view
  3. 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: enter image description here

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',
  },
});

Upvotes: 2

Kamal Pandey
Kamal Pandey

Reputation: 1598

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

Upvotes: 1

Dixit Savaliya
Dixit Savaliya

Reputation: 413

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',
      },
    });

Upvotes: 2

Related Questions