0

I'm trying to fit my background image to cover the whole app but its not, even though i've tested most of similar threads here so any help is appreciated.

I've made some changes to the original source and added an arrow towards the left edge of the image that i was hoping to have at the edge when i open up the EXPO app on my phone, but i only see a few pixels of the arrow at the left edge.

**app.js**
function HomeScreen() {
  return (
    <ImageBackground source={require('./assets/bgImage.jpg')} style={styles.bgImage}>
      <View>
        <Text>Home Screen</Text>
      </View>
    </ImageBackground>
  );
}


bgImage: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover',
    justifyContent: 'center',
    alignItems: "center"
}
Niqqo
  • 41
  • 1
  • 7

1 Answers1

0

try this :-

import React from 'react';
import { ImageBackground, View, Text } from 'react-native';

const HomeScreen = () => {
return (
    <ImageBackground source={require('../assets/apple.jpg')}
        style={{
            position: "absolute",
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            flex: 1,
            alignItems: "center"
        }}>
        <View style={{
            width: '90%',
            height: 200,
            backgroundColor: "red",
            justifyContent: "center",
            alignItems: "center",
        }}>
            <Text>Home Screen</Text>
        </View>
    </ImageBackground>
   );
  }


 export default HomeScreen;

It is working fine.

Shahanshah Alam
  • 565
  • 7
  • 22
  • I tried, but still the same problem, nothing has changed. The original image has the dimensions of 640x960 if that makes any difference. – Niqqo Feb 19 '21 at 12:06
  • image appearance may be distorted but app UI will not be change. – Shahanshah Alam Feb 19 '21 at 12:16
  • How could i make a clean refresh to see if something changes? Because the edited code does not work either so i supose something else must be the issue. – Niqqo Feb 19 '21 at 12:24
  • try `npm start -- --reset-cache` and then `npm run ios` or `android`. Or you can try removing and installing `node_modules` – Shahanshah Alam Feb 19 '21 at 12:26
  • just paste my code once in `app.js` and just change source of image and try uninstalling and then installing your app. – Shahanshah Alam Feb 19 '21 at 12:41
  • I have a stupid question for you, how do i uninstall it and will this have any effect on my other things i have imported such as createNavigationDrawer? Cheers. – Niqqo Feb 19 '21 at 12:52
  • 1
    uninstall manually from device just like you do in real life. It will not effect your code. After uninstalling just do `npm start` in terminal of root folder of your project and `npx react-native run-ios` and `npx react-native run-android` for ios and android respectively in different window of terminal or different terminal. – Shahanshah Alam Feb 19 '21 at 13:16
  • Hmm it did not work either.. Must be something else i have missed. – Niqqo Feb 19 '21 at 15:25