React Native flex and custom component layout issue - react-native

Question

I've a simple React Native component:
export default class TestComponent extends React.Component {
render() {
return (
<View style={{flex:1}}>
<Text>Test</Text>
</View>
);
}
}
It is used by this App:
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{ flex: 0, backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ flex: 0, backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 10,
},
});
I expect the TestComponent and the yellow view to be displayed but using only required space and the blue view to fill up the remaining content.
The yellow and blue area is working as expected, but the TestComponent is not displayed. Why?
See this demo: https://snack.expo.io/#dennismadsen/great-fudge

Answer 1

just don't use flex:0
use flex:1 in component that you want to fill the remain screen
the 2 others don't write any flex
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 10,
},
});

Answer 2

Just remove flex: 0 from your JSX and it will work.
render() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
}
Reason:
When you want only 1 component to cover the rest area then you just need to give the element flex: 1 and leave others as is, so that they can only take the required space. When you explicitly assign flex: 0 then it won't even take the required space.
FYI, I already tried this in the demo link you have shared.
EDITED:
export default class TestComponent extends React.Component {
render() {
return (
<Text>Test</Text>
);
}
}
OR
export default class TestComponent extends React.Component {
render() {
return (
<View>
<Text>Test</Text>
</View>
);
}
}

Answer 3

You need to just remove flex:1 from <Testcomponent/> then you test component take size according to its content.
Please check this demo link
https://snack.expo.io/#vishal7008/new-component
Working demo image

Answer 4

The reason why 'TestComponent' is not visible is because the parent flex value is zero. The flex will be covered together in yellow with zero.
You have to set flex values to see all colors and letters.
red: 1 yellow : 1 blue : 8 === 1:1:8 === 0.1 : 0.1 : 0.8
return (
<View style={styles.container}>
<View style={{ flex: 1, backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ flex: 1, backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 8, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
You can use two things if you want to make the text equal to the height of the second view. You can use flexBasis or height
'flexBasis' and 'height' do the same thing.
OR
You can also use flexShrink.
// use `flexBasis` or `height`
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red',flexBasis: 20 }}>
<TestComponent />
</View>
<View style={{backgroundColor: 'green',height: 20 }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
use `flexShrink`.
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red',flexBasis: 20 }}>
<TestComponent />
</View>
<View style={{backgroundColor: 'green',flexShrink:0 }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
Remove Flex value
<View style={styles.container}>
<View style={{ backgroundColor: 'red'}}>
<TestComponent />
</View>
<View style={{backgroundColor: 'green'}}>
<Text>222222222222222222</Text>
<Text>111111111111111111</Text>
<Text>535555555555</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
....
<View>
<Text>Test</Text>
<Text>Test</Text>
<Text>Test</Text>
</View>
See Screen