app framework

src/screens/auth/RegisterScreen.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, TextInput } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+import { ScreenContainer } from '@/components/common/ScreenContainer';
+import { AuthStackParamList } from '@/navigation/types';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+
+type Props = NativeStackScreenProps<AuthStackParamList, 'Register'>;
+
+export function RegisterScreen({ navigation }: Props): React.JSX.Element {
+  return (
+    <ScreenContainer>
+      <Text style={styles.title}>Create your archer profile</Text>
+      <Text style={styles.subtitle}>
+        Add registration, email verification, and optional club metadata here.
+      </Text>
+      <TextInput style={styles.input} placeholder="Display name" placeholderTextColor={colors.muted} />
+      <TextInput style={styles.input} placeholder="Email" placeholderTextColor={colors.muted} />
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        placeholderTextColor={colors.muted}
+        secureTextEntry
+      />
+      <Pressable style={styles.primaryButton}>
+        <Text style={styles.primaryButtonText}>Register</Text>
+      </Pressable>
+      <Pressable onPress={() => navigation.goBack()}>
+        <Text style={styles.link}>Back to login</Text>
+      </Pressable>
+    </ScreenContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    color: colors.text,
+    fontSize: 30,
+    fontWeight: '800',
+  },
+  subtitle: {
+    color: colors.muted,
+    lineHeight: 22,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 16,
+    paddingHorizontal: spacing.md,
+    paddingVertical: 14,
+    backgroundColor: colors.surface,
+  },
+  primaryButton: {
+    backgroundColor: colors.primary,
+    paddingVertical: 16,
+    borderRadius: 16,
+    alignItems: 'center',
+  },
+  primaryButtonText: {
+    color: colors.surface,
+    fontWeight: '700',
+    fontSize: 16,
+  },
+  link: {
+    color: colors.primary,
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+});
+