@uiw/react-native/lib/ImageHeader/index.js

UIW for React Native

import React from 'react';
import { Text, SafeAreaView, StatusBar, TouchableOpacity, View, Platform } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../Typography/Box';
import Flex from '../Flex';
import Icon from '../Icon';
import WingBlank from '../WingBlank';
import helpers from './helpers';
const {
  px,
  isIOS
} = helpers;
const ImageHeader = props => {
  const theme = useTheme();
  const {
    headerRight,
    headerLeft,
    headerLeftColor = theme.colors.icon,
    headerBackgroundColor = theme.colors.transparent,
    headerHeight,
    children,
    onPress,
    showLeft = true,
    headerTitle,
    statusBarStyle = 'default',
    safeBgColor
  } = props;
  let DefaultHeaderLeft = <Icon name="left" size={px(20)} color={headerLeftColor} />;
  if (headerLeft) {
    if (typeof headerLeft === 'string') {
      DefaultHeaderLeft = <Text style={{
        color: headerLeftColor,
        fontSize: px(16)
      }}>{headerLeft}</Text>;
    } else {
      DefaultHeaderLeft = headerLeft;
    }
  }
  const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 70 : StatusBar.currentHeight;
  return <>
      <View style={{
      height: STATUSBAR_HEIGHT,
      backgroundColor: safeBgColor
    }}>
        <StatusBar translucent backgroundColor={safeBgColor} barStyle={statusBarStyle} />
      </View>
      <SafeAreaView style={{
      width: '100%',
      height: headerHeight,
      backgroundColor: safeBgColor
    }}>
        <Flex style={{
        paddingTop: isIOS ? theme.spacing.x2 : theme.spacing.x5,
        paddingBottom: theme.spacing.x2,
        paddingRight: theme.spacing.x3,
        backgroundColor: headerBackgroundColor
      }}>
          {showLeft ? <TouchableOpacity activeOpacity={0.5} onPress={onPress} style={{
          flex: 1,
          paddingLeft: theme.spacing.x2
        }}>
              {DefaultHeaderLeft}
            </TouchableOpacity> : <Box flex={1} />}
          {typeof headerTitle === 'string' ? <Text style={{
          color: headerLeftColor,
          fontSize: px(16)
        }}>{headerTitle}</Text> : headerTitle}
          <Box flex={1} alignItems="flex-end">
            {headerRight}
          </Box>
        </Flex>
        <WingBlank>{children}</WingBlank>
      </SafeAreaView>
    </>;
};
export default ImageHeader;