PageHeaderScreen.tsx

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import BackArrowIcon from 'src/assets/svg/common/BackArrowIcon';
import PageHeader from 'src/components/organisms/PageHeader';
import { tailwind } from 'tailwind';

const PageHeaderScreen = () => {
  return (
    <SafeAreaView style={tailwind('bg-white flex-1')}>
      <PageHeader
        leftNode={<BackArrowIcon width={20} height={20} />}
        headerText="Page Header"
        rightContainerStyle={tailwind('flex-1 pr-4 items-end py-2')}
        rightNode={
          <Image
            style={styles.profilePhoto}
            source={{
              uri: 'https://images.unsplash.com/photo-1528763380143-65b3ac89a3ff?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
            }}
          />
        }
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  profilePhoto: {
    height: 36,
    width: 36,
    borderRadius: 36,
    backgroundColor: tailwind('text-gray-100').color,
  },
});

export default PageHeaderScreen;