jsx - Center Image React Native Loading Screen -
background
i have image placed on screen meant show when screen loads other content.
i want center image center on devices.
problem
currently image shows top center. aligned vertically well. sure same on devices.
question
what solution make sure image centered , right size devices?
example,
my current code,
in photoshop
image 300 resolution height 776 px width 600 px
i want image centered horizontally , vertically in devices , without pixelating. natively know need set image sizes. understanding in react native can use on image use jsx handle being responsive.
import react 'react'; import { stylesheet, view, image, } 'react-native'; const logo = require('../images/logo.jpg'); const loadingscreen = () => ( <view> <image style={styles.logo} source={logo} /> </view> ); const styles = stylesheet.create({ logo: { justifycontent: 'center', alignitems: 'center', width: 300, height: 400, }, }); export default loadingscreen;
the view container should have styling as
flexdirection: 'column' justifycontent: 'center' alignitems: 'center' height: '100%'
the height makes sure spans throughout page, making image become both vertically , horizontally aligned.
for image size, think using percentage trick instead of defining definite width/height.
Comments
Post a Comment