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

Slowly making it look not completely bad, but still need to do a lot of work.

Browse Source
This commit is contained in:
Gabriel Brown 2024-09-10 15:33:34 -05:00
parent 1e6b2f8df7
commit f001a0f82d
5 changed files with 112 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/(tabs)/countdown.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import axios from 'axios';
import ChangeDateDrawer from '@/components/ChangeDateDrawer';
@ -15,9 +16,8 @@ const fetchCountdownDate = async () => {
const response = await axios.get(`${BASE_URL}/getCountdown`, {
params: { apiKey: API_KEY }
});
console.log('API response:', response.data);
if (response.data && response.data[0] && response.data[0].countdown) {
console.log('Countdown date:', response.data[0].countdown);
//console.log('Countdown date:', response.data[0].countdown);
return new Date(response.data[0].countdown);
} else {
console.error('Unexpected API response format:', response.data);
@ -87,15 +87,25 @@ export default function TabTwoScreen() {
</ThemedView>
);
}
let days = countdown.days <= 1 ? 'Day' : 'Days';
let hours = countdown.hours <= 1 ? 'Hour' : 'Hours';
let minutes = countdown.minutes <= 1 ? 'Minute' : 'Minutes';
let seconds = countdown.seconds <= 1 ? 'Second' : 'Seconds';
return (
<LinearGradient
colors={['#F67C0A', '#F60AD3']}
style={styles.container}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<ThemedView style={styles.container}>
<ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
<ThemedView style={styles.countdownContainer}>
<CountdownItem value={countdown.days} label="Days" />
<CountdownItem value={countdown.hours} label="Hours" />
<CountdownItem value={countdown.minutes} label="Minutes" />
<CountdownItem value={countdown.seconds} label="Seconds" />
<CountdownItem value={countdown.days} label={days} />
<CountdownItem value={countdown.hours} label={hours} />
<CountdownItem value={countdown.minutes} label={minutes} />
<CountdownItem value={countdown.seconds} label={seconds} />
</ThemedView>
<TouchableOpacity
style={styles.changeButton}
@ -112,6 +122,7 @@ export default function TabTwoScreen() {
/>
)}
</ThemedView>
</LinearGradient>
);
}
@ -128,13 +139,14 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
title: {
fontSize: 56,
lineHeight: 64,
fontWeight: 'bold',
marginBottom: 20,
marginTop: 100,
marginBottom: 60,
textAlign: 'center',
paddingHorizontal: 20,
},
@ -142,29 +154,33 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
marginBottom: 180,
},
countdownItem: {
margin: 10,
lineHeight: 32,
lineHeight: 42,
alignItems: 'center',
backgroundColor: 'transparent',
},
countdownValue: {
fontSize: 32,
lineHeight: 32,
fontSize: 36,
lineHeight: 42,
fontWeight: 'bold',
},
countdownLabel: {
fontSize: 24,
fontSize: 32,
lineHeight: 42,
},
changeButton: {
backgroundColor: '#007AFF',
padding: 10,
borderRadius: 5,
marginTop: 20,
backgroundColor: '#730FF8',
padding: 15,
borderRadius: 10,
marginTop: 40,
},
changeButtonText: {
color: 'white',
fontSize: 16,
fontSize: 22,
fontWeight: 'bold',
},
});

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

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';
@ -44,9 +45,16 @@ export default function HomeScreen() {
};
return (
<LinearGradient
colors={['#F67C0A', '#F60AD3']}
style={styles.container}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<ThemedView style={styles.container}>
<ThemedText style={styles.title}>{message}</ThemedText>
</ThemedView>
</LinearGradient>
);
}
@ -55,10 +63,11 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
title: {
fontSize: 32,
lineHeight: 40,
fontSize: 56,
lineHeight: 72,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center',

33
app/(tabs)/sendmessage.tsx
View File

@ -11,6 +11,7 @@ import {
} from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';
@ -62,11 +63,18 @@ export default function SendMessageScreen() {
};
return (
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{flex: 1}}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<LinearGradient
colors={['#F67C0A', '#F60AD3']}
style={styles.container}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<ThemedView style={styles.container}>
<ThemedText style={styles.title}>Send a Message</ThemedText>
<TextInput
@ -74,13 +82,14 @@ export default function SendMessageScreen() {
value={message}
onChangeText={setMessage}
placeholder="Enter your message"
placeholderTextColor="#999"
placeholderTextColor="#BBB"
multiline
/>
<TouchableOpacity style={styles.button} onPress={sendMessage}>
<ThemedText style={styles.buttonText}>Send Message</ThemedText>
</TouchableOpacity>
</ThemedView>
</LinearGradient>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
@ -90,36 +99,38 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
backgroundColor: 'transparent',
},
title: {
fontSize: 36,
lineHeight: 40,
fontSize: 48,
lineHeight: 60,
fontWeight: 'bold',
marginBottom: 20,
marginTop: 80,
marginBottom: 40,
textAlign: 'center',
},
input: {
width: '100%',
height: 80,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
borderRadius: 10,
padding: 10,
marginBottom: 20,
textAlignVertical: 'top',
color: '#FFF',
fontSize: 18,
fontSize: 32,
backgroundColor: 'black',
},
button: {
backgroundColor: '#007AFF',
backgroundColor: '#730FF8',
padding: 15,
borderRadius: 5,
borderColor: '#730FF8',
borderRadius: 10,
},
buttonText: {
color: 'white',
fontSize: 16,
fontSize: 22,
fontWeight: 'bold',
},
});

10
package-lock.json generated
View File

@ -16,6 +16,7 @@
"expo": "~51.0.28",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-linear-gradient": "~13.0.2",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5",
@ -10011,6 +10012,15 @@
"expo": "*"
}
},
"node_modules/expo-linear-gradient": {
"version": "13.0.2",
"resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-13.0.2.tgz",
"integrity": "sha512-EDcILUjRKu4P1rtWcwciN6CSyGtH7Bq4ll3oTRV7h3h8oSzSilH1g6z7kTAMlacPBKvMnkkWOGzW6KtgMKEiTg==",
"license": "MIT",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-linking": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-6.3.1.tgz",

3
package.json
View File

@ -37,7 +37,8 @@
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10"
"react-native-web": "~0.19.10",
"expo-linear-gradient": "~13.0.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",