Skip to content

Commit 5a60582

Browse files
verisorryverisorry
committed
added nativewind properly
1 parent 37c3603 commit 5a60582

File tree

16 files changed

+859
-49
lines changed

16 files changed

+859
-49
lines changed

‎app/(tabs)/two.tsx

Lines changed: 100 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,168 @@
1-
import { StyleSheet } from 'react-native';
1+
import { StyleSheet, Image } from 'react-native';
22
import { Text, View } from '@/components/Themed';
3-
import { TextInput, ScrollView } from 'react-native';
3+
import { TextInput, ScrollView, TouchableOpacity } from 'react-native';
44
import { useState } from 'react';
55
import { Picker } from '@react-native-picker/picker';
6+
import FontAwesome from '@expo/vector-icons/FontAwesome';
67

78
export default function TabTwoScreen() {
89
const [text, setText] = useState('');
9-
const [selectedCategory, setSelectedCategory] = useState('personal');
10+
const [selectedType, setSelectedType] = useState('personal');
1011
const [title, setTitle] = useState('');
1112

13+
const achievementTypes = [
14+
{ label: '🏆 Achievement', value: 'achievement' },
15+
{ label: '📚 Learning', value: 'learning' },
16+
{ label: '💪 Personal Growth', value: 'growth' },
17+
{ label: '🎯 Goal Reached', value: 'goal' },
18+
{ label: '🌟 Milestone', value: 'milestone' },
19+
];
20+
21+
const handleSave = () => {
22+
// TODO: Implement save functionality
23+
console.log({ type: selectedType, title, text });
24+
};
25+
1226
return (
1327
<View style={styles.container}>
14-
<Text style={styles.title}>Notes</Text>
15-
<View style={styles.inputContainer}>
16-
<TextInput
17-
style={styles.titleInput}
18-
value={title}
19-
onChangeText={setTitle}
20-
placeholder="Enter title..."
21-
placeholderTextColor="#666"
28+
<View style={styles.logoContainer}>
29+
<Image
30+
source={require('../../assets/images/logo.png')}
31+
style={styles.logo}
32+
resizeMode="contain"
2233
/>
34+
</View>
35+
<Text style={styles.title}>Record Achievement</Text>
36+
<View style={styles.inputContainer}>
2337
<View style={styles.pickerContainer}>
2438
<Picker
25-
selectedValue={selectedCategory}
26-
onValueChange={(itemValue) => setSelectedCategory(itemValue)}
39+
selectedValue={selectedType}
40+
onValueChange={(itemValue) => setSelectedType(itemValue)}
2741
style={styles.picker}
28-
itemStyle={styles.pickerItem}
2942
>
30-
<Picker.Item label="Personal" value="personal" />
31-
<Picker.Item label="Work" value="work" />
32-
<Picker.Item label="Ideas" value="ideas" />
33-
<Picker.Item label="Tasks" value="tasks" />
43+
{achievementTypes.map((type) => (
44+
<Picker.Item
45+
key={type.value}
46+
label={type.label}
47+
value={type.value}
48+
/>
49+
))}
3450
</Picker>
3551
</View>
52+
53+
<TextInput
54+
style={styles.titleInput}
55+
value={title}
56+
onChangeText={setTitle}
57+
placeholder="What did you achieve?"
58+
placeholderTextColor="#666"
59+
/>
3660
</View>
61+
3762
<ScrollView style={styles.scrollContainer}>
3863
<TextInput
3964
style={styles.input}
4065
multiline
4166
value={text}
4267
onChangeText={setText}
43-
placeholder="Enter your long text here..."
68+
placeholder="Tell me more about your achievement..."
4469
placeholderTextColor="#666"
4570
textAlignVertical="top"
4671
/>
4772
</ScrollView>
73+
74+
<TouchableOpacity style={styles.saveButton} onPress={handleSave}>
75+
<FontAwesome name="check-circle" size={20} color="#fff" />
76+
<Text style={styles.saveButtonText}>Save Achievement</Text>
77+
</TouchableOpacity>
4878
</View>
4979
);
5080
}
51-
5281
const styles = StyleSheet.create({
5382
container: {
5483
flex: 1,
5584
padding: 20,
5685
},
86+
logoContainer: {
87+
alignItems: 'center',
88+
marginBottom: 20,
89+
},
90+
logo: {
91+
width: 120,
92+
height: 120,
93+
},
5794
title: {
58-
fontSize: 24,
95+
fontSize: 28,
5996
fontWeight: 'bold',
6097
marginBottom: 20,
6198
textAlign: 'center',
99+
color: '#2f95dc',
62100
},
63101
inputContainer: {
64102
marginBottom: 15,
65103
},
66104
titleInput: {
67105
backgroundColor: '#f0f0f0',
68-
borderRadius: 8,
69-
padding: 10,
106+
borderRadius: 12,
107+
padding: 15,
70108
marginBottom: 10,
71109
fontSize: 16,
110+
shadowColor: '#000',
111+
shadowOffset: { width: 0, height: 1 },
112+
shadowOpacity: 0.1,
113+
shadowRadius: 2,
114+
elevation: 2,
72115
},
73116
pickerContainer: {
74117
backgroundColor: '#f0f0f0',
75-
borderRadius: 8,
118+
borderRadius: 12,
76119
marginBottom: 10,
120+
shadowColor: '#000',
121+
shadowOffset: { width: 0, height: 1 },
122+
shadowOpacity: 0.1,
123+
shadowRadius: 2,
124+
elevation: 2,
77125
},
78126
picker: {
79127
height: 50,
80-
fontSize: 16,
81-
},
82-
pickerItem: {
83-
fontSize: 16,
128+
width: '100%',
84129
},
85130
scrollContainer: {
86131
flex: 1,
132+
marginBottom: 15,
87133
},
88134
input: {
89135
flex: 1,
90136
backgroundColor: '#f0f0f0',
91-
borderRadius: 8,
137+
borderRadius: 12,
92138
padding: 15,
93139
minHeight: 200,
94140
fontSize: 16,
95141
lineHeight: 24,
142+
shadowColor: '#000',
143+
shadowOffset: { width: 0, height: 1 },
144+
shadowOpacity: 0.1,
145+
shadowRadius: 2,
146+
elevation: 2,
147+
},
148+
saveButton: {
149+
backgroundColor: '#2f95dc',
150+
borderRadius: 12,
151+
padding: 15,
152+
flexDirection: 'row',
153+
justifyContent: 'center',
154+
alignItems: 'center',
155+
shadowColor: '#000',
156+
shadowOffset: { width: 0, height: 2 },
157+
shadowOpacity: 0.2,
158+
shadowRadius: 4,
159+
elevation: 4,
160+
},
161+
saveButtonText: {
162+
color: '#fff',
163+
fontSize: 16,
164+
fontWeight: 'bold',
165+
marginLeft: 8,
96166
},
97167
});
168+

