Why next layout is on bottom in React-Native? - react-native

Question

I've made CustomHeader like below.
import React from 'react'
import {Platform, View, Text, TouchableHighlight, TouchableOpacity, StyleSheet} from 'react-native'
import {Ionicons} from '#expo/vector-icons';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';
export default class CustomHeader extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.wrap}>
<TouchableOpacity style={styles.goBack} onPress={() => {
this.props.nav.goBack(null)
}}>
<Ionicons name="ios-arrow-back" size={moderateScale(33)} color="#565656"/>
</TouchableOpacity>
<View style={styles.title}>
<Text style={styles.titleText}>Title</Text>
</View>
<TouchableOpacity style={styles.share}>
<Ionicons name="ios-share-outline" size={moderateScale(30)} color="#565656"/>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS === 'ios' ? Expo.Constants.statusBarHeight : 0
},
wrap: {
height: moderateScale(50),
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#e5e5e5'
},
goBack: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingLeft: 12,
},
title: {
flex: 8,
alignItems: 'center',
justifyContent: 'center'
},
titleText: {
fontSize: moderateScale(15),
fontWeight: 'bold'
},
share: {
flex: 1,
justifyContent: 'center',
paddingRight: 12,
alignItems: 'flex-end',
}
});
And this component is imported ContentDetailScreen.js below.
import React from 'react';
import CustomHeader from '../components/CustomHeader'
import {Platform, View, ScrollView, StyleSheet, Text, Dimensions, Image, Button, Modal} from 'react-native';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';
import {Ionicons} from '#expo/vector-icons';
import Swiper from 'react-native-swiper'
const {width} = Dimensions.get('window')
export default class ContentDetailScreen extends React.Component {
static navigationOptions = {
header: null
};
render() {
console.log(this.props.navigation);
return (
<View style={[styles.container]}>
<CustomHeader nav={this.props.navigation}/>
<Text style={{backgroundColor: 'red'}}>Something</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
shareIcon: {
color: '#565656'
},
wrapper: {
backgroundColor: '#333',
justifyContent: 'flex-start'
},
slide: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#111'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
},
image: {
width,
flex: 1
},
paginationStyle: {
position: 'absolute',
bottom: 10,
right: 10
},
paginationText: {
color: '#333',
fontSize: 20
}
});
But, It's displaying like .
I would like to be on just next of CustomHeader as common.
But 'Something (red color)' is on bottom of Screen.
What's wrong?
If I remove CustomHeader, It's correct.

Answer 1

remove the
flex: 1,
from the CustomHeader style, and you will get what you want