Add header examples - Githubissues

etn-ccis / blui-react-native

This monorepo includes all the Brightlayer UI's react native resources

1 stars 2 forks source link

Add header examples #65

Closed JeffGreiner-eaton closed 4 months ago

JeffGreiner-eaton commented 4 months ago

Fixes BLUI-5794.

Changes proposed in this Pull Request:

add header examples "header with image needs fixed"

Screenshots / Screen Recording (if applicable)

To Test:

Any specific feedback you are looking for?

need suggestion on background for header // import BackgroundImage from '../../../assets/farm.jpg';

export const HeaderWithBackgroundExample = (): JSX.Element => (

JeffGreiner-eaton commented 4 months ago

Results using backgroundImage={BackgroundImage} loads image but we lose styling and if used like this backgroundImage={require('../../../assets/farm.jpg')} the image does not load

joebochill commented 4 months ago

@JeffGreiner-eaton @shubham-eaton

This will fix the background image overflow issue:

The HeaderBackgroundImage component sets the background image width to the deviceWidth, which in dev docs is too wide because we're only showing it in the small window on the screen. Overriding this width property will make it fill properly.