gib/expo_template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pretty up code. Add all my default stuff that I like

Browse Source
This commit is contained in:
Gabriel Brown 2025-01-28 10:17:33 -06:00
parent 5a821fc6b5
commit 0dfb7f190d
20 changed files with 191 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/(tabs)/_layout.tsx
View File

@ -1,21 +1,23 @@
import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';
import { HapticTab } from '@/components/HapticTab';
import { HapticTab } from '@/components/default/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
export default function TabLayout() {
const colorScheme = useColorScheme();
const TabLayout = () => {
const scheme = useColorScheme() ?? 'dark';
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
tabBarActiveTintColor: Colors[scheme].tint,
headerShown: false,
headerStyle: {
backgroundColor: Colors[scheme].background,
},
tabBarButton: HapticTab,
tabBarBackground: TabBarBackground,
tabBarStyle: Platform.select({
@ -23,7 +25,11 @@ export default function TabLayout() {
// Use a transparent background on iOS to show the blur effect
position: 'absolute',
},
default: {},
default: {
backgroundColor: Colors[scheme].background,
borderTopColor: Colors[scheme].tint,
borderTopWidth: 1,
},
}),
}}
>
@ -35,12 +41,13 @@ export default function TabLayout() {
}}
/>
<Tabs.Screen
name='explore'
name='settings'
options={{
title: 'Explore',
tabBarIcon: ({ color }) => <IconSymbol size={28} name='paperplane.fill' color={color} />,
title: 'Settings',
tabBarIcon: ({ color }) => <IconSymbol size={28} name='gearshape.fill' color={color} />,
}}
/>
</Tabs>
);
}
};
export default TabLayout;

14
app/(tabs)/index.tsx
View File

@ -1,14 +1,12 @@
import { Image, StyleSheet, Platform } from 'react-native';
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
export default function HomeScreen() {
const HomeScreen = () => {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerHeight={200}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
@ -18,7 +16,6 @@ export default function HomeScreen() {
>
<ThemedView style={styles.titleContainer}>
<ThemedText type='title'>Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type='subtitle'>Step 1: Try it</ThemedText>
@ -53,7 +50,8 @@ export default function HomeScreen() {
</ThemedView>
</ParallaxScrollView>
);
}
};
export default HomeScreen;
const styles = StyleSheet.create({
titleContainer: {

25
app/(tabs)/explore.tsx → app/(tabs)/settings.tsx
View File

@ -1,27 +1,21 @@
import { StyleSheet, Image, Platform } from 'react-native';
import { Collapsible } from '@/components/Collapsible';
import { ExternalLink } from '@/components/ExternalLink';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Collapsible } from '@/components/default/Collapsible';
import { ExternalLink } from '@/components/default/ExternalLink';
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { IconSymbol } from '@/components/ui/IconSymbol';
export default function TabTwoScreen() {
const TabTwoScreen = () => {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
headerHeight={150}
headerImage={
<IconSymbol
size={310}
color='#808080'
name='chevron.left.forwardslash.chevron.right'
style={styles.headerImage}
/>
<IconSymbol size={200} color='#808080' name='gear.circle' style={styles.headerImage} />
}
>
<ThemedView style={styles.titleContainer}>
<ThemedText type='title'>Explore</ThemedText>
<ThemedText type='title'>Settings</ThemedText>
</ThemedView>
<ThemedText>This app includes example code to help you get started.</ThemedText>
<Collapsible title='File-based routing'>
@ -94,7 +88,8 @@ export default function TabTwoScreen() {
</Collapsible>
</ParallaxScrollView>
);
}
};
export default TabTwoScreen;
const styles = StyleSheet.create({
headerImage: {

20
app/+not-found.tsx
View File

@ -1,22 +1,22 @@
import { Link, Stack } from 'expo-router';
import { StyleSheet } from 'react-native';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import TextButton from '@/components/theme/buttons/TextButton';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
export default function NotFoundScreen() {
const NotFoundScreen = () => {
return (
<>
<Stack.Screen options={{ title: 'Oops!' }} />
<Stack.Screen options={{ title: 'Page not found' }} />
<ThemedView style={styles.container}>
<ThemedText type='title'>This screen doesn't exist.</ThemedText>
<Link href='/' style={styles.link}>
<ThemedText type='link'>Go to home screen!</ThemedText>
<Link href='/'>
<TextButton width={200} height={45} text='Go to home screen' fontSize={24} />
</Link>
</ThemedView>
</>
);
}
};
export default NotFoundScreen;
const styles = StyleSheet.create({
container: {
@ -25,8 +25,4 @@ const styles = StyleSheet.create({
justifyContent: 'center',
padding: 20,
},
link: {
marginTop: 15,
paddingVertical: 15,
},
});

10
app/_layout.tsx
View File

@ -5,14 +5,13 @@ import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import 'react-native-reanimated';
import { useColorScheme } from '@/hooks/useColorScheme';
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const colorScheme = useColorScheme();
const RootLayout = () => {
const scheme = useColorScheme() ?? 'dark';
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});
@ -28,7 +27,7 @@ export default function RootLayout() {
}
return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<ThemeProvider value={scheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name='(tabs)' options={{ headerShown: false }} />
<Stack.Screen name='+not-found' />
@ -36,4 +35,5 @@ export default function RootLayout() {
<StatusBar style='auto' />
</ThemeProvider>
);
}
};
export default RootLayout;

40
components/HelloWave.tsx
View File

@ -1,40 +0,0 @@
import { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
withRepeat,
withSequence,
} from 'react-native-reanimated';
import { ThemedText } from '@/components/ThemedText';
export function HelloWave() {
const rotationAnimation = useSharedValue(0);
useEffect(() => {
rotationAnimation.value = withRepeat(
withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
4, // Run the animation 4 times
);
}, []);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ rotate: `${rotationAnimation.value}deg` }],
}));
return (
<Animated.View style={animatedStyle}>
<ThemedText style={styles.text}>👋</ThemedText>
</Animated.View>
);
}
const styles = StyleSheet.create({
text: {
fontSize: 28,
lineHeight: 32,
marginTop: -6,
},
});

14
components/ThemedView.tsx
View File

@ -1,14 +0,0 @@
import { View, type ViewProps } from 'react-native';
import { useThemeColor } from '@/hooks/useThemeColor';
export type ThemedViewProps = ViewProps & {
lightColor?: string;
darkColor?: string;
};
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
}

