Doble/Tones
1
0
Fork 0
Code Issues 5 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Big Updates -> 53.0.0 & Auth w/ FireBase

Browse source
This commit is contained in:
Matt DiMeglio 2025-08-10 03:11:09 -04:00
parent 56a965e76c
commit 1368369495
19 changed files with 3037 additions and 6874 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app.json
View file

@ -26,7 +26,8 @@
},
"plugins": [
"expo-router",
"expo-font"
"expo-font",
"expo-web-browser"
],
"experiments": {
"typedRoutes": true

31
app/_layout.jsx
View file

@ -1,21 +1,30 @@
import React, { useState, useEffect } from 'react';
import { router, Stack } from 'expo-router';
import { GlobalVariablesProvider, WebSocketProvider } from '../contexts';
import { AuthProvider, GlobalVariablesProvider, WebSocketProvider } from '@/contexts';
import { useNotifications, useWebSocketContext } from '@/hooks';
export const unstable_settings = {
initialRouteName: 'login',
};
import { useAuth } from '@/contexts/AuthContext';
function AppTest() {
const [ oldMessage, setOldMessage ] = useState(1);
const { user } = useAuth();
const { lastMessage } = useWebSocketContext();
const { schedulePushNotification } = useNotifications();
const [isReady, setIsReady] = useState(false);
useEffect(() => {
router.replace('/login');
setIsReady(true);
}, []);
useEffect(() => {
if (isReady) {
if (user) {
router.replace('./incidents');
} else {
router.replace('/login');
}
}
}, [isReady, user]);
const parseAddress = (data) => {
const { Address } = data;
const { StreetAddress, AddressApartment, Town, State } = Address;
@ -40,11 +49,11 @@ function AppTest() {
return (
<Stack
screenOptions={{
gestureEnabled: false,
headerBackVisible: false,
headerShown: false
}}
>
<Stack.Screen name="login" />
</Stack>
/>
)
}
@ -52,7 +61,9 @@ export default function App() {
return (
<GlobalVariablesProvider>
<WebSocketProvider>
<AppTest />
<AuthProvider>
<AppTest />
</AuthProvider>
</WebSocketProvider>
</GlobalVariablesProvider>
);

2
app/explore.tsx
View file

@ -42,7 +42,7 @@ export default function TabTwoScreen() {
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
different screen densities
</ThemedText>
<Image source={require('@/assets/images/tones-logo.png')} style={{ alignSelf: 'center' }} />
<Image source={require('../assets/images/tones-logo.png')} style={{ alignSelf: 'center' }} />
<ExternalLink href="https://reactnative.dev/docs/images">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>

2
app/incidents.jsx
View file

@ -8,7 +8,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
import {
PageHeader,
PageFooter,
} from '../components/generalHelpers.jsx';
} from '@/components/generalHelpers.jsx';
import { Ionicons } from '@expo/vector-icons';
import { AccidentAndEmergency } from "healthicons-react-native/dist/outline";
import ActionSheet from 'react-native-actions-sheet';

117
app/login.jsx
View file

@ -20,74 +20,73 @@ import {
ExtraText,
TextLinkContent,
LoginTextInput
} from '../components/generalHelpers.jsx';
} from '@/components/generalHelpers.jsx';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '@/contexts/firebase';
import { useNotifications } from '@/hooks';
export default function Login() {
const [hidePassword, setHidePassword] = useState(true);
const [loginButtonDisabled, setLoginButtonDisabled] = useState(true);
const [auth, setAuth] = useState(false);
const { expoPushToken } = useNotifications();
const [hidePassword, setHidePassword] = useState(true);
const [loginButtonDisabled, setLoginButtonDisabled] = useState(true);
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { expoPushToken } = useNotifications();
const formik = useFormik({
initialValues: {
number: '',
password: ''
},
onSubmit: (values) => {
values.number = values.number.replace(/[()\-\s]/g, '');
console.log(values);
setAuth(true);
},
});
const formValues = formik.values;
useEffect(() => {
if (formValues) {
if (formValues.number.length === 14 && formValues.password) {
setLoginButtonDisabled(false);
} else {
setLoginButtonDisabled(true);
}
}
}, [formValues])
useEffect(() => {
// Temp for Testing
// if (!auth) {
// setTimeout(() => {
// router.replace('./incidents');
// }, 1000);
// }
if (auth) {
const formik = useFormik({
initialValues: {
email: '',
password: ''
},
onSubmit: async (values) => {
setError('');
setLoading(true);
try {
await signInWithEmailAndPassword(auth, values.email, values.password);
router.replace('./incidents');
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}, [auth])
},
});
return (
<React.Fragment>
<PageHeader>
<View style={{ flexDirection: 'row', height: 80, alignItems: 'center' }} />
</PageHeader>
<StyledContainer>
<StatusBar style="dark" />
<SafeAreaView />
<InnerContainer>
<PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
<Title>Tones</Title>
<SubTitle>Account Login</SubTitle>
<StyledFormArea>
const formValues = formik.values;
useEffect(() => {
if (formValues) {
if (formValues.email && formValues.password) {
setLoginButtonDisabled(false);
} else {
setLoginButtonDisabled(true);
}
}
}, [formValues]);
return (
<React.Fragment>
<PageHeader>
<View style={{ flexDirection: 'row', height: 80, alignItems: 'center' }} />
</PageHeader>
<StyledContainer>
<StatusBar style="dark" />
<SafeAreaView />
<InnerContainer>
<PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
<Title>Tones</Title>
<SubTitle>Account Login</SubTitle>
<StyledFormArea>
{error ? <MessageBox style={{ color: 'red' }}>{error}</MessageBox> : null}
<LoginTextInput
label="Phone Number"
icon="call-outline"
placeholder="123-456-7890"
label="Email Address"
icon="mail-outline"
placeholder="test@organization.com"
placeholderTextColor="gray"
onChangeText={formik.handleChange('number')}
onBlur={formik.handleBlur('number')}
value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
keyboardType="number-pad"
maxLength={14}
onChangeText={formik.handleChange('email')}
onBlur={formik.handleBlur('email')}
value={formik.values.email}
keyboardType="email-address"
/>
<LoginTextInput
label="Password"

48
app/register.jsx
View file

@ -1,5 +1,8 @@
import React, { useState, useEffect } from 'react';
import { router } from 'expo-router';
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
import { auth } from '@/contexts/firebase';
import { useAuth } from '@/contexts/AuthContext';
import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useFormik } from 'formik';
@ -22,11 +25,12 @@ import {
} from '../components/generalHelpers.jsx';
export default function Register() {
const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
const [hidePassword, setHidePassword] = useState(true);
const [registerButtonDisabled, setRegisterButtonDisabled] = useState(true);
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { user } = useAuth();
const formik = useFormik({
initialValues: {
@ -38,9 +42,20 @@ export default function Register() {
password: '',
passwordConfirmation: ''
},
onSubmit: (values) => {
values.number = values.number.replace(/[()\-\s]/g, '');
console.log(values);
onSubmit: async (values) => {
setError('');
setLoading(true);
try {
const userCredential = await createUserWithEmailAndPassword(auth, values.email, values.password);
await updateProfile(userCredential.user, {
displayName: `${values.firstName} ${values.lastName}`
});
router.replace('./incidents');
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
});
@ -48,19 +63,27 @@ export default function Register() {
useEffect(() => {
if (formValues) {
if ((formValues.number.length === 14 || (formValues.number.length === 10 && !formValues.number.includes('('))) && formValues.email && formValues.firstName && formValues.lastName) {
if (formValues.password.length !== 0 && (formValues.password === formValues.passwordConfirmation)) {
setRegisterButtonDisabled(false);
} else {
setRegisterButtonDisabled(true);
}
if (
formValues.email &&
formValues.firstName &&
formValues.lastName &&
formValues.password.length !== 0 &&
formValues.password === formValues.passwordConfirmation
) {
setRegisterButtonDisabled(false);
} else {
setRegisterButtonDisabled(true);
}
} else {
setRegisterButtonDisabled(true);
}
}, [formValues])
}, [formValues]);
useEffect(() => {
if (user) {
router.replace('./incidents');
}
}, [user]);
return (
<View>
@ -78,6 +101,7 @@ export default function Register() {
<SafeAreaView />
<InnerContainer>
<PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
{error ? <MessageBox style={{ color: 'red' }}>{error}</MessageBox> : null}
<Title>Tones</Title>
<SubTitle>Account Register</SubTitle>
<StyledFormArea>

91
app/trash/index.tsx
View file

@ -1,91 +0,0 @@
import { Image, StyleSheet, Platform } from 'react-native';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
export default function HomeScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/tones-logo.png')}
style={styles.reactLogo}
/>
}
>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
Press{' '}
<ThemedText type="defaultSemiBold">
{Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
</ThemedText>{' '}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
<ThemedText>
Tap the Explore tab to learn more about what's included in this starter app.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
When you're ready, run{' '}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
When you're ready, run{' '}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
When you're ready, run{' '}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});

4
components/Collapsible.tsx
View file

@ -2,8 +2,8 @@ import Ionicons from '@expo/vector-icons/Ionicons';
import { PropsWithChildren, useState } from 'react';
import { StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '../components/ThemedText';
import { ThemedView } from '../components/ThemedView';
import { Colors } from '@/constants/Colors';
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {

2
components/HelloWave.tsx
View file

@ -7,7 +7,7 @@ import Animated, {
withSequence,
} from 'react-native-reanimated';
import { ThemedText } from '@/components/ThemedText';
import { ThemedText } from '../components/ThemedText';
export function HelloWave() {
const rotationAnimation = useSharedValue(0);

2
components/ParallaxScrollView.tsx
View file

@ -7,7 +7,7 @@ import Animated, {
useScrollViewOffset,
} from 'react-native-reanimated';
import { ThemedView } from '@/components/ThemedView';
import { ThemedView } from '../components/ThemedView';
const HEADER_HEIGHT = 250;

2
components/ThemedText.tsx
View file

@ -1,6 +1,6 @@
import { Text, type TextProps, StyleSheet } from 'react-native';
import { useThemeColor } from '@/hooks/useThemeColor';
import { useThemeColor } from '../hooks/useThemeColor';
export type ThemedTextProps = TextProps & {
lightColor?: string;

2
components/ThemedView.tsx
View file

@ -1,6 +1,6 @@
import { View, type ViewProps } from 'react-native';
import { useThemeColor } from '@/hooks/useThemeColor';
import { useThemeColor } from '../hooks/useThemeColor';
export type ThemedViewProps = ViewProps & {
lightColor?: string;

30
contexts/AuthContext.js Normal file
View file

@ -0,0 +1,30 @@
import React, { createContext, useContext, useEffect, useState } from 'react';
import { onAuthStateChanged, signOut } from 'firebase/auth';
import { auth } from './firebase';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
setUser(firebaseUser);
setLoading(false);
});
return unsubscribe;
}, []);
const logout = () => signOut(auth);
return (
<AuthContext.Provider value={{ user, loading, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => {
return useContext(AuthContext);
};

19
contexts/firebase.js Normal file
View file

@ -0,0 +1,19 @@
import { initializeApp } from 'firebase/app';
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const firebaseConfig = {
apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,
};
const app = initializeApp(firebaseConfig);
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
export { auth };

1
contexts/index.js
View file

@ -1,2 +1,3 @@
export { AuthProvider } from './AuthContext';
export { GlobalVariablesProvider, GlobalVariablesContext } from './GlobalVariablesContext';
export { WebSocketProvider, WebSocketContext } from './WebSocketContext';

14
hooks/useNotifications/useNotifications.jsx
View file

@ -39,7 +39,7 @@ const registerForPushNotificationsAsync = async () => {
});
}
if (Device.isDevice) {
// if (Device.isDevice) {
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
@ -67,9 +67,9 @@ const registerForPushNotificationsAsync = async () => {
} catch (e) {
token = `${e}`;
}
} else {
alert('Must use physical device for Push Notifications');
}
// } else {
// alert('Must use physical device for Push Notifications');
// }
return token;
}
@ -96,10 +96,8 @@ export const useNotifications = () => {
});
return () => {
notificationListener.current &&
Notifications.removeNotificationSubscription(notificationListener.current);
responseListener.current &&
Notifications.removeNotificationSubscription(responseListener.current);
notificationListener.current?.remove();
responseListener.current?.remove();
};
}, []);

9433
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

59
package.json
View file

@ -1,9 +1,10 @@
{
"name": "tones",
"main": "expo-router/entry",
"version": "1.0.3",
"version": "1.0.4",
"scripts": {
"start": "expo start",
"push-server": "node scripts/expo-push-server.js",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo run:android",
"ios": "expo run:ios",
@ -15,44 +16,42 @@
"preset": "jest-expo"
},
"dependencies": {
"@babel/runtime": "^7.28.2",
"@emotion/unitless": "^0.10.0",
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2",
"expo": "^52.0.46",
"expo-constants": "~17.0.8",
"@react-native-async-storage/async-storage": "^1.24.0",
"@react-navigation/native": "^7.1.17",
"expo": "^53.0.20",
"expo-constants": "~17.1.7",
"expo-device": "^7.0.3",
"expo-font": "~13.0.4",
"expo-linking": "~7.0.5",
"expo-notifications": "^0.29.14",
"expo-router": "~4.0.20",
"expo-splash-screen": "~0.29.24",
"expo-status-bar": "~2.0.1",
"expo-system-ui": "~4.0.9",
"expo-web-browser": "~14.0.2",
"expo-font": "~13.3.2",
"expo-linking": "~7.1.7",
"expo-notifications": "~0.31.4",
"expo-router": "~5.1.4",
"expo-splash-screen": "~0.30.10",
"expo-status-bar": "~2.2.3",
"expo-system-ui": "~5.0.10",
"expo-web-browser": "~14.2.0",
"express": "^5.1.0",
"firebase": "^12.1.0",
"formik": "^2.4.6",
"healthicons-react-native": "^3.0.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.9",
"healthicons-react-native": "^3.5.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.5",
"react-native-actions-sheet": "^0.9.7",
"react-native-dropdown-picker": "^5.4.6",
"react-native-gesture-handler": "~2.20.2",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-svg": "15.8.0",
"react-native-gesture-handler": "~2.24.0",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-svg": "15.11.2",
"react-native-textinput-effects": "^0.6.3",
"react-native-web": "~0.19.13",
"react-native-web": "^0.20.0",
"styled-components": "^6.1.12"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.0.7",
"jest": "^29.2.1",
"jest-expo": "~52.0.6",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
"typescript": "~5.8.3"
},
"private": true
}

39
scripts/expo-push-server.js Normal file
View file

@ -0,0 +1,39 @@
const express = require('express');
const fetch = require('node-fetch');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/send-notification', async (req, res) => {
const { expoPushToken, title, body, data } = req.body;
if (!expoPushToken) {
return res.status(400).json({ error: 'expoPushToken is required' });
}
try {
const response = await fetch('https://exp.host/--/api/v2/push/send', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Content-Type': 'application/json',
},
body: JSON.stringify({
to: expoPushToken,
sound: 'default',
title,
body,
data,
}),
});
const result = await response.json();
res.json(result);
} catch (err) {
res.status(500).json({ error: err.message });
}
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`Notification server running on port ${PORT}`);
});