My custom header component goes out of the screen in react native - react-native

Question

Problem:
In my react native application I have set up a custom header component like this.
const ChatHeader = (props) => {
return (
<View style={styles.chatHederCiontainer}>
<View style={{flexDirection: 'row'}}>
<View>
<Image
source={require('_assets/img/doctor1.png')}
style={styles.chatImage}
resizeMode="contain"
/>
</View>
<View style={{justifyContent: 'center', marginLeft: 20}}>
{/* {props.name ? (
<View>
<Apptext styles={styles.ChatTextName}>{props.name}</Apptext>
<Apptext styles={styles.ChatTextStatus}>
{props.isActive ? strings('chat.active') : null}
</Apptext>
</View>
) : ( */}
<Apptext styles={styles.ChatText}>
Chat with Doctor and tell your problem
</Apptext>
{/* )} */}
</View>
</View>
</View>
);
};
const mapStateToProps = (state) => {
return {
name: state.feedbacks.chatperson,
isActive: state.feedbacks.active,
};
};
export default connect(mapStateToProps)(ChatHeader);
const styles = StyleSheet.create({
chatHederCiontainer: {
justifyContent: 'center',
alignItems: 'center',
},
chatImageConatiner: {
width: '20%',
},
ChatTextContainer: {
width: '50%',
justifyContent: 'center',
alignItems: 'center',
},
chatImage: {
height: 40,
width: 40,
},
ChatText: {
fontSize: normalize(15),
textAlign: 'center',
alignSelf: 'center',
},
ChatTextName: {
marginLeft: 10,
fontSize: normalize(12),
textAlign: 'center',
},
ChatTextStatus: {
marginLeft: 10,
fontSize: normalize(9),
textAlign: 'left',
},
});
This is how I have used that in my navigations.
<ChatStack.Screen
name="chat"
component={ChatScreen}
options={(props) => ({
headerShown: true,
headerLeft: () => (
<TouchableOpacity
accessibilityRole="tab"
hitSlop={{top: 15, bottom: 15, left: 50, right: 50}}
onPress={() => {
global.currentScreenIndex = 1;
props.navigation.goBack();
}}>
<Icon
name="chevron-left"
size={normalize(15)}
color="#aaaaaa"
style={{marginLeft: 20}}
/>
</TouchableOpacity>
),
headerTitle: () => <HeaderTitle />,
// headerTitleAlign: 'left',
headerStyle: {
backgroundColor: '#f2f2f2',
height: 90,
},
headerTransparent: false,
headerLeftContainerStyle: {},
headerStatusBarHeight: 0,
})}
/>
But when I run in the device it goes out of the device like this.
I tried a lot of things like changing styles but the issue is still the same can someone help me out with this. Thank you very much

Answer 1

Add props headerMode={'none'} to <ChatStack.Screen> tag. Hope help U