CODEWITHSUNDEEP
javascriptreact-native
S. M. Asif
S. M. Asif

Reputation: 3709

How to solve ImageBackground not taking full width problem in React-Native?

I am using one ImageBackground in my LeftDrawer header. I have set the heigth and width to 100% and haven't set any padding or margin. But then I am not getting why my drawer header image is taking some space in left and right side. You can see that in the given image below -

enter image description here

And here I have provided the code for this class-

import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';

import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';

import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';

let user_email ='', user_first_name='';

class HomeDrawer extends Component {

  state = {

    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_first_name = value;
    });

  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (
  <Container style={styles.Container}>

      <Header style={styles.drawerHeader}>

      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: '100%',resizeMode:'cover'}}>  
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text>{user_email}</Text>
          <Text>{user_first_name}</Text>
        </View>

      </Body>

      </ImageBackground>

      </Header>

    <Content>
      <DrawerItems {...props}/>
    </Content>
  </Container>
);

const MyApp = DrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },
  Settings:{
    screen: SettingsScreen
  }
},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}


);

const styles = StyleSheet.create({
  Container:{
   textAlign:'center'
  },

  drawerHeader:{
    height:150,
    width:'100%',

    backgroundColor: 'white'
  },

  drawerHeaderText:{
    flex:1,
    backgroundColor:'#5555'
  },

  drawerImage:{
    height: 70,
    width: 70,
    borderRadius: 100,

  },

  drawerBody: {
    flexDirection:'row',

    alignItems:'center',
    backgroundColor:'transparent'
  },



});

export default HomeDrawer;

So, it would be very nice if someone helps to find out what is the problem and suggest how to solve it.

Upvotes: 1

Views: 1370

Answers (1)

Nirmalsinh Rathod
Nirmalsinh Rathod

Reputation: 5186

You need to set resizeMode as props of ImageBackground.

  <ImageBackground 
      source={require('../assets/header.jpeg')} 
       resizeMode={'cover'}
     style={{width: '100%', height: '100%'}}>

Upvotes: 2

Related Questions