add unistyles

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

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

apps/cli/templates/frontend/native/unistyles/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/unistyles/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,
+  },
+});