Chris/studysprint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tailwind framework init, and tailwind-example of editTask.tsx

Browse Source
This commit is contained in:
Fhj0607
2026-04-21 13:22:04 +02:00
parent 5bde373514
commit 28b95b6a44
11 changed files with 991 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ import { Session } from "@supabase/supabase-js";
import { Tabs } from "expo-router";
import { useEffect, useState } from "react";
export default function TabLayout() {
const [session, SetSession] = useState<Session | null>(null)
const [loading, SetLoading] = useState(true);

261
app/(tabs)/editTask.tsx
View File

@@ -1,4 +1,3 @@
import { defaultStyles } from '@/constants/defaultStyles';
import { supabase } from '@/lib/supabase';
import {
router,
@@ -15,11 +14,10 @@ import {
Platform,
Pressable,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableWithoutFeedback,
View
View,
} from 'react-native';
export default function EditTask() {
@@ -68,31 +66,38 @@ export default function EditTask() {
const handleSaveTask = async () => {
if (!title.trim() || !description.trim() || !deadline.trim()) {
Alert.alert("All fields are required!");
Alert.alert('All fields are required!');
return;
}
setIsSaving(true);
try {
const { data: userData, error: userError } = await supabase.auth.getUser();
if (userError || !userData.user) {
router.replace("../createUser");
router.replace('../createUser');
return;
}
const { error: dbError } = await supabase.from("tasks").update({
title,
description,
const { error: dbError } = await supabase
.from('tasks')
.update({
title: title.trim(),
description: description.trim(),
isCompleted,
lastChanged: new Date().toISOString(),
deadline,
deadline: deadline.trim(),
uId: userData.user.id,
}).eq("tId", taskId);
})
.eq('tId', taskId);
if (dbError) {
Alert.alert("Task could not be edited, please try again");
Alert.alert('Task could not be edited, please try again');
return;
}
Alert.alert("Task successfully edited!");
Alert.alert('Task successfully edited!');
router.back();
} finally {
setIsSaving(false);
@@ -103,47 +108,59 @@ export default function EditTask() {
<>
<Stack.Screen
options={{
title: "Edit Task",
headerTitleStyle: defaultStyles.title
title: 'Edit Task',
headerTitleStyle: {
fontSize: 20,
fontWeight: '700',
},
}}
/>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : "height"}
className="flex-1 bg-gray-100"
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<ScrollView
style={defaultStyles.container}
keyboardShouldPersistTaps="handled"
contentContainerClassName="flex-grow justify-center px-5 py-8"
>
<View style={styles.card}>
<Text style={defaultStyles.title}>Edit Task</Text>
<Text style={styles.subtitle}>Update your task details below.</Text>
<View className="rounded-3xl bg-white p-6 shadow-lg">
<Text className="mb-1 text-3xl font-bold text-gray-900">
Edit Task
</Text>
<Text className="mb-6 text-base text-gray-500">
Update the details for this task.
</Text>
{isLoading ? (
<View style={styles.loadingContainer}>
<View className="items-center justify-center py-12">
<ActivityIndicator size="large" />
<Text style={styles.loadingText}>Loading task...</Text>
<Text className="mt-3 text-gray-500">Loading task...</Text>
</View>
) : (
<>
<View style={styles.field}>
<Text style={styles.label}>Title</Text>
<View className="mb-4">
<Text className="mb-2 text-sm font-semibold text-gray-700">
Title
</Text>
<TextInput
style={styles.input}
placeholder="Enter task title"
className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
placeholder="Enter title"
placeholderTextColor="#9ca3af"
value={title}
onChangeText={setTitle}
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Description</Text>
<View className="mb-4">
<Text className="mb-2 text-sm font-semibold text-gray-700">
Description
</Text>
<TextInput
style={[styles.input, styles.textArea]}
placeholder="Enter task description"
className="min-h-28 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
placeholder="Enter description"
placeholderTextColor="#9ca3af"
value={description}
onChangeText={setDescription}
@@ -152,10 +169,12 @@ export default function EditTask() {
/>
</View>
<View style={styles.field}>
<Text style={styles.label}>Deadline</Text>
<View className="mb-4">
<Text className="mb-2 text-sm font-semibold text-gray-700">
Deadline
</Text>
<TextInput
style={styles.input}
className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
placeholder="YYYY-MM-DD"
placeholderTextColor="#9ca3af"
value={deadline}
@@ -164,52 +183,57 @@ export default function EditTask() {
</View>
<Pressable
style={[
styles.checkboxContainer,
isCompleted && styles.checkboxContainerActive,
]}
className={`mb-6 flex-row items-center rounded-xl border p-4 ${
isCompleted
? 'border-blue-600 bg-blue-50'
: 'border-gray-300 bg-gray-50'
}`}
onPress={() => setIsCompleted((current) => !current)}
>
<View
style={[
styles.checkbox,
isCompleted && styles.checkboxActive,
]}
className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
isCompleted
? 'border-blue-600 bg-blue-600'
: 'border-gray-400 bg-white'
}`}
>
{isCompleted && <Text style={styles.checkboxMark}>✓</Text>}
{isCompleted && (
<Text className="text-base font-bold text-white">✓</Text>
)}
</View>
<Text style={styles.checkboxLabel}>
<Text className="text-base font-semibold text-gray-900">
{isCompleted ? 'Completed' : 'Not completed'}
</Text>
</Pressable>
<View style={styles.buttonGroup}>
<Pressable
style={[
styles.primaryButton,
isSaving && styles.disabledButton,
]}
className={`h-14 items-center justify-center rounded-2xl ${
isSaving ? 'bg-blue-400' : 'bg-blue-600'
}`}
onPress={handleSaveTask}
disabled={isSaving}
>
<Text style={styles.primaryButtonText}>
<Text className="text-base font-bold text-white">
{isSaving ? 'Saving...' : 'Save Changes'}
</Text>
</Pressable>
{isSaving && (
<View className="mt-4">
<ActivityIndicator size="small" />
</View>
)}
<Pressable
style={styles.secondaryButton}
className="mt-3 h-14 items-center justify-center rounded-2xl bg-gray-200"
onPress={() => router.back()}
disabled={isSaving}
>
<Text style={styles.secondaryButtonText}>Cancel</Text>
<Text className="text-base font-bold text-gray-900">
Cancel
</Text>
</Pressable>
</View>
</>
)}
</View>
@@ -219,134 +243,3 @@ export default function EditTask() {
</>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: 'f3f4f6'
},
container: {
flexGrow: 1,
justifyContent: 'center',
padding: 20,
},
card: {
backgroundColor: '#fff',
borderRadius: 8,
padding: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.1,
shadowRadius: 10,
elevation: 5,
},
subtitle: {
fontSize: 15,
color: '#6b7280',
marginBottom: 24,
},
loadingContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 40,
gap: 12,
},
loadingText: {
color: '#6b7280',
fontSize: 15,
},
field: {
marginBottom: 16,
},
label: {
fontSize: 14,
fontWeight: '600',
color: '#374151',
marginBottom: 8,
},
input: {
minHeight: 50,
borderWidth: 1,
borderColor: '#d1d5db',
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 12,
fontSize: 16,
color: '#111827',
backgroundColor: '#f9fafb',
},
textArea: {
minHeight: 110,
},
checkboxContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 12,
borderWidth: 1,
borderColor: '#d1d5db',
borderRadius: 12,
padding: 14,
marginTop: 4,
marginBottom: 22,
backgroundColor: '#f9fafb',
},
checkboxContainerActive: {
borderColor: '#2563eb',
backgroundColor: '#eff6ff',
},
checkbox: {
width: 24,
height: 24,
borderWidth: 2,
borderColor: '#9ca3af',
borderRadius: 6,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ffffff',
},
checkboxActive: {
borderColor: '#2563eb',
backgroundColor: '#2563eb',
},
checkboxMark: {
color: '#ffffff',
fontSize: 16,
fontWeight: '700',
},
checkboxLabel: {
fontSize: 16,
fontWeight: '600',
color: '#111827',
},
buttonGroup: {
gap: 12,
},
primaryButton: {
height: 52,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#2563eb',
},
primaryButtonText: {
color: '#ffffff',
fontSize: 16,
fontWeight: '700',
},
disabledButton: {
opacity: 0.6,
},
secondaryButton: {
height: 52,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#e5e7eb',
},
secondaryButtonText: {
color: '#111827',
fontSize: 16,
fontWeight: '700',
},
});

1
app/_layout.tsx
View File

@@ -1,4 +1,5 @@
import { Stack } from "expo-router";
import '../global.css';
export default function RootLayout() {
return <Stack screenOptions={{ headerShown: false }} />;

10
babel.config.js Normal file
View File

@@ -0,0 +1,10 @@
module.exports = function (api) {
api.cache(true);
return {
presets: [
['babel-preset-expo', { jsxImportSource: 'nativewind' }],
'nativewind/babel',
],
};
};

3
global.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

8
metro.config.js Normal file
View File

@@ -0,0 +1,8 @@
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, {
input: './global.css',
});

3
nativewind-env.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
/// <reference types="nativewind/types" />
// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

844
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -29,6 +29,7 @@
"expo-symbols": "~1.0.8",
"expo-system-ui": "~6.0.9",
"expo-web-browser": "~15.0.10",
"nativewind": "^4.2.3",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-native": "0.81.5",
@@ -38,7 +39,8 @@
"react-native-screens": "~4.16.0",
"react-native-url-polyfill": "^3.0.0",
"react-native-web": "~0.21.0",
"react-native-worklets": "0.5.1"
"react-native-worklets": "0.5.1",
"tailwindcss": "^3.4.19"
},
"devDependencies": {
"@types/react": "~19.1.0",

13
tailwind.config.js Normal file
View File

@@ -0,0 +1,13 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
'./constants/**/*.{js,jsx,ts,tsx}',
],
presets: [require('nativewind/preset')],
theme: {
extend: {},
},
plugins: [],
};

3
tsconfig.json
View File

@@ -12,6 +12,7 @@
"**/*.ts",
"**/*.tsx",
".expo/types/**/*.ts",
"expo-env.d.ts"
"expo-env.d.ts",
"nativewind-env.d.ts"
]
}