add ai and todo example templates for native frontends (#293)

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

@@ -1,20 +1,15 @@
 import React from "react";
-import { View } from "react-native";
+import { SafeAreaView } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 
 export const Container = ({ children }: { children: React.ReactNode }) => {
-  return <View style={styles.container}>{children}</View>;
+  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
 };
 
 const styles = StyleSheet.create((theme, rt) => ({
   container: {
     flex: 1,
-    paddingBottom: rt.insets.bottom,
     backgroundColor: theme.colors.background,
-    transform: [
-      {
-        translateY: rt.insets.ime * -1,
-      },
-    ],
+    paddingBottom: rt.insets.bottom,
   },
 }));

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

@@ -1,31 +1,36 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { forwardRef } from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { forwardRef } from "react";
+import { Pressable } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
 
-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,
-  },
+export const HeaderButton = forwardRef<
+  typeof Pressable,
+  { onPress?: () => void }
+>(({ onPress }, ref) => {
+  return (
+    <Pressable onPress={onPress} style={styles.button}>
+      {({ pressed }) => (
+        <FontAwesome
+          name="info-circle"
+          size={20}
+          color={styles.icon.color}
+          style={{
+            opacity: pressed ? 0.7 : 1,
+          }}
+        />
+      )}
+    </Pressable>
+  );
 });
+
+const styles = StyleSheet.create((theme) => ({
+  button: {
+    padding: theme.spacing.sm,
+    marginRight: theme.spacing.sm,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: `${theme.colors.secondary}80`, // 50% opacity
+  },
+  icon: {
+    color: theme.colors.secondaryForeground,
+  },
+}));

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

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