-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
SCRUM-143 Created skeleton for Settings
- Loading branch information
1 parent
c297c20
commit 094f7b2
Showing
6 changed files
with
143 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,47 +1,68 @@ | ||
import {Button, StyleSheet, Text, View} from 'react-native'; | ||
|
||
import React from 'react'; | ||
import {LogoutButton} from '@/components/LogoutButton'; | ||
import {Button, StyleSheet, Text, View, Switch} from 'react-native'; | ||
import React, {useContext, useState} from 'react'; | ||
import {router} from 'expo-router'; | ||
import CustomSwitch from '@/components/CustomSwitch'; | ||
import {CustomButton} from '@/components/CustomButton'; | ||
import {AuthContext} from '@/context/AuthContext'; | ||
|
||
export default function Settings() { | ||
const {logOut, currentUser} = useContext(AuthContext); | ||
|
||
const [isSoundEffectsEnabled, setIsSoundEffectsEnabled] = useState(false); | ||
const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(false); | ||
|
||
const toggleSoundEffects = (value: boolean) => { | ||
setIsSoundEffectsEnabled(value); | ||
}; | ||
|
||
const toggleNotifications = (value: boolean) => { | ||
setIsNotificationsEnabled(value); | ||
}; | ||
|
||
const testLesson = () => { | ||
router.push('SectionIntroduction'); | ||
}; | ||
|
||
const testQuiz = () => { | ||
router.push('VideoQuiz'); | ||
}; | ||
|
||
const testAsssessment = () => { | ||
router.push('Assessment'); | ||
}; | ||
|
||
const assessmentIntro = () => { | ||
router.push('AssessmentIntroduction'); | ||
}; | ||
|
||
const SettingPage: React.FC = () => ( | ||
<View style={styles.container}> | ||
<Text>Settings Screen</Text> | ||
<View style={{marginBottom: 10}}></View> | ||
<Button title="Test Lesson" onPress={testLesson}></Button> | ||
<View style={{marginBottom: 10}}></View> | ||
<Button title="Test Quiz" onPress={testQuiz}></Button> | ||
<View style={{marginBottom: 10}}></View> | ||
<Button title="Test Assessment" onPress={testAsssessment}></Button> | ||
<View style={{marginBottom: 10}}></View> | ||
<Button title="Test Assessment Intro" onPress={assessmentIntro}></Button> | ||
<View style={{marginBottom: 10}}></View> | ||
<LogoutButton></LogoutButton> | ||
</View> | ||
); | ||
return ( | ||
<View style={styles.container}> | ||
<Text style={styles.textHeading}>GENERAL</Text> | ||
<View | ||
style={{flexDirection: 'row', justifyContent: 'space-between'}} | ||
> | ||
<Text style={{alignSelf: 'center'}}>Sound Effects</Text> | ||
<CustomSwitch | ||
isEnabled={isSoundEffectsEnabled} | ||
onToggle={toggleSoundEffects} | ||
/> | ||
</View> | ||
<Text style={styles.textHeading}>NOTIFICATIONS</Text> | ||
<View | ||
style={{flexDirection: 'row', justifyContent: 'space-between'}} | ||
> | ||
<Text style={{alignSelf: 'center'}}>All Notifications</Text> | ||
<CustomSwitch | ||
isEnabled={isNotificationsEnabled} | ||
onToggle={toggleNotifications} | ||
/> | ||
</View> | ||
<CustomButton label="Save" backgroundColor="white" /> | ||
|
||
<CustomButton label="Help Center" backgroundColor="white" /> | ||
|
||
<CustomButton label="Feedback" backgroundColor="white" /> | ||
|
||
<CustomButton | ||
label="Log out" | ||
backgroundColor="white" | ||
onPressHandler={logOut} | ||
/> | ||
</View> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
flex: 1, | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
padding: 20, | ||
}, | ||
textHeading: { | ||
color: '#7654F2', | ||
fontWeight: 'bold', | ||
}, | ||
}); | ||
|
||
export default SettingPage; |
Binary file added
BIN
+46.9 KB
...tend/iQMA-Skills-Builder/assets/images/cbcddad7-609d-4691-a812-4ac8b50f01fa.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import React, { useState, useEffect, useRef } from 'react'; | ||
import { View, TouchableOpacity, Animated, StyleSheet } from 'react-native'; | ||
|
||
interface CustomSwitchProps { | ||
isEnabled: boolean; | ||
onToggle: (value: boolean) => void; | ||
} | ||
|
||
const CustomSwitch: React.FC<CustomSwitchProps> = ({ isEnabled, onToggle }) => { | ||
|
||
const animationValue = useRef(new Animated.Value(isEnabled ? 1 : 0)).current; | ||
|
||
// Update the animation when isEnabled changes | ||
useEffect(() => { | ||
Animated.timing(animationValue, { | ||
toValue: isEnabled ? 1 : 0, | ||
duration: 300, | ||
useNativeDriver: false, | ||
}).start(); | ||
}, [isEnabled]); | ||
|
||
const interpolateBackgroundColor = animationValue.interpolate({ | ||
inputRange: [0, 1], | ||
outputRange: ['#ddd', '#7654F2'], // Off state to On state colors | ||
}); | ||
|
||
const knobPosition = animationValue.interpolate({ | ||
inputRange: [0, 1], | ||
outputRange: [0, 21], // Left position for 'Off' and 'On' | ||
}); | ||
|
||
return ( | ||
<TouchableOpacity | ||
onPress={() => onToggle(!isEnabled)} | ||
style={styles.container} | ||
activeOpacity={0.8} // Prevent quick double-taps causing issues | ||
> | ||
<Animated.View | ||
style={[ | ||
styles.switchBackground, | ||
{ backgroundColor: interpolateBackgroundColor }, | ||
]} | ||
> | ||
<Animated.View | ||
style={[ | ||
styles.switchKnob, | ||
{ transform: [{ translateX: knobPosition }] }, | ||
]} | ||
/> | ||
</Animated.View> | ||
</TouchableOpacity> | ||
); | ||
}; | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
padding: 10, | ||
}, | ||
switchBackground: { | ||
width: 50, | ||
height: 30, | ||
borderRadius: 15, | ||
justifyContent: 'center', | ||
padding: 2, | ||
}, | ||
switchKnob: { | ||
width: 26, | ||
height: 26, | ||
borderRadius: 13, | ||
backgroundColor: '#fff', | ||
}, | ||
}); | ||
|
||
export default CustomSwitch; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters