diff --git a/mani/App.tsx b/mani/app/_layout.tsx similarity index 78% rename from mani/App.tsx rename to mani/app/_layout.tsx index 527b1ab23b..bd4c1335f2 100644 --- a/mani/App.tsx +++ b/mani/app/_layout.tsx @@ -2,44 +2,42 @@ import 'expo-dev-client' import * as Notifications from 'expo-notifications' import { User as FirebaseUser } from 'firebase/auth' import React, { useEffect, useRef, useState } from 'react' -import { Dimensions, Platform, SafeAreaView } from 'react-native' -import { app, auth, ENV } from './init' -// @ts-ignore +import { Dimensions, Linking, Platform, SafeAreaView } from 'react-native' +import { app, auth, ENV } from '../init' import { setFirebaseUserViaJson } from 'common/firebase-auth' import { Notification } from 'common/notification' import { IosIapListener } from 'components/ios-iap-listener' -import * as Linking from 'expo-linking' import { Subscription } from 'expo-modules-core' import { StatusBar } from 'expo-status-bar' import { withIAPContext } from 'react-native-iap' - import { ReadexPro_400Regular, useFonts } from '@expo-google-fonts/readex-pro' import * as Sentry from '@sentry/react-native' import { log } from 'components/logger' import { SplashAuth } from 'components/splash-auth' -import Constants from 'expo-constants' import { getData } from 'lib/auth' import { useIsConnected } from 'lib/use-is-connected' +import { TokenModeProvider } from 'hooks/useTokenMode' +import { Stack } from 'expo-router' +import Constants from 'expo-constants' +import { StyleSheet } from 'react-native' +import { Colors } from 'constants/colors' + +const HEADER_HEIGHT = 250 +// Initialize Sentry +// Initialize Sentry Sentry.init({ dsn: 'https://2353d2023dad4bc192d293c8ce13b9a1@o4504040581496832.ingest.us.sentry.io/4504040585494528', debug: ENV === 'DEV', }) -// NOTE: you must change NEXT_PUBLIC_API_URL in dev.sh to match your local IP address. ie: -// "cross-env NEXT_PUBLIC_API_URL=192.168.1.229:8088 \ -// Then, set the native url in the app on the user settings page: http://192.168.1.229:3000/ -const isIOS = Platform.OS === 'ios' -const App = () => { - // Init +function RootLayout() { + // Your existing App.tsx logic here const notificationResponseListener = useRef() useFonts({ ReadexPro_400Regular }) - // Auth const [fbUser, setFbUser] = useState(auth.currentUser) - // Auth.currentUser didn't update, so we track the state manually auth.onAuthStateChanged((user) => (user ? setFbUser(user) : null)) - const signInUserFromStorage = async () => { const user = await getData('user') if (!user) return @@ -119,14 +117,20 @@ const App = () => { const height = Dimensions.get('window').height //full height return ( - <> + + + + {/* */} + + + {Platform.OS === 'ios' && fullyLoaded && ( { /> )} - - - {/**/} - + + ) } -export default Sentry.wrap(withIAPContext(App)) + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + paddingHorizontal: 20, + }, + header: { + height: HEADER_HEIGHT, + overflow: 'hidden', + }, + content: { + flex: 1, + gap: 16, + overflow: 'hidden', + }, +}) + +export default Sentry.wrap(withIAPContext(RootLayout)) diff --git a/mani/app/index.tsx b/mani/app/index.tsx new file mode 100644 index 0000000000..e79af52836 --- /dev/null +++ b/mani/app/index.tsx @@ -0,0 +1,12 @@ +import { View, Text } from 'react-native' +import { SafeAreaView } from 'react-native-safe-area-context' + +export default function Home() { + return ( + + + Home + + + ) +} diff --git a/mani/constants/Colors.ts b/mani/constants/Colors.ts new file mode 100644 index 0000000000..e26563e61e --- /dev/null +++ b/mani/constants/Colors.ts @@ -0,0 +1,88 @@ +/** + * Below are the colors that are used in the app. The colors are defined in the light and dark mode. + * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc. + */ + +// Dark mode optimized grays +const gray = { + 50: '#FAFAFA', + 100: '#F4F4F5', + 200: '#E4E4E7', + 300: '#D4D4D8', + 400: '#A1A1AA', + 500: '#71717A', + 600: '#52525B', + 700: '#3F3F46', + 800: '#27272A', + 900: '#18181B', + 950: '#09090B', +} as const; + +// Tailwind emerald colors +const emerald = { + 50: '#ECFDF5', + 100: '#D1FAE5', + 200: '#A7F3D0', + 300: '#6EE7B7', + 400: '#34D399', + 500: '#10B981', + 600: '#059669', + 700: '#047857', + 800: '#065F46', + 900: '#064E3B', +} as const; + +// Tailwind purple colors +// const purple = { +// 50: '#FAF6FE', +// 100: '#F3EAFD', +// 200: '#E7D9FB', +// 300: '#D5BCF6', +// 400: '#BB90F0', +// 500: '#9B5DE5', +// 600: '#8A46D7', +// 700: '#7534BC', +// 800: '#642F9A', +// 900: '#52277C', +// 950: '#36115A', +// } as const; + +const purple = { + 50: '#FAF6FE', // Kept same - lightest shade + 100: '#F3EAFD', // Kept same + 200: '#E7D9FB', // Kept same + 300: '#C8A6F4', // Made darker (was D5BCF6) + 400: '#BB90F0', // Kept same + 500: '#9B5DE5', // Kept same + 600: '#8A46D7', // Kept same + 700: '#7534BC', // Kept same + 800: '#642F9A', // Kept same + 900: '#52277C', // Kept same + 950: '#36115A', // Kept same +} as const; + + +const white = '#FFFFFF'; + +// Mode-specific colors +export const modes = { + play: { + primary: purple[300], + sliderBackground: purple[500], + }, + sweep: { + primary: emerald[300], + sliderBackground: emerald[500], + }, +} as const; + +// Theme colors (used for UI components) +export const Colors = { + text: white, + background: gray[950], + icon: gray[400], + border: gray[800], +} as const; + +// Mode-specific colors (used for game modes) +export const ModeColors = modes; diff --git a/mani/index.js b/mani/index.js index b074ace442..3e8fd9449b 100644 --- a/mani/index.js +++ b/mani/index.js @@ -1,6 +1,12 @@ import 'expo-asset' import { registerRootComponent } from 'expo' -import App from './App' +import { ExpoRoot } from 'expo-router' + +// Must be exported or Fast Refresh won't update the context +export function App() { + const ctx = require.context('./app') + return +} // registerRootComponent calls AppRegistry.registerComponent('main', () => App); // It also ensures that whether you load the app in Expo Go or in a native build,