84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
|
|
import { NavigationContainer } from '@react-navigation/native';
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
|
|
import MainScreen from './src/screens/MainScreen';
|
|
import { Card } from './src/types';
|
|
import CardEditScreen from './src/screens/CardEditScreen';
|
|
import { QueryClient, QueryClientProvider } from 'react-query';
|
|
import { StatusBar, useColorScheme } from 'react-native';
|
|
import { ThemeProvider } from 'styled-components/native';
|
|
|
|
import LightTheme from './src/themes/lightTheme';
|
|
import DarkTheme from './src/themes/darkTheme';
|
|
|
|
import './src/locales/i18n';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export type RootStackParams = {
|
|
Main: undefined;
|
|
Add: undefined;
|
|
Edit: { card: Card; index: number };
|
|
};
|
|
|
|
const queryClient = new QueryClient();
|
|
const Stack = createNativeStackNavigator<RootStackParams>();
|
|
|
|
const App = () => {
|
|
const { t } = useTranslation();
|
|
const colorScheme = useColorScheme();
|
|
const theme = useMemo(
|
|
() => (colorScheme === 'dark' ? DarkTheme : LightTheme),
|
|
[colorScheme],
|
|
);
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<ThemeProvider theme={theme}>
|
|
<NavigationContainer>
|
|
<StatusBar
|
|
backgroundColor={'transparent'}
|
|
barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
|
|
translucent
|
|
/>
|
|
<Stack.Navigator
|
|
screenOptions={{
|
|
headerStyle: {
|
|
backgroundColor: theme.colors.header,
|
|
},
|
|
headerTintColor: theme.colors.text,
|
|
headerTitleStyle: {
|
|
color: theme.colors.text,
|
|
fontWeight: 'bold',
|
|
},
|
|
}}
|
|
>
|
|
<Stack.Screen
|
|
name={'Main'}
|
|
component={MainScreen}
|
|
options={{
|
|
title: t('title.home'),
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name={'Add'}
|
|
component={CardEditScreen}
|
|
options={{
|
|
title: t('title.card_add'),
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name={'Edit'}
|
|
component={CardEditScreen}
|
|
options={{ title: t('title.card_edit') }}
|
|
/>
|
|
</Stack.Navigator>
|
|
</NavigationContainer>
|
|
</ThemeProvider>
|
|
</QueryClientProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|