Align image vertically and horizontally using flexbox

Question

Using React-Native I need to centre my Image and component LYDSceneQuestion:

const SplashScreen = () => {
    return (
        <View style={styles.container}>
            <LYDSceneQuestion text="Welcome to" />

            <Image source={theme.images.logo} style={styles.logo} />
            <NextButton onPress={onNext} />
        </View>
    );
};

export default SplashScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    logo: {
        flex: 1,
        width: 300,
        height: 100,
        resizeMode: 'contain'
    }
});

Currently my image aligns to the bottom, how I can I centre it vertically?

I would look at the second answer on this question: https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — flyer, Jul 19 '17 at 12:25
Possible duplicate of [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — sol, Jul 19 '17 at 12:29

score 0 · Answer 1 · answered Jul 20 '17 at 04:40

I will suggest a small technique using flex,give your parent view flex one and then arrange the components in separate child views inside it and give them equal flex just like i have done below.

 <View style={styles.container,{flex: 1}}>
           <View style={{flex: 2}}>
              <LYDSceneQuestion text="Welcome to" />
           </View>
           <View style={{flex: 2}}>
           <Image source={theme.images.logo} style={styles.logo}/>                
           </View>
          <View style={{flex: 2}}>
             <NextButton onPress={onNext} />
          </View>
        </View>

I think if you follow this you can centre it vertically.

Align image vertically and horizontally using flexbox

1 Answers1