Put Avatar And Icon On Top Of Page Without React Native Element Headers

To achieve placing an avatar on the top left and a “+” icon on the top right of your screen in React Native without using React Native Elements’ header (to avoid its default blue styling), you can follow these steps using react-native-safe-area-view for safe area handling and standard React Native components for layout:

1. Install react-native-safe-area-view:

First, ensure you have react-native-safe-area-view installed in your project. You can install it using npm or yarn:
npm install react-native-safe-area-view
# or
yarn add react-native-safe-area-view

2. Implement the Home Page Component:

Create your HomePage component where you want to display the avatar and the “+” icon:

import React from "react";
import { View, StyleSheet, Text } from "react-native";
import { Avatar, Icon } from "react-native-elements";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const HomePage = () => {
 const insets = useSafeAreaInsets();
 return (
   <View style={[styles.container, { paddingTop: insets.top }]}>
     <View style={styles.header}>
       <Avatar
         size="small"
         rounded
         source={{
           uri: "http://www.example.com/avatar.jpg", // Replace with your avatar URL
         }}
         onPress={() => console.log("Left Clicked!")}
         activeOpacity={0.7}
       />
       <Icon
         name="add-circle-outline"
         type="ionicon"
         color="#00BB23"
         size={32}
         onPress={() => console.log("Right Clicked!")}
       />
     </View>
     {/* Add your main content below */}
     <View style={styles.content}>
       <Text>Your main content goes here.</Text>
     </View>
   </View>
 );
};

const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: "#fff", // Adjust as per your app's theme
 },
 header: {
   flexDirection: "row",
   justifyContent: "space-between",
   alignItems: "center",
   paddingHorizontal: 16,
   paddingBottom: 8, // Adjust spacing as needed
 },
 content: {
   flex: 1,
   justifyContent: "center",
   alignItems: "center",
 },
});
export default HomePage;

3. Explanation:

• Safe Area Handling: We use useSafeAreaInsets from react-native-safe-area-context to ensure content is placed correctly under the status bar on devices with notches or insets.
• Avatar and Icon: We’ve used Avatar and Icon components from react-native-elements (ensure it’s imported correctly in your project).
• Styling: The header style arranges the avatar and icon horizontally with padding. Adjust paddingTop of the container to ensure content starts below the status bar.

Final Touches:

• Replace placeholder URLs (uri properties in Avatar component) with your actual image URLs.
• Customize styles (backgroundColor, font sizes, etc.) according to your app’s design guidelines.

By following these steps, you can achieve a clean layout with an avatar on the top left and a “+” icon on the top right, effectively replacing the need for React Native Elements’ header and avoiding any unwanted styling conflicts. Adjust the styles and components further to fit your specific application’s design and functionality requirements.