CODEWITHSUNDEEP
cssreactjsreact-nativeflexboxstyled-components
Musayyab Naveed
Musayyab Naveed

Reputation: 365

React Native styling header with Background Image

I need some help. I am trying to style a screen header with an image in the background. But the background graphic is not styling properly, I have tried using both, Image and ImageBackground. The image should fit the width and should be in the background.

this is how it should look: enter image description here

this is how it looks now:

enter image description here

when I set the width to 100% or to the width of the window this is what I get, The image gets cropped from the bottom:

enter image description here

Here is my code:

ArtistProfile.tsx

import React, { Component } from "react";
import { Content } from "native-base";
import styled from "styled-components/native";
import ScreenLayout from "../layout/ScreenLayout";

interface ArtistProfileProps {
  componentId: string;
}

class ArtistProfile extends Component<ArtistProfileProps> {
  render() {
    return (
      <ScreenLayout componentId={this.props.componentId}>
        <ArtistProfileContent>
          <HeaderBackground
            source={require("../../assets/img/header-bg.png")}
          />
        </ArtistProfileContent>
      </ScreenLayout>
    );
  }
}
export default ArtistProfile;

const ArtistProfileContent = styled(Content)`
  flex: 1;
`;

const HeaderBackground = styled.Image`
  flex: 1;
  align-self: center;
  margin: 0;
  padding: 0;
`;

ScreenLayout.tsx

import React, { Component } from "react";
import theme from "../../theme/Theme";
import styled, { ThemeProvider } from "styled-components/native";
import { Container } from "native-base";
import FooterNavigation from "../../components/footer/Footer";

interface ScreenLayoutProps {
  componentId: string;
}

class ScreenLayout extends Component<ScreenLayoutProps> {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <ScreenLayoutContainer>{this.props.children}</ScreenLayoutContainer>
        <FooterNavigation componentId={this.props.componentId} />
      </ThemeProvider>
    );
  }
}
export default ScreenLayout;

const ScreenLayoutContainer = styled(Container)`
  flex: 1;
`;

Upvotes: 0

Views: 1809

Answers (2)

gayathrithedev
gayathrithedev

Reputation: 337

You can set the width to '100%' in HeaderBackground component.

Upvotes: 1

高鵬翔
高鵬翔

Reputation: 2057

Maybe you can set width like this

import {Dimensions} from 'react-native';
const windowWidth = Dimensions.get('window').width;

react native dimensions

Upvotes: 1

Related Questions