10
components/__tests__/ThemedText-test.tsx
View File

@ -1,10 +0,0 @@
import * as React from 'react';
import renderer from 'react-test-renderer';
import { ThemedText } from '../ThemedText';
it(`renders correctly`, () => {
const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
expect(tree).toMatchSnapshot();
});

24
components/__tests__/__snapshots__/ThemedText-test.tsx.snap
View File

@ -1,24 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<Text
style={
[
{
"color": "#11181C",
},
{
"fontSize": 16,
"lineHeight": 24,
},
undefined,
undefined,
undefined,
undefined,
undefined,
]
}
>
Snapshot test!
</Text>
`;

12
components/Collapsible.tsx → components/default/Collapsible.tsx
View File

@ -1,15 +1,13 @@
import { PropsWithChildren, useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { IconSymbol } from '@/components/ui/IconSymbol';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
export const Collapsible = ({ children, title }: PropsWithChildren & { title: string }) => {
const [isOpen, setIsOpen] = useState(false);
const theme = useColorScheme() ?? 'light';
const scheme = useColorScheme() ?? 'dark';
return (
<ThemedView>
@ -22,7 +20,7 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st
name='chevron.right'
size={18}
weight='medium'
color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
color={scheme === 'light' ? Colors.light.icon : Colors.dark.icon}
style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
/>
@ -31,7 +29,7 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st
{isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
</ThemedView>
);
}
};
const styles = StyleSheet.create({
heading: {

8
components/ExternalLink.tsx → components/default/ExternalLink.tsx
View File

@ -1,16 +1,16 @@
import { Link } from 'expo-router';
import { Link, RelativePathString } from 'expo-router';
import { openBrowserAsync } from 'expo-web-browser';
import { type ComponentProps } from 'react';
import { Platform } from 'react-native';
type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: string };
export function ExternalLink({ href, ...rest }: Props) {
export const ExternalLink = ({ href, ...rest }: Props) => {
return (
<Link
target='_blank'
{...rest}
href={href}
href={href as RelativePathString}
onPress={async (event) => {
if (Platform.OS !== 'web') {
// Prevent the default behavior of linking to the default browser on native.
@ -21,4 +21,4 @@ export function ExternalLink({ href, ...rest }: Props) {
}}
/>
);
}
};

4
components/HapticTab.tsx → components/default/HapticTab.tsx
View File

@ -2,7 +2,7 @@ import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
import { PlatformPressable } from '@react-navigation/elements';
import * as Haptics from 'expo-haptics';
export function HapticTab(props: BottomTabBarButtonProps) {
export const HapticTab = (props: BottomTabBarButtonProps) => {
return (
<PlatformPressable
{...props}
@ -15,4 +15,4 @@ export function HapticTab(props: BottomTabBarButtonProps) {
}}
/>
);
}
};

26
components/ParallaxScrollView.tsx → components/default/ParallaxScrollView.tsx
View File

@ -6,8 +6,7 @@ import Animated, {
useAnimatedStyle,
useScrollViewOffset,
} from 'react-native-reanimated';
import { ThemedView } from '@/components/ThemedView';
import { ThemedView } from '@/components/theme/Theme';
import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
import { useColorScheme } from '@/hooks/useColorScheme';
@ -16,14 +15,16 @@ const HEADER_HEIGHT = 250;
type Props = PropsWithChildren<{
headerImage: ReactElement;
headerBackgroundColor: { dark: string; light: string };
headerHeight?: number;
}>;
export default function ParallaxScrollView({
const ParallaxScrollView = ({
children,
headerImage,
headerBackgroundColor,
}: Props) {
const colorScheme = useColorScheme() ?? 'light';
headerHeight = HEADER_HEIGHT,
}: Props) => {
const scheme = useColorScheme() ?? 'dark';
const scrollRef = useAnimatedRef<Animated.ScrollView>();
const scrollOffset = useScrollViewOffset(scrollRef);
const bottom = useBottomTabOverflow();
@ -33,12 +34,12 @@ export default function ParallaxScrollView({
{
translateY: interpolate(
scrollOffset.value,
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
[-headerHeight, 0, headerHeight],
[-headerHeight / 2, 0, headerHeight * 0.75],
),
},
{
scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
scale: interpolate(scrollOffset.value, [-headerHeight, 0, headerHeight], [2, 1, 1]),
},
],
};
@ -55,7 +56,10 @@ export default function ParallaxScrollView({
<Animated.View
style={[
styles.header,
{ backgroundColor: headerBackgroundColor[colorScheme] },
{
backgroundColor: headerBackgroundColor[scheme],
height: headerHeight,
},
headerAnimatedStyle,
]}
>
@ -65,14 +69,14 @@ export default function ParallaxScrollView({
</Animated.ScrollView>
</ThemedView>
);
}
};
export default ParallaxScrollView;
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
height: HEADER_HEIGHT,
overflow: 'hidden',
},
content: {

18
components/ThemedText.tsx → components/theme/Theme.tsx
View File

@ -1,22 +1,30 @@
import { View, type ViewProps } from 'react-native';
import { Text, type TextProps, StyleSheet } from 'react-native';
import { useThemeColor } from '@/hooks/useThemeColor';
export type ThemedViewProps = ViewProps & {
lightColor?: string;
darkColor?: string;
};
export type ThemedTextProps = TextProps & {
lightColor?: string;
darkColor?: string;
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};
export function ThemedText({
export const ThemedView = ({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) => {
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
};
export const ThemedText = ({
style,
lightColor,
darkColor,
type = 'default',
...rest
}: ThemedTextProps) {
}: ThemedTextProps) => {
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
return (
<Text
style={[
@ -31,7 +39,7 @@ export function ThemedText({
{...rest}
/>
);
}
};
const styles = StyleSheet.create({
default: {

58
components/theme/buttons/Button.tsx Normal file
View File

@ -0,0 +1,58 @@
import { StyleSheet, Pressable } from 'react-native';
import { ThemedView } from '@/components/theme/Theme';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { StyleProp, ViewStyle } from 'react-native';
const DEFAULT_WIDTH = 320;
const DEFAULT_HEIGHT = 68;
type Props = {
width?: number;
height?: number;
onPress?: () => void;
};
const Button = ({
width,
height,
children,
onPress,
}: Props & React.ComponentProps<typeof Pressable>) => {
const scheme = useColorScheme() ?? 'dark';
return (
<ThemedView
style={[
styles.buttonContainer,
{
width: width ?? DEFAULT_WIDTH,
height: height ?? DEFAULT_HEIGHT,
},
]}
>
<Pressable
style={[styles.button, { backgroundColor: Colors[scheme].text }]}
onPress={onPress}
>
{children}
</Pressable>
</ThemedView>
);
};
export default Button;
const styles = StyleSheet.create({
buttonContainer: {
alignItems: 'center',
justifyContent: 'center',
padding: 3,
},
button: {
borderRadius: 10,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
});

33
components/theme/buttons/TextButton.tsx Normal file
View File

@ -0,0 +1,33 @@
import Button from '@/components/theme/buttons/Button';
import { ThemedText } from '@/components/theme/Theme';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
const DEFAULT_FONT_SIZE = 16;
type Props = {
width?: number;
height?: number;
text: string;
fontSize?: number;
onPress?: () => void;
};
const TextButton = ({ width, height, text, fontSize, onPress }: Props) => {
const scheme = useColorScheme() ?? 'dark';
return (
<Button width={width} height={height} onPress={onPress}>
<ThemedText
style={[
{
color: Colors[scheme].background,
fontSize: fontSize ?? DEFAULT_FONT_SIZE,
},
]}
>
{text}
</ThemedText>
</Button>
);
};
export default TextButton;

6
components/ui/IconSymbol.ios.tsx
View File

@ -1,7 +1,7 @@
import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
import { StyleProp, ViewStyle } from 'react-native';
export function IconSymbol({
export const IconSymbol = ({
name,
size = 24,
color,
@ -13,7 +13,7 @@ export function IconSymbol({
color: string;
style?: StyleProp<ViewStyle>;
weight?: SymbolWeight;
}) {
}) => {
return (
<SymbolView
weight={weight}
@ -29,4 +29,4 @@ export function IconSymbol({
]}
/>
);
}
};

10
components/ui/IconSymbol.tsx
View File

@ -3,7 +3,7 @@
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { SymbolWeight } from 'expo-symbols';
import React from 'react';
import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
import { OpaqueColorValue, StyleProp, TextStyle } from 'react-native';
// Add your SFSymbol to MaterialIcons mappings here.
const MAPPING = {
@ -27,7 +27,7 @@ export type IconSymbolName = keyof typeof MAPPING;
*
* Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons.
*/
export function IconSymbol({
export const IconSymbol = ({
name,
size = 24,
color,
@ -36,8 +36,8 @@ export function IconSymbol({
name: IconSymbolName;
size?: number;
color: string | OpaqueColorValue;
style?: StyleProp<ViewStyle>;
style?: StyleProp<TextStyle>;
weight?: SymbolWeight;
}) {
}) => {
return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
}
};

9
components/ui/TabBarBackground.ios.tsx
View File

@ -3,7 +3,7 @@ import { BlurView } from 'expo-blur';
import { StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
export default function BlurTabBarBackground() {
const BlurTabBarBackground = () => {
return (
<BlurView
// System chrome material automatically adapts to the system's theme
@ -13,10 +13,11 @@ export default function BlurTabBarBackground() {
style={StyleSheet.absoluteFill}
/>
);
}
};
export default BlurTabBarBackground;
export function useBottomTabOverflow() {
export const useBottomTabOverflow = () => {
const tabHeight = useBottomTabBarHeight();
const { bottom } = useSafeAreaInsets();
return tabHeight - bottom;
}
};

5
components/ui/TabBarBackground.tsx
View File

@ -1,6 +1,5 @@
// This is a shim for web and Android where the tab bar is generally opaque.
export default undefined;
export function useBottomTabOverflow() {
export const useBottomTabOverflow = () => {
return 0;
}
};