feat: add unistyles and sample fonts

.eslintignore

@@ -1,4 +1,5 @@
 /.expo
 node_modules
 ios
-android
+android
+expo-env.d.ts

.eslintrc.js

@@ -2,11 +2,46 @@
 module.exports = {
   extends: [
     'expo',
+    'eslint:recommended',
     'plugin:@tanstack/eslint-plugin-query/recommended',
     'prettier',
+    'plugin:prettier/recommended',
+    'plugin:security/recommended-legacy',
   ],
-  plugins: ['prettier'],
+  plugins: ['prettier', '@tanstack/query'],
   rules: {
     'prettier/prettier': 'error',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.ts', '.tsx', '.js', '.jsx'],
+      },
+    ],
+    'react/jsx-props-no-spreading': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'no-nested-ternary': 'off',
+    'import/prefer-default-export': 'off',
+    'security/detect-object-injection': 'off',
+    'react-hooks/exhaustive-deps': 'error',
   },
 };

package.json

@@ -23,6 +23,7 @@
     "@react-native-community/netinfo": "11.3.1",
     "@react-navigation/native": "^6.0.2",
     "@tanstack/react-query": "^5.55.4",
+    "axios": "^1.7.7",
     "expo": "~51.0.28",
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.26",
@@ -53,6 +54,8 @@
     "eslint-config-expo": "^7.1.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-security": "^3.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.3",
     "prettier": "^3.3.3",

src/app/_layout.tsx

@@ -4,12 +4,14 @@ import {
   focusManager,
 } from '@tanstack/react-query';
 import { useReactQueryDevTools } from '@dev-plugins/react-query';
-import { Stack } from 'expo-router';
+import { SplashScreen, Stack } from 'expo-router';
 import { useEffect } from 'react';
 import { AppState, Platform } from 'react-native';
 import type { AppStateStatus } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
 import { onlineManager } from '@tanstack/react-query';
+import { useFonts } from 'expo-font';
+import '@/theme/unistyles';
 
 const queryClient = new QueryClient();
 
@@ -33,7 +35,21 @@ const App = () => {
   );
 };
 
-export default function RootLayout() {
+SplashScreen.preventAutoHideAsync();
+
+const RootLayout = () => {
+  const [fontsLoaded, fontsError] = useFonts({
+    Poppins: require('@assets/fonts/Poppins-Regular.ttf'),
+    'Poppins-Bold': require('@assets/fonts/Poppins-Bold.ttf'),
+    'Poppins-SemiBold': require('@assets/fonts/Poppins-SemiBold.ttf'),
+  });
+
+  useEffect(() => {
+    if (fontsLoaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded]);
+
   useReactQueryDevTools(queryClient);
 
   useEffect(() => {
@@ -42,9 +58,15 @@ export default function RootLayout() {
     return () => subscription.remove();
   }, []);
 
+  if (!fontsLoaded || fontsError) {
+    return null;
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>
   );
-}
+};
+
+export default RootLayout;

src/app/index.tsx

@@ -1,15 +1,26 @@
 import { Text, View } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+const Page = () => {
+  const { styles } = useStyles(stylesheet);
 
-export default function Index() {
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Text>Welcome to WaveZync 🌊</Text>
+    <View style={styles.container}>
+      <Text style={styles.text}>Welcome to WaveZync 🌊🚀</Text>
     </View>
   );
-}
+};
+
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.background,
+  },
+  text: {
+    color: theme.colors.typography,
+  },
+}));
+
+export default Page;

src/constants/README.md

@@ -0,0 +1,3 @@
+# Constants
+
+App wide constants are defined here.

src/theme/breakpoints.ts

@@ -0,0 +1,9 @@
+export const breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  superLarge: 2000,
+  tvLike: 4000,
+} as const;

src/theme/themes.ts

@@ -0,0 +1,27 @@
+export const lightTheme = {
+  colors: {
+    typography: '#000000',
+    background: '#ffffff',
+  },
+  margins: {
+    sm: 2,
+    md: 4,
+    lg: 8,
+    xl: 12,
+  },
+} as const;
+
+export const darkTheme = {
+  colors: {
+    typography: '#ffffff',
+    background: '#000000',
+  },
+  margins: {
+    sm: 2,
+    md: 4,
+    lg: 8,
+    xl: 12,
+  },
+} as const;
+
+// define other themes

src/theme/unistyles.ts

@@ -0,0 +1,23 @@
+import { UnistylesRegistry } from 'react-native-unistyles';
+import { breakpoints } from './breakpoints';
+import { lightTheme, darkTheme } from './themes';
+
+type AppBreakpoints = typeof breakpoints;
+type AppThemes = {
+  light: typeof lightTheme;
+  dark: typeof darkTheme;
+};
+
+declare module 'react-native-unistyles' {
+  export interface UnistylesBreakpoints extends AppBreakpoints {}
+  export interface UnistylesThemes extends AppThemes {}
+}
+
+UnistylesRegistry.addBreakpoints(breakpoints)
+  .addThemes({
+    light: lightTheme,
+    dark: darkTheme,
+  })
+  .addConfig({
+    adaptiveThemes: true,
+  });

tsconfig.json

@@ -5,6 +5,9 @@
     "paths": {
       "@/*": [
         "./src/*"
+      ],
+      "@assets/*": [
+        "./assets/*"
       ]
     }
   },