My custom header component goes out of the screen in 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