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

This commit is contained in:
Aman Varshney
2025-06-02 16:30:53 +05:30
committed by GitHub
parent 9dbeea8983
commit 7851d0636d
42 changed files with 1606 additions and 536 deletions

View File

@@ -10,23 +10,28 @@ export default function TabLayout() {
<Tabs
screenOptions={{
headerShown: false,
tabBarActiveTintColor: theme.colors.primary,
tabBarInactiveTintColor: theme.colors.mutedForeground,
tabBarStyle: {
backgroundColor: theme.colors.background,
borderTopColor: theme.colors.border,
},
}}
>
<Tabs.Screen
name="index"
options={{
title: "Tab One",
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
title: "Home",
tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
}}
/>
<Tabs.Screen
name="two"
options={{
title: "Tab Two",
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
title: "Explore",
tabBarIcon: ({ color }) => (
<TabBarIcon name="compass" color={color} />
),
}}
/>
</Tabs>

View File

@@ -1,29 +1,37 @@
import { Stack } from "expo-router";
import { StyleSheet } from "react-native-unistyles";
import { Container } from "@/components/container";
import { Text, View } from "react-native";
import { ScrollView, Text, View } from "react-native";
import { StyleSheet } from "react-native-unistyles";
export default function Home() {
return (
<>
<Stack.Screen options={{ title: "Tab One" }} />
<Container>
<View style={styles.container}>
<Text style={styles.text}>Tab One</Text>
<Container>
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.headerSection}>
<Text style={styles.title}>Tab One</Text>
<Text style={styles.subtitle}>
Explore the first section of your app
</Text>
</View>
</Container>
</>
</ScrollView>
</Container>
);
}
const styles = StyleSheet.create((theme) => ({
text: {
color: theme.colors.typography,
},
container: {
flex: 1,
paddingBottom: 100,
justifyContent: "center",
alignItems: "center",
padding: theme.spacing.lg,
},
headerSection: {
paddingVertical: theme.spacing.xl,
},
title: {
fontSize: theme.fontSize["3xl"],
fontWeight: "bold",
color: theme.colors.foreground,
marginBottom: theme.spacing.sm,
},
subtitle: {
fontSize: theme.fontSize.lg,
color: theme.colors.mutedForeground,
},
}));

View File

@@ -1,29 +1,37 @@
import { Stack } from "expo-router";
import { StyleSheet } from "react-native-unistyles";
import { Container } from "@/components/container";
import { Text, View } from "react-native";
import { ScrollView, Text, View } from "react-native";
import { StyleSheet } from "react-native-unistyles";
export default function Home() {
export default function TabTwo() {
return (
<>
<Stack.Screen options={{ title: "Tab Two" }} />
<Container>
<View style={styles.container}>
<Text style={styles.text}>Tab Two</Text>
<Container>
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.headerSection}>
<Text style={styles.title}>Tab Two</Text>
<Text style={styles.subtitle}>
Discover more features and content
</Text>
</View>
</Container>
</>
</ScrollView>
</Container>
);
}
const styles = StyleSheet.create((theme) => ({
text: {
color: theme.colors.typography,
},
container: {
flex: 1,
paddingBottom: 100,
justifyContent: "center",
alignItems: "center",
padding: theme.spacing.lg,
},
headerSection: {
paddingVertical: theme.spacing.xl,
},
title: {
fontSize: theme.fontSize["3xl"],
fontWeight: "bold",
color: theme.colors.foreground,
marginBottom: theme.spacing.sm,
},
subtitle: {
fontSize: theme.fontSize.lg,
color: theme.colors.mutedForeground,
},
}));