Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 2x 2x 2x 1x 1x 2x 1x 1x | import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useRouter } from "expo-router";
import * as Linking from "expo-linking";
import { useTheme } from "../../hooks/useTheme";
import { SettingsScreenScaffold } from "../../components/settings/SettingsScreenScaffold";
import {
SettingsOutlinedButton,
SettingsPrimaryButton,
SettingsStepCard,
} from "../../components/settings";
export default function LocationPermissionTutorial() {
const router = useRouter();
const { colors } = useTheme();
const openSettings = async () => {
try {
await Linking.openSettings();
} catch {
// best-effort; if it fails, the copy below still explains what to do
}
};
return (
<SettingsScreenScaffold
title="Enable Location Services"
backLabel="Location & Privacy"
titleStyle={styles.titleOverride}
>
<SettingsStepCard
stepLabel="Step 1"
title="Open your device Settings"
icon="settings-outline"
>
<Text style={[styles.stepBody, { color: colors.textMuted }]}>
Tap the Settings app on your home screen.
</Text>
</SettingsStepCard>
<SettingsStepCard
stepLabel="Step 2"
title="Go to Privacy & Location"
icon="shield-outline"
>
<Text style={[styles.stepBody, { color: colors.textMuted }]}>
Find and select{" "}
<Text style={[styles.bold, { color: colors.text }]}>Privacy</Text>,
then{" "}
<Text style={[styles.bold, { color: colors.text }]}>
Location Services
</Text>
.
</Text>
</SettingsStepCard>
<SettingsStepCard
stepLabel="Step 3"
title="Select the campus navigation app"
icon="apps-outline"
>
<Text style={[styles.stepBody, { color: colors.textMuted }]}>
Scroll through the list and select{" "}
<Text style={[styles.bold, { color: colors.text }]}>ConUNav</Text>{" "}
(campus navigation app).
</Text>
</SettingsStepCard>
<SettingsStepCard
stepLabel="Step 4"
title='Choose "Allow While Using the App"'
icon="checkmark-circle-outline"
>
<Text style={[styles.stepBody, { color: colors.textMuted }]}>
Under{" "}
<Text style={[styles.bold, { color: colors.text }]}>
Location access
</Text>
, select{" "}
<Text style={[styles.bold, { color: colors.text }]}>
Allow while using the app
</Text>{" "}
so ConUNav can determine your position only when you're actively
using it.
</Text>
</SettingsStepCard>
<View style={styles.buttonRow}>
<SettingsPrimaryButton
label="Open Device Settings"
onPress={() => {
void openSettings();
}}
/>
<SettingsOutlinedButton
label="Skip for Now"
onPress={() => router.back()}
/>
</View>
</SettingsScreenScaffold>
);
}
const styles = StyleSheet.create({
titleOverride: {
fontSize: 24,
fontWeight: "700",
marginBottom: 16,
},
stepBody: {
fontSize: 13,
lineHeight: 20,
},
bold: {
fontWeight: "700",
},
buttonRow: {
marginTop: 20,
gap: 10,
},
});
|