‎app/_layout.tsx

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1+
import React from 'react';
12
import FontAwesome from '@expo/vector-icons/FontAwesome';
23
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
34
import { useFonts } from 'expo-font';
45
import { Stack } from 'expo-router';
56
import * as SplashScreen from 'expo-splash-screen';
67
import { useEffect } from 'react';
7-
import 'react-native-reanimated';
8+
// import 'react-native-reanimated';
89
import '../global.css';
9-
10-
import { useColorScheme } from '@/components/useColorScheme';
10+
import 'expo-dev-client';
11+
import { StatusBar } from 'expo-status-bar';
12+
import { useColorScheme, useInitialAndroidBarSync } from '../lib/useColorScheme';
13+
import { NAV_THEME } from '../theme';
1114

1215
export {
1316
// Catch any errors thrown by the Layout component.
@@ -23,6 +26,8 @@ export const unstable_settings = {
2326
SplashScreen.preventAutoHideAsync();
2427

2528
export default function RootLayout() {
29+
useInitialAndroidBarSync();
30+
2631
const [loaded, error] = useFonts({
2732
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
2833
...FontAwesome.font,
@@ -47,14 +52,22 @@ export default function RootLayout() {
4752
}
4853

4954
function RootLayoutNav() {
50-
const colorScheme = useColorScheme();
55+
const { colorScheme, isDarkColorScheme } = useColorScheme();
5156

5257
return (
53-
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
58+
<>
59+
60+
{/* <StatusBar
61+
key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
62+
style={isDarkColorScheme ? 'light' : 'dark'}
63+
/> */}
64+
65+
<ThemeProvider value={NAV_THEME['light']}>
5466
<Stack>
5567
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
5668
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
5769
</Stack>
5870
</ThemeProvider>
71+
</>
5972
);
6073
}

‎assets/images/logo.png

25.6 KB
Loading

‎babel.config.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
module.exports = function (api) {
22
api.cache(true);
3+
const plugins = [];
4+
5+
plugins.push('react-native-reanimated/plugin');
6+
37
return {
4-
presets: [
5-
["babel-preset-expo", { jsxImportSource: "nativewind" }],
6-
"nativewind/babel",
7-
],
8+
presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
9+
plugins,
810
};
911
};

‎components/nativewindui/Text.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { VariantProps, cva } from 'class-variance-authority';
2+
import * as React from 'react';
3+
import { Text as RNText } from 'react-native';
4+
5+
import { cn } from '../../lib/cn';
6+
7+
const textVariants = cva('text-foreground', {
8+
variants: {
9+
variant: {
10+
largeTitle: 'text-4xl',
11+
title1: 'text-2xl',
12+
title2: 'text-[22px] leading-7',
13+
title3: 'text-xl',
14+
heading: 'text-[17px] leading-6 font-semibold',
15+
body: 'text-[17px] leading-6',
16+
callout: 'text-base',
17+
subhead: 'text-[15px] leading-6',
18+
footnote: 'text-[13px] leading-5',
19+
caption1: 'text-xs',
20+
caption2: 'text-[11px] leading-4',
21+
},
22+
color: {
23+
primary: '',
24+
secondary: 'text-secondary-foreground/90',
25+
tertiary: 'text-muted-foreground/90',
26+
quarternary: 'text-muted-foreground/50',
27+
},
28+
},
29+
defaultVariants: {
30+
variant: 'body',
31+
color: 'primary',
32+
},
33+
});
34+
35+
const TextClassContext = React.createContext<string | undefined>(undefined);
36+
37+
function Text({
38+
className,
39+
variant,
40+
color,
41+
...props
42+
}: React.ComponentPropsWithoutRef<typeof RNText> & VariantProps<typeof textVariants>) {
43+
const textClassName = React.useContext(TextClassContext);
44+
return (
45+
<RNText className={cn(textVariants({ variant, color }), textClassName, className)} {...props} />
46+
);
47+
}
48+
49+
export { Text, TextClassContext, textVariants };

‎components/nativewindui/ThemeToggle.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Icon } from '@roninoss/icons';
2+
import { Pressable, View } from 'react-native';
3+
import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
4+
5+
import { cn } from '../../lib/cn';
6+
import { useColorScheme } from '../../lib/useColorScheme';
7+
import { COLORS } from '../../theme/colors';
8+
9+
export function ThemeToggle() {
10+
const { colorScheme, setColorScheme } = useColorScheme();
11+
return (
12+
<LayoutAnimationConfig skipEntering>
13+
<Animated.View
14+
className="items-center justify-center"
15+
key={"toggle-" + colorScheme}
16+
entering={ZoomInRotate}>
17+
<Pressable
18+
onPress={() => {
19+
setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
20+
}}
21+
className="opacity-80">
22+
{colorScheme === 'dark'
23+
? ({ pressed }) => (
24+
<View className={cn('px-0.5', pressed && 'opacity-50')}>
25+
<Icon namingScheme="sfSymbol" name="moon.stars" color={COLORS.white} />
26+
</View>
27+
)
28+
: ({ pressed }) => (
29+
<View className={cn('px-0.5', pressed && 'opacity-50')}>
30+
<Icon namingScheme="sfSymbol" name="sun.min" color={COLORS.black} />
31+
</View>
32+
)}
33+
</Pressable>
34+
</Animated.View>
35+
</LayoutAnimationConfig>
36+
);
37+
}

0 commit comments

Comments
 (0)