React Native - Flex

Question

I have two components in a screen. One is an Image and other is a View. I give flex:1 to main view and give flex:0.7 to image and flex:0.3 to view.

import { Image, StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'

const OnboardingItem = ({ item }) => {
    const { width } = useWindowDimensions();

    return (
        <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', }, { width }]}>
            <Image
                style={[styles.image, { width, resizeMode: 'contain', }]}
                source={item.image}
            />
            <View style={{ flex: 0.3 }}>
                <Text>{item.title}</Text>
                <Text>{item.description}</Text>
            </View>
        </View>
    )
}

export default OnboardingItem

const styles = StyleSheet.create({
    image: {
        flex: 0.7,
        justifyContent: 'center',
    }
})

I am trying to give flex:1 to main view and flex:0.7 to image. So, Image take 70% of screen and flex:0.3 to a view. So, View take other 30% of screen.

---

But the problem is it not taking the hole screen.

---

Answer 1

You can replace OnboardingItem flex: 1 with fixed window height, so your items inside will always have 0.7 and 0.3 height of the screen.

const { width, height } = useWindowDimensions();

<View style={[{ justifyContent: 'center', alignItems: 'center', }, { width, height }]}>

I can see from screenshot that you probably render two OnboardingItem components inside parent component. If two components with flex: 1 are rendered inside one parent component, then both of them will takes half of the available space. More info on how flexbox works in react-native in the official docs.