gib/Wavelength
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

We have a sick button component now

Browse Source
This commit is contained in:
Gabriel Brown 2024-10-08 19:40:36 -05:00
parent 3d79e24ffb
commit 8128194488
8 changed files with 83 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,35 @@
import { StyleSheet } from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from "@expo/vector-icons/FontAwesome";
import Button from "@/components/buttons/Button";
const Index = () => {
const scheme = useColorScheme() ?? 'light';
return (
<ThemedView style={styles.container}>
<ThemedText style={styles.text}>
Home Screen
</ThemedText>
<ThemedView style={styles.footerContainer}>
<Button label="Choose a photo" />
<Button width={220} height={60}
onPress={() => alert('You pressed a button.')}
>
<FontAwesome name="picture-o" size={18}
color='#25292e' style={styles.buttonIcon}
/>
<ThemedText
style={[
styles.buttonLabel,
{color: Colors[scheme].background}
]}
>
Press this button
</ThemedText>
</Button>
</ThemedView>
</ThemedView>
);
@ -31,4 +49,10 @@ const styles = StyleSheet.create({
flex: 1 / 3,
alignItems: 'center',
},
buttonLabel: {
fontSize: 16,
},
buttonIcon: {
paddingRight: 8,
},
});

0
assets/fonts/SpaceMono-Regular.ttf Executable file → Normal file
View File

83
components/buttons/Button.tsx
View File

@ -3,67 +3,44 @@ import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from "@expo/vector-icons/FontAwesome";
const DEFAULT_WIDTH = 320;
const DEFAULT_HEIGHT = 68;
type Props = {
label: string;
theme?: 'primary';
width?: number;
height?: number;
onPress?: () => void;
};
const Button = ({ label, theme, onPress }: Props) => {
const Button = ({ width, height, children, onPress }: Props & React.ComponentProps<typeof Pressable>) => {
const scheme = useColorScheme() ?? 'light';
if (theme === 'primary') {
return (
<ThemedView style={styles.buttonContainer}>
<Pressable
style={[
styles.button,
{backgroundColor: Colors[scheme].text}
]}
onPress={() => alert('You pressed a button.')}
>
<ThemedText
style={[
styles.buttonLabel,
{color: Colors[scheme].background}
]}
>
{label}
</ThemedText>
</Pressable>
</ThemedView>
);
} else {
return (
<ThemedView style={styles.buttonContainer}>
<Pressable
style={[
styles.button,
{backgroundColor: Colors[scheme].text}
]}
onPress={() => alert('You pressed a button.')}
>
<ThemedText
style={[
styles.buttonLabel,
{color: Colors[scheme].background}
]}
>
{label}
</ThemedText>
</Pressable>
</ThemedView>
);
}
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: {
width: 320,
height: 68,
marginHorizontal: 20,
alignItems: 'center',
justifyContent: 'center',
padding: 3,
@ -76,10 +53,4 @@ const styles = StyleSheet.create({
justifyContent: 'center',
flexDirection: 'row',
},
buttonIcon: {
paddingRight: 8,
},
buttonLabel: {
fontSize: 16,
},
});

11
constants/Colors.ts
View File

@ -5,19 +5,22 @@
const tintColorLight = '#0a7ea4';
const tintColorDark = '#fff';
const black = '#2e2f3d'
const white = '#ECEDEE'
export const Colors = {
light: {
text: '#11181C',
background: '#fff',
text: black,
background: white,
//background: '#fff',
tint: tintColorLight,
icon: '#687076',
tabIconDefault: '#687076',
tabIconSelected: tintColorLight,
},
dark: {
text: '#ECEDEE',
background: '#2e2f3d',
text: white,
background: black,
tint: tintColorDark,
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',

0
example/assets/fonts/SpaceMono-Regular.ttf Executable file → Normal file
View File

0
example/scripts/reset-project.js Executable file → Normal file
View File

22
package-lock.json generated
View File

@ -14,6 +14,7 @@
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-image": "~1.13.0",
"expo-image-picker": "~15.0.7",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5",
@ -10112,6 +10113,27 @@
"expo": "*"
}
},
"node_modules/expo-image-loader": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-4.7.0.tgz",
"integrity": "sha512-cx+MxxsAMGl9AiWnQUzrkJMJH4eNOGlu7XkLGnAXSJrRoIiciGaKqzeaD326IyCTV+Z1fXvIliSgNW+DscvD8g==",
"license": "MIT",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-image-picker": {
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-15.0.7.tgz",
"integrity": "sha512-u8qiPZNfDb+ap6PJ8pq2iTO7JKX+ikAUQ0K0c7gXGliKLxoXgDdDmXxz9/6QdICTshJBJlBvI0MwY5NWu7A/uw==",
"license": "MIT",
"dependencies": {
"expo-image-loader": "~4.7.0"
},
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-keep-awake": {
"version": "13.0.2",
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-13.0.2.tgz",

3
package.json
View File

@ -34,7 +34,8 @@
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10",
"expo-image": "~1.13.0"
"expo-image": "~1.13.0",
"expo-image-picker": "~15.0.7"
},
"devDependencies": {
"@babel/core": "^7.20.0",