create-ern-boilerplate 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ern-boilerplate",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Expo React Native boilerplate generator",
   "bin": {
     "create-ern-boilerplate": "./create.js",

package/templates/default/app/(admin)/user-management.tsx

@@ -29,11 +29,15 @@ import {
 import { useTheme } from '@hooks/useTheme';
 import { userService } from '@/services/userServices';
 import { CreateUserInput, UpdateUserInput, UserData, UserFilters } from '@/types/user.types';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { AppHeader } from '@/components/header/AppHeader';
+import { useRouter } from 'expo-router';
 
 const ITEMS_PER_PAGE = 10;
 
 export default function UserManagementScreen() {
   const { colors } = useTheme();
+  const router = useRouter();
   const [searchQuery, setSearchQuery] = useState('');
   const [filters, setFilters] = useState<UserFilters>({
     page: 1,
@@ -571,14 +575,15 @@ export default function UserManagementScreen() {
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
       {/* Header */}
-      <View style={styles.header}>
-        <Text style={[styles.headerTitle, { color: colors.text }]}>User Management</Text>
-        <Text style={[styles.headerSubtitle, { color: colors.textSecondary }]}>
-          {users.length} {users.length === 1 ? 'user' : 'users'} • Manage users and permissions
-        </Text>
-      </View>
+      <AppHeader
+        variant="back"
+        title="User Management"
+        subtitle={`${users.length} ${users.length === 1 ? 'user' : 'users'} • Manage users and permissions`}
+        onBackPress={() => router.back()}
+        colors={colors}
+      />
 
       {/* Search and Actions */}
       <View style={styles.searchSection}>
@@ -892,7 +897,7 @@ export default function UserManagementScreen() {
           </View>
         </UserModal>
       )}
-    </View>
+    </SafeAreaView>
   );
 }
 

package/templates/default/app/(protected)/_layout.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
 import { Tabs, Redirect } from 'expo-router';
 import { Home, User, Settings } from 'lucide-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@/hooks/useTheme';
 import { useAuth } from '@/hooks/useAuth';
 
 export default function MainLayout() {
   const { colors } = useTheme();
   const { user, isAuthenticated } = useAuth();
+  const insets = useSafeAreaInsets();
 
   // Redirect to login if not authenticated
   if (!isAuthenticated) {
@@ -25,18 +27,23 @@ export default function MainLayout() {
           backgroundColor: colors.card || colors.background,
           borderTopColor: colors.border,
           borderTopWidth: 1,
-          height: Platform.OS === 'ios' ? 88 : 65,
-          paddingBottom: Platform.OS === 'ios' ? 28 : 8,
-          paddingTop: 8,
+          height: Platform.OS === 'ios'
+            ? 50 + insets.bottom
+            : 50 + (insets.bottom > 0 ? insets.bottom : 8),
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 8,
+          paddingTop: 0,
           elevation: 0,
           shadowOpacity: 0,
         },
         tabBarActiveTintColor: colors.primary,
         tabBarInactiveTintColor: colors.textSecondary,
         tabBarLabelStyle: {
-          fontSize: 12,
+          fontSize: 10,
           fontWeight: '600',
-          marginTop: 4,
+          marginTop: 2,
+        },
+        tabBarItemStyle: {
+          paddingVertical: 2,
         },
       }}
     >
@@ -70,7 +77,7 @@ export default function MainLayout() {
         }}
       />
 
-      {/* {isAdmin && ( */}
+      {isAdmin && (
         <Tabs.Screen
           name="settings"
           options={{
@@ -83,19 +90,18 @@ export default function MainLayout() {
                 <Settings size={24} color={color} strokeWidth={focused ? 2.5 : 2} />
               </View>
             ),
-            // Hide settings tab if not admin
-            // href: isAdmin ? '/(protected)/settings' : null,
           }}
         />
+      )}
     </Tabs>
   );
 }
 
 const styles = StyleSheet.create({
   iconContainer: {
-    width: 48,
-    height: 32,
-    borderRadius: 12,
+    width: 40,
+    height: 26,
+    borderRadius: 8,
     justifyContent: 'center',
     alignItems: 'center',
   },

package/templates/default/app/(protected)/home.tsx

@@ -14,6 +14,10 @@ import {
 import { Search, Filter, Heart, Eye, Calendar, ChevronLeft, ChevronRight } from 'lucide-react-native';
 import { useTheme } from '@/hooks/useTheme';
 import { useAuth } from '@/hooks/useAuth';
+// import { AppHeader } from '@/components/layout/AppHeader';
+import { useRouter } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { AppHeader } from '@/components/header/AppHeader';
 
 const { width } = Dimensions.get('window');
 const ITEMS_PER_PAGE = 6;
@@ -45,6 +49,7 @@ const categories = [
 export default function HomeScreen() {
   const { colors } = useTheme();
   const { user } = useAuth();
+  const router = useRouter();
   const [newsList, setNewsList] = useState<News[]>([]);
   const [filteredNews, setFilteredNews] = useState<News[]>([]);
   const [loading, setLoading] = useState(true);
@@ -219,10 +224,10 @@ export default function HomeScreen() {
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', { 
-      month: 'short', 
-      day: 'numeric', 
-      year: 'numeric' 
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
     });
   };
 
@@ -245,6 +250,10 @@ export default function HomeScreen() {
     }
   };
 
+  const handleProfilePress = () => {
+    router.push('/(protected)/profile')
+  };
+
   if (loading) {
     return (
       <View style={[styles.loadingContainer, { backgroundColor: colors.background }]}>
@@ -255,41 +264,23 @@ export default function HomeScreen() {
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
+      {/* Header */}
+      <AppHeader
+        variant="search"
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        searchPlaceholder="Search..."
+        user={{ ...user }} // Pass user object langsung
+        onProfilePress={handleProfilePress}
+        colors={colors}
+      />
       <ScrollView
         showsVerticalScrollIndicator={false}
         refreshControl={
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         }
       >
-        {/* Header */}
-        <View style={styles.header}>
-          <View>
-            <Text style={[styles.greeting, { color: colors.textSecondary }]}>
-              Welcome back,
-            </Text>
-            <Text style={[styles.username, { color: colors.text }]}>
-              {user?.name || 'User'}
-            </Text>
-          </View>
-        </View>
-
-        {/* Search Bar */}
-        <View style={[styles.searchContainer, { backgroundColor: `${colors.primary}08` }]}>
-          <Search size={20} color={colors.textSecondary} />
-          <TextInput
-            style={[styles.searchInput, { color: colors.text }]}
-            placeholder="Search news..."
-            placeholderTextColor={colors.textSecondary}
-            value={searchQuery}
-            onChangeText={setSearchQuery}
-          />
-          {searchQuery.length > 0 && (
-            <TouchableOpacity onPress={() => setSearchQuery('')}>
-              <Text style={{ color: colors.primary, fontWeight: '600' }}>Clear</Text>
-            </TouchableOpacity>
-          )}
-        </View>
 
         {/* Category Filter */}
         <ScrollView
@@ -346,7 +337,7 @@ export default function HomeScreen() {
             {currentNews.map((news) => (
               <TouchableOpacity
                 key={news.id}
-                style={[styles.newsCard, { 
+                style={[styles.newsCard, {
                   backgroundColor: colors.card || colors.background,
                   shadowColor: colors.text,
                 }]}
@@ -364,7 +355,7 @@ export default function HomeScreen() {
                   <Text style={[styles.newsExcerpt, { color: colors.textSecondary }]} numberOfLines={2}>
                     {news.excerpt}
                   </Text>
-                  
+
                   <View style={styles.newsFooter}>
                     <View style={styles.newsStats}>
                       <View style={styles.statItem}>
@@ -459,7 +450,7 @@ export default function HomeScreen() {
 
         <View style={{ height: 20 }} />
       </ScrollView>
-    </View>
+    </SafeAreaView>
   );
 }
 

package/templates/default/app/(protected)/profile.tsx

@@ -13,10 +13,14 @@ import { User, Mail, Phone, MapPin, Calendar, Edit2, Save, X } from 'lucide-reac
 import { useTheme } from '@/hooks/useTheme';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/common/Button';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { AppHeader } from '@/components/header/AppHeader';
+import { useRouter } from 'expo-router';
 
 export default function ProfileScreen() {
   const { colors } = useTheme();
   const { user } = useAuth();
+  const router = useRouter();
   const [isEditing, setIsEditing] = useState(false);
   const [loading, setLoading] = useState(false);
 
@@ -30,6 +34,7 @@ export default function ProfileScreen() {
     joinDate: 'January 2024',
   });
 
+
   const handleSave = async () => {
     setLoading(true);
     try {
@@ -79,8 +84,17 @@ export default function ProfileScreen() {
   );
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
+      <AppHeader
+        variant="back"
+        title="Profile"
+        subtitle="Manage your personal information"
+        onBackPress={() => router.back()}
+        colors={colors}
+      />
       <ScrollView showsVerticalScrollIndicator={false}>
+
+
         {/* Header with Avatar */}
         <View style={styles.header}>
           <View style={[styles.avatarContainer, { backgroundColor: colors.primary }]}>
@@ -140,7 +154,7 @@ export default function ProfileScreen() {
         {/* Profile Information */}
         <View style={styles.section}>
           <Text style={[styles.sectionTitle, { color: colors.text }]}>Profile Information</Text>
-          
+
           <InfoCard icon={User} label="Name" value={profileData.name} editable />
           <InfoCard icon={Mail} label="Email" value={profileData.email} editable />
           <InfoCard icon={Phone} label="Phone" value={profileData.phone} editable />
@@ -171,7 +185,7 @@ export default function ProfileScreen() {
 
         <View style={{ height: 40 }} />
       </ScrollView>
-    </View>
+    </SafeAreaView>
   );
 }
 

package/templates/default/app/(protected)/settings.tsx

@@ -23,6 +23,8 @@ import {
 import { useTheme } from '@hooks/useTheme';
 import { useAuth } from '@hooks/useAuth';
 import { useRouter } from 'expo-router';
+import { AppHeader } from '@/components/header/AppHeader';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function SettingsScreen() {
   const { colors, theme, themeMode, setThemeMode } = useTheme();
@@ -74,7 +76,7 @@ export default function SettingsScreen() {
   const SettingSection = ({ title, children }: any) => (
     <View style={styles.section}>
       <Text style={[styles.sectionTitle, { color: colors.textSecondary }]}>{title}</Text>
-      <View style={[styles.sectionContent, { 
+      <View style={[styles.sectionContent, {
         backgroundColor: colors.card || colors.background,
         shadowColor: colors.text,
       }]}>
@@ -112,15 +114,17 @@ export default function SettingsScreen() {
   );
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        {/* Header */}
-        <View style={styles.header}>
-          <Text style={[styles.headerTitle, { color: colors.text }]}>Settings</Text>
-          <Text style={[styles.headerSubtitle, { color: colors.textSecondary }]}>
-            Manage your account and preferences
-          </Text>
-        </View>
+    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
+
+      <AppHeader
+        variant="back"
+        title="Settings"
+        subtitle="Manage your account and preferences"
+        onBackPress={() => router.back()}
+        colors={colors}
+      />
+
+      <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
 
         {/* Appearance */}
         <SettingSection title="APPEARANCE">
@@ -229,7 +233,7 @@ export default function SettingsScreen() {
 
         <View style={{ height: 40 }} />
       </ScrollView>
-    </View>
+    </SafeAreaView>
   );
 }
 
@@ -237,9 +241,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  scroll: {
+    paddingTop: 16,
+    paddingBottom: 24,
+  },
   header: {
     paddingHorizontal: 24,
-    paddingTop: 60,
+    paddingTop: 16,
     paddingBottom: 24,
   },
   headerTitle: {

package/templates/default/src/components/header/AppHeader.tsx

@@ -0,0 +1,160 @@
+// components/AppHeader.tsx
+import React from 'react';
+import { View, TextInput, TouchableOpacity, Image, StyleSheet, Text } from 'react-native';
+import { Search, X, ArrowLeft } from 'lucide-react-native';
+
+interface AppHeaderProps {
+    variant?: 'search' | 'back';
+    searchQuery?: string;
+    onSearchChange?: (query: string) => void;
+    searchPlaceholder?: string;
+    title?: string;
+    subtitle?: string; // Tambahkan subtitle
+    onBackPress?: () => void;
+    user?: {
+        name?: string;
+        avatar?: string;
+        avatarId?: string;
+    };
+    onProfilePress?: () => void;
+    colors: {
+        primary: string;
+        text: string;
+        textSecondary: string;
+        background: string;
+    };
+}
+
+export const AppHeader: React.FC<AppHeaderProps> = ({
+    variant = 'search',
+    searchQuery = '',
+    onSearchChange,
+    searchPlaceholder = 'Search...',
+    title,
+    subtitle,
+    onBackPress,
+    user,
+    onProfilePress,
+    colors,
+}) => {
+    const avatarUrl = user?.avatar || `https://i.pravatar.cc/150?img=${user?.avatarId || 1}`;
+
+    // Render header dengan search dan profile
+    if (variant === 'search') {
+        return (
+            <View style={styles.header}>
+                <View style={[styles.searchContainer, { backgroundColor: `${colors.primary}08` }]}>
+                    <Search size={20} color={colors.textSecondary} />
+                    <TextInput
+                        style={[styles.searchInput, { color: colors.text }]}
+                        placeholder={searchPlaceholder}
+                        placeholderTextColor={colors.textSecondary}
+                        value={searchQuery}
+                        onChangeText={onSearchChange}
+                    />
+                    {searchQuery.length > 0 && (
+                        <TouchableOpacity onPress={() => onSearchChange?.('')}>
+                            <X size={18} color={colors.textSecondary} />
+                        </TouchableOpacity>
+                    )}
+                </View>
+
+                <TouchableOpacity
+                    style={styles.profileContainer}
+                    onPress={onProfilePress}
+                    activeOpacity={0.7}
+                >
+                    <Image
+                        source={{ uri: avatarUrl }}
+                        style={styles.profileImage}
+                    />
+                </TouchableOpacity>
+            </View>
+        );
+    }
+
+    // Render header dengan back button, title, dan subtitle
+    return (
+        <View style={styles.backHeader}>
+            <TouchableOpacity
+                onPress={onBackPress}
+                style={styles.backButton}
+                activeOpacity={0.7}
+            >
+                <ArrowLeft size={24} color={colors.text} />
+            </TouchableOpacity>
+
+            <View style={styles.headerTextContainer}>
+                <Text style={[styles.headerTitle, { color: colors.text }]}>
+                    {title}
+                </Text>
+                {subtitle && (
+                    <Text style={[styles.headerSubtitle, { color: colors.textSecondary }]}>
+                        {subtitle}
+                    </Text>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        gap: 12,
+    },
+    searchContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderRadius: 12,
+        gap: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: 15,
+        padding: 0,
+    },
+    profileContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        overflow: 'hidden',
+        borderWidth: 2,
+        borderColor: '#E5E7EB',
+    },
+    profileImage: {
+        width: '100%',
+        height: '100%',
+    },
+    backHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        gap: 12,
+    },
+    backButton: {
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+    },
+    headerTextContainer: {
+        flex: 1,
+    },
+    headerTitle: {
+        fontSize: 24,
+        fontWeight: '700',
+        marginBottom: 4,
+    },
+    headerSubtitle: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+});