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

This commit is contained in:
2025-01-28 10:17:33 -06:00
parent 5a821fc6b5
commit 0dfb7f190d
20 changed files with 191 additions and 182 deletions

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,
},
});

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} />;
}

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();
});

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>
`;

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: {

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) {
}}
/>
);
}
};

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) {
}}
/>
);
}
};

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: {

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: {

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',
},
});

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;

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({
]}
/>
);
}
};

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} />;
}
};

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;
}
};

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;
}
};