React Native - Image Background content went past the screen-CodePudding

I am adding image background to my app, but the horizontal part of the image went past the screen (the right and left part got cut). I tried to use resizeMode cover and contain but both of it didn't do anything. Is there any other way to make the image stay within the screen? (I use resizeMode on Image and it contain the image normally {same picture}).

import React from 'react';
import {
  Image,
  ImageBackground,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {DCTBACKGROUND} from '../../../assets/images';

export default function GetStarted({navigation}) {
  return (
    <ImageBackground source={DCTBACKGROUND} style={styles.page}>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            navigation.navigate('Register');
          }}>
          <Text style={styles.buttonText}>Registrasi</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            navigation.navigate('Login');
          }}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  page: {
    backgroundColor: '#90CC8B',
    flex: 1,
    paddingHorizontal: 15,
    paddingVertical: 25,
    // resizeMode: 'contain',
  },
  button: {
    backgroundColor: 'yellow',
    width: 100,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
  },
  buttonText: {
    color: 'black',
  },
  buttonContainer: {
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  logo: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
});

The image horizontal part got cut a bit and I need to make it all show without being cut.

CodePudding user response：

Add the resizeMode as a direct prop to the ImageBackground and not as part of the StyleSheet.

 <ImageBackground resizeMode="contain" source={DCTBACKGROUND} style={styles.page}>