React Native + Tailwind CSS User Profile Template

A selection of React Native User Profile components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

User Profile Screen (dark)

import { SafeAreaView, View, Text, Pressable, Image } from 'react-native';
import tailwind from 'twrnc';
import Ionicons from '@expo/vector-icons/Ionicons';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';

export default function UserProfile() {
  return (
    <SafeAreaView style={tailwind`flex-1 bg-black`}>
      <View style={tailwind`flex-1 items-center justify-center gap-8`}>
        <Image
          source={{ uri: 'https://source.unsplash.com/random' }}
          style={tailwind`w-24 h-24 rounded-full`}
          resizeMode="cover"
        />
        <View style={tailwind`gap-2 items-center`}>
          <Text style={tailwind`text-white text-3xl font-bold`}>Joe Bloggs</Text>
          <Text style={tailwind`text-white text-lg`}>joe@bloggs.com</Text>
        </View>
      </View>
      <View style={tailwind`flex-1 justify-center gap-8`}>
        <Pressable style={tailwind`flex-row items-center gap-2 px-8`}>
          <Ionicons name="settings-outline" size={24} color="#fff" />
          <Text style={tailwind`text-white text-lg`}>Settings</Text>
        </Pressable>
        <Pressable style={tailwind`flex-row items-center gap-2 px-8`}>
          <Ionicons name="help-buoy-outline" size={24} color="#fff" />
          <Text style={tailwind`text-white text-lg`}>Help</Text>
        </Pressable>
        <Pressable style={tailwind`flex-row items-center gap-2 px-8`}>
          <MaterialIcons name="logout" size={24} color="#fff" />
          <Text style={tailwind`text-white text-lg`}>Logout</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

User Profile Screen (light)

import { SafeAreaView, View, Text, Pressable, Image } from 'react-native';
import tailwind from 'twrnc';
import Ionicons from '@expo/vector-icons/Ionicons';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';

export default function UserProfile() {
  return (
    <SafeAreaView style={tailwind`flex-1 bg-slate-50`}>
      <View style={tailwind`flex-1 items-center justify-center gap-8`}>
        <Image
          source={{ uri: 'https://source.unsplash.com/random' }}
          style={tailwind`w-24 h-24 rounded-full`}
          resizeMode="cover"
        />
        <View style={tailwind`gap-2 items-center`}>
          <Text style={tailwind`text-slate-900 text-3xl font-bold`}>Joe Bloggs</Text>
          <Text style={tailwind`text-slate-900 text-lg`}>joe@bloggs.com</Text>
        </View>
      </View>
      <View style={tailwind`flex-1 justify-center gap-8`}>
        <Pressable style={tailwind`flex-row items-center gap-2 px-8`}>
          <Ionicons name="settings-outline" size={24} style={tailwind`text-slate-900`} />
          <Text style={tailwind`text-slate-900 text-lg`}>Settings</Text>
        </Pressable>
        <Pressable style={tailwind`flex-row items-center gap-2 px-8`}>
          <Ionicons name="help-buoy-outline" size={24} style={tailwind`text-slate-900`} />
          <Text style={tailwind`text-slate-900 text-lg`}>Help</Text>
        </Pressable>
        <Pressable style={tailwind`flex-row items-center gap-2 px-8`}>
          <MaterialIcons name="logout" size={24} style={tailwind`text-slate-900`} />
          <Text style={tailwind`text-slate-900 text-lg`}>Logout</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}