Programmiererforum

Code: Select all

// index.tsx
import { SafeAreaView, Text } from "react-native";

export default function Index() {
return (

Sterk.

);
}

Code: Select all

// _layout.tsx

import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useMigrations } from "drizzle-orm/expo-sqlite/migrator";
import { db, expodb } from "@/db";
import migrations from "@/drizzle/migrations";
import { useDrizzleStudio } from "expo-drizzle-studio-plugin";
import { useToast } from "@/hooks";
import { useEffect } from "react";
import { useColorScheme } from "react-native";
import { getHeaderStyle } from "@/utils";

export default function RootLayout() {
const queryClient = new QueryClient();
const { showToast } = useToast();
const { error } = useMigrations(db, migrations);
useEffect(() => {
if (error) {
showToast("Failed to migrate the database", "error");
console.log(error);
}
}, [error, showToast]);

useDrizzleStudio(expodb);
const colorScheme = useColorScheme();

return (

















);
}

Code: Select all

{
"expo": {
"name": "Sterk",
"slug": "sterk",
"version": "1.0.0",
"userInterfaceStyle": "light",
"orientation": "portrait",
"scheme": "myapp",
"icon": "./assets/app/icon.png",
"ios": {
"supportsTablet": false,
"bundleIdentifier": 
},
"android": {
"adaptiveIcon": {
"backgroundColor": "#ffffff"
},
"package": 
},
"web": {
"bundler": "metro",
"output": "static"
},
"plugins": [
"expo-router",
"expo-sqlite"
],
"experiments": {
"typedRoutes": true,
"reactCompiler": true
},
"newArchEnabled": true,
"extra": {
"router": {
"origin": false
},
"eas": {
"projected": 
}
},
"owner": 
}
}

< /code>
package.json:
{
"name": "sterk",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@gorhom/bottom-sheet": "^5.0.6",
"@shopify/flash-list": "1.7.1",
"@shopify/react-native-skia": "1.5.0",
"@tanstack/react-query": "^5.51.11",
"babel-plugin-inline-import": "^3.0.0",
"babel-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110",
"clsx": "^2.1.1",
"drizzle-orm":  "^0.37.0",
"expo": "~52.0.20",
"expo-dev-client": "^5.0.7",
"expo-drizzle-studio-plugin": "0.1.0",
"expo-haptics": "~14.0.0",
"expo-linking": "~7.0.3",
"expo-router": "~4.0.15",
"expo-splash-screen": "~0.29.18",
"expo-sqlite": "~15.0.4",
"expo-symbols": "~0.2.0",
"millify": "^6.1.0",
"nativewind": "^2.0.11",
"react": "18.3.1",
"react-compiler-runtime": "^19.0.0-beta-0dec889-20241115",
"react-native": "0.76.5",
"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-web": "~0.19.13",
"tailwindcss": "^3.3.2",
"tailwind-merge": "^2.4.0",
"zustand": "^4.5.4"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.0.7",
"drizzle-kit": "^0.29.1",
"eslint": "^8.57.0",
"eslint-config-expo": "~8.0.1",
"eslint-plugin-react-compiler": "^0.0.0-experimental-92aaa43-20240919",
"expo-doctor": "^1.12.4",
"jest": "^29.2.1",
"jest-expo": "~52.0.2",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.5",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
},
"expo": {
"doctor": {
"reactNativeDirectoryCheck": {
"listUnknownPackages": false
}
}
},
"private": true
}

< /code>
 metro.config.js:
const { getDefaultConfig } = require("@expo/metro-config");
const {
wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push("cjs");
defaultConfig.resolver.sourceExts.push('sql'); // 
 Babel.config.js:
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["nativewind/babel", ["inline-import", { "extensions": [".sql"] }], 'react-native-reanimated/plugin'],
};
};