How to Add a Title in React Native (With or Without Navigation)

When building mobile apps with React Native, a clear, consistent title greatly improves user experience. You can set the screen's header title or show a title inside your layout. React Native offers multiple ways to do both.

In this post, you’ll learn best practices for adding titles—with and without react-navigation.

📌 Why Titles Matter in Mobile UI

Titles help users know where they are. They enhance usability, add context, and support a professional design.

Here are the two main ways to add titles:

1. 🧱 Adding a Title in the Navigation Header (Using React Navigation)

If you're using @react-navigation/native with a stack navigator, adding titles is simple.

✅ Static Title (Best for most screens)

<Stack.Screen 
  name="Profile" 
  component={ProfileScreen} 
  options={{ title: 'User Profile' }} 
/>

This sets "User Profile" as the header title for the Profile screen.

✅ Dynamic Title (When title depends on data)

Sometimes, you want the title to change based on content:

import { useLayoutEffect } from 'react';

function ProfileScreen({ navigation, route }) {
  const { userName } = route.params;

  useLayoutEffect(() => {
    navigation.setOptions({ title: userName });
  }, [navigation, userName]);

  return <Text>{userName}'s Profile</Text>;
}

📝 Tip: Use useLayoutEffect so the title updates before the screen renders.

2. 🧱 Displaying a Title Within Your View

Sometimes, all you need is a simple in-view title.

import { Text, View, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to the App</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

🔧 Want to Reuse This?

Create a reusable <Title /> component:

export function Title({ children }) {
  return (
    <Text style={{ fontSize: 22, fontWeight: '600', marginBottom: 12 }}>
      {children}
    </Text>
  );
}

Use it like this:

<Title>Settings</Title>

🎨 Bonus: Customize the Header Style

You can style the header title using options:

<Stack.Screen 
  name="Dashboard" 
  component={DashboardScreen} 
  options={{ 
    title: 'My Dashboard',
    headerStyle: {
      backgroundColor: '#6200ee',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }} 
/>

🧠 Final Thoughts

Adding proper titles is about clarity, consistency, and professionalism. Whether your app has one screen or many, always help users know where they are.

✅ Quick Summary