Skip to content

Commit

Permalink
Updated settings screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShivaniVora
ShivaniVora committed Oct 13, 2024
1 parent 1b81539 commit a775d44
Show file tree
Hide file tree
Showing 4 changed files with 222 additions and 93 deletions.
11 changes: 6 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"dependencies": {
"@babel/preset-env": "^7.22.14",
"@expo/cli": "^0.10.11",
"@fontsource/poppins": "^5.1.0",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "8.0.1",
"@react-native-community/slider": "4.5.2",
Expand All @@ -34,18 +35,18 @@
"axios": "^1.5.0",
"bcrypt": "^5.1.1",
"dotenv": "^16.3.1",
"expo": "^51.0.32",
"expo": "^51.0.37",
"expo-auth-session": "~5.5.2",
"expo-av": "~14.0.7",
"expo-build-properties": "~0.12.5",
"expo-constants": "~16.0.2",
"expo-crypto": "~13.0.2",
"expo-dev-client": "~4.0.25",
"expo-notifications": "~0.28.16",
"expo-dev-client": "~4.0.28",
"expo-notifications": "~0.28.18",
"expo-random": "~14.0.1",
"expo-splash-screen": "~0.27.5",
"expo-splash-screen": "~0.27.6",
"expo-status-bar": "~1.12.1",
"expo-updates": "~0.25.24",
"expo-updates": "~0.25.27",
"expo-web-browser": "~13.0.3",
"firebase": "^10.4.0",
"jwt-decode": "^3.1.2",
Expand Down
183 changes: 108 additions & 75 deletions src/screens/Settings/SettingsScreen.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { View, Switch, TouchableOpacity, Linking } from "react-native";
// import { Notifications } from "expo";
import * as Notifications from "expo-notifications";
Expand All @@ -10,6 +10,9 @@ import { useFocusEffect } from "@react-navigation/native";
import Text from "../../components/Text";
import defaultSettings from "../../components/DefaultSettings";
import SettingsStyle from "../../styles/settings";
import { Slider } from "react-native-elements";
import '@fontsource/poppins';
import TimePicker from "./TimePicker";

const termsURL = "https://gtbitsofgood.github.io/brain-exercise/terms/";
const privacyURL = "https://gtbitsofgood.github.io/brain-exercise/privacy/";
Expand Down Expand Up @@ -43,12 +46,16 @@ const {
text,
section,
subtext,
animationRow,
timeButton,
icon,
rowInfo,
firstSection,
touchableRow,
buttonText,
thumbStyle,
trackStyle,
slider,
minSize,
maxSize,
} = SettingsStyle;

// Settings Navigation
Expand All @@ -58,6 +65,47 @@ function SettingsScreen({ navigation }) {
const [animationToggleOn, setAnimationToggleOn] = useState(
settings.animationOn,
);
const [fontSize, setFontSize] = useState(settings.fontSize);
const [timePickerOpen, setTimePickerOpen] = useState(false);
const [soundEffectsToggleOn, setSoundEffectsToggleOn] = useState(
settings.soundEffectsOn || defaultSettings.soundEffectsOn,
);
const [voiceOverToggleOn, setVoiceOverToggleOn] = useState(
settings.voiceOverOn || defaultSettings.voiceOverOn,
);

const setSoundEffectsToggleOnWrapper = async () => {
setSoundEffectsToggleOn(!soundEffectsToggleOn);
settings.soundEffectsOn = !soundEffectsToggleOn;
const jsonSettings = JSON.stringify(settings);
//console.log(settings.soundEffectsOn)
await AsyncStorage.setItem("SETTINGS", jsonSettings);
}

const setVoiceOverToggleOnWrapper = async () => {
setVoiceOverToggleOn(!voiceOverToggleOn);
settings.voiceOveron = !voiceOverToggleOn;
const jsonSettings = JSON.stringify(settings);
//console.log(settings.soundEffectsOn)
await AsyncStorage.setItem("SETTINGS", jsonSettings);
}

const setAnimationOnWrapper = async () => {
setAnimationToggleOn(!animationToggleOn);
settings.animationOn = !animationToggleOn;
const jsonSettings = JSON.stringify(settings);
//console.log(settings.soundEffectsOn)
await AsyncStorage.setItem("SETTINGS", jsonSettings);
}

useEffect(() => {
updateFontSize();
}, [fontSize]);

const updateFontSize = async () => {
settings.fontSize = fontSize;
await storeSettings(settings);
}

useFocusEffect(
React.useCallback(() => {
Expand Down Expand Up @@ -108,108 +156,93 @@ function SettingsScreen({ navigation }) {

return (
<View style={root}>
<View style={[section, firstSection]}>
<View style={section}>
<View style={notifications}>
<Icon size={30} style={icon} name="notifications-none" />
<Text style={text}>Notifications</Text>
</View>
</View>
<View style={section}>
<View style={notificationChildren}>
<Text style={subtext}>Daily Reminders</Text>
<Text style={subtext}>Daily Reminders (Mon-Fri)</Text>
<Switch
trackColor={{ false: "#ffffff", true: "#2a652c" }}
trackColor={{ false: "#ffffff", true: "#05cd99" }}
onValueChange={toggleSwitch}
value={toggleOn}
accessibilityRole="switch"
/>
</View>
{toggleOn && (
<View style={notificationChildren}>
<Text style={subtext}>Reminder Time</Text>
<Text style={subtext}>Daily Reminder Time</Text>
<Button
title={getDate()}
titleStyle={buttonText}
type="outline"
buttonStyle={timeButton}
onPress={() => navigation.navigate("TimePicker", settings)}
onPress={() => setTimePickerOpen(true)}
/>
<TimePicker open = {timePickerOpen} setOpen = {setTimePickerOpen} route={{ params: settings }} />
</View>
)}
</View>
<View style={section}>
<TouchableOpacity
style={touchableRow}
onPress={() => navigation.navigate("StreakLength", settings)}
>
<View style={rowInfo}>
<Icon size={30} style={icon} name="calendar-today" />
<Text style={text}>Streak Length</Text>
</View>
<Icon size={42} style={icon} name="chevron-right" />
</TouchableOpacity>
</View>
<View style={section}>
<TouchableOpacity
style={touchableRow}
onPress={() => navigation.navigate("FontSize", settings)}
>
<View style={rowInfo}>
<Icon size={30} style={icon} name="format-size" />
<Text style={text}>Font Size</Text>
</View>
<Icon size={42} style={icon} name="chevron-right" />
</TouchableOpacity>
<View style={rowInfo}>
<Text style={text}>Font Size</Text>
</View>
<View style={rowInfo}>
<Text style={minSize}>Aa</Text>
<Slider
style={slider}
thumbStyle={thumbStyle}
trackStyle={trackStyle}
allowTouchTrack={true}
minimumValue={16}
maximumValue={32}
step={1}
onValueChange={(v) => setFontSize(v)}
value={fontSize}
/>
<Text style={maxSize}>Aa</Text>
</View>
</View>

<View style={section}>
<TouchableOpacity
style={touchableRow}
onPress={() => navigation.navigate("SoundScreen", settings)}
>
<View style={rowInfo}>
<Icon size={30} style={icon} name="volume-up" />
<Text style={text}>Sound</Text>
</View>
<Icon size={42} style={icon} name="chevron-right" />
</TouchableOpacity>
<View style={notifications}>
<Text style={text}>Sound</Text>
</View>
<View style={notificationChildren}>
<Text style={subtext}>Sound Effects</Text>
<Switch
trackColor={{ false: "#ffffff", true: "#05cd99" }}
onValueChange={setSoundEffectsToggleOnWrapper}
value={soundEffectsToggleOn}
accessibilityRole="switch"
/>
</View>
<View style={notificationChildren}>
<Text style={subtext}>Voice Over</Text>
<Switch
trackColor={{ false: "#ffffff", true: "#05cd99" }}
onValueChange={setVoiceOverToggleOn}
value={voiceOverToggleOn}
accessibilityRole="switch"
/>

</View>
</View>
<View style={section}>
<View style={animationRow}>
<View style={rowInfo}>
<Icon size={30} style={icon} name="play-arrow" />
<Text style={text}>Animation</Text>
</View>
<View style={notifications}>
<Text style={text}>Animation</Text>
</View>
<View style={notificationChildren}>
<Text style={subtext}>Enable In-App Animation</Text>
<Switch
trackColor={{ false: "#ffffff", true: "#2a652c" }}
onValueChange={() => toggleAnimations()}
trackColor={{ false: "#ffffff", true: "#05cd99" }}
onValueChange={toggleAnimations}
value={animationToggleOn}
accessibilityRole="switch"
/>

</View>
</View>
<View style={section}>
<TouchableOpacity
style={touchableRow}
onPress={() => Linking.openURL(termsURL)}
>
<View style={rowInfo}>
<Icon size={30} style={icon} name="content-copy" />
<Text style={text}>Terms and Conditions</Text>
</View>
<Icon size={42} style={icon} name="chevron-right" />
</TouchableOpacity>
</View>
<View style={section}>
<TouchableOpacity
style={touchableRow}
onPress={() => Linking.openURL(privacyURL)}
>
<View style={rowInfo}>
<Icon size={30} style={icon} name="lock" />
<Text style={text}>Privacy Policy</Text>
</View>
<Icon size={42} style={icon} name="chevron-right" />
</TouchableOpacity>
</View>
</View>
);
}
Expand All @@ -218,4 +251,4 @@ SettingsScreen.propTypes = {
navigation: PropTypes.object,
};

export default SettingsScreen;
export default SettingsScreen;
Loading

0 comments on commit a775d44

Please sign in to comment.