add unistyles

apps/cli/templates/frontend/native/nativewind/components/container.tsx

@@ -0,0 +1,9 @@
+import { SafeAreaView } from "react-native";
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <SafeAreaView className="flex flex-1 p-4 bg-background">
+      {children}
+    </SafeAreaView>
+  );
+};

apps/cli/templates/frontend/native/nativewind/components/header-button.tsx

@@ -0,0 +1,31 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { forwardRef } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+
+export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void }>(
+  ({ onPress }, ref) => {
+    return (
+      <Pressable onPress={onPress}>
+        {({ pressed }) => (
+          <FontAwesome
+            name="info-circle"
+            size={25}
+            color="gray"
+            style={[
+              styles.headerRight,
+              {
+                opacity: pressed ? 0.5 : 1,
+              },
+            ]}
+          />
+        )}
+      </Pressable>
+    );
+  }
+);
+
+export const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15,
+  },
+});

apps/cli/templates/frontend/native/nativewind/components/tabbar-icon.tsx

@@ -0,0 +1,15 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { StyleSheet } from 'react-native';
+
+export const TabBarIcon = (props: {
+  name: React.ComponentProps<typeof FontAwesome>['name'];
+  color: string;
+}) => {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+};
+
+export const styles = StyleSheet.create({
+  tabBarIcon: {
+    marginBottom: -3,
+  },
+});