refactor: rewriting app.js with typescript

App.js

@@ -1,76 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import React from 'react';
-import {createAppContainer} from 'react-navigation';
-import {createStackNavigator} from 'react-navigation-stack';
-
-import MainScreen from './src/screen/MainScreen';
-import CardEditScreen from './src/screen/CardEditScreen';
-
-import * as RNLocalize from 'react-native-localize';
-import i18n from 'i18n-js';
-import en from './src/locales/en';
-import ko from './src/locales/ko';
-
-const MainNavigator = createStackNavigator(
-  {
-    Home: {
-      screen: MainScreen,
-      navigationOptions: {headerShown: false},
-    },
-    CardEditScreen: {
-      screen: CardEditScreen,
-      navigationOptions: {headerShown: false},
-    },
-  },
-  {
-    initialRouteName: 'Home',
-  },
-);
-
-const AppContainer = createAppContainer(MainNavigator);
-
-const setI18nConfig = () => {
-  const fallback = {languageTag: 'en'};
-  const {languageTag} =
-    RNLocalize.findBestAvailableLanguage(['en', 'ko']) || fallback;
-
-  i18n.translations = {
-    en,
-    ko,
-  };
-  i18n.locale = languageTag;
-};
-
-export default class App extends React.Component {
-  constructor(props) {
-    super(props);
-    setI18nConfig();
-  }
-
-  componentDidMount() {
-    RNLocalize.addEventListener('change', this.handleLocalizationChange);
-  }
-
-  componentWillUnmount() {
-    RNLocalize.removeEventListener('change', this.handleLocalizationChange);
-  }
-
-  handleLocalizationChange = () => {
-    setI18nConfig();
-    this.forceUpdate();
-  };
-
-  render() {
-    return (
-      <>
-        <AppContainer />
-      </>
-    );
-  }
-}

App.tsx

@@ -0,0 +1,72 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+import React from 'react';
+
+import MainScreen from './src/screens/MainScreen';
+// import CardEditScreen from './src/screens/CardEditScreen';
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+const App = () => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name={'Main'}
+          component={MainScreen}
+          options={{
+            title: '홈',
+            headerStyle: {
+              backgroundColor: '#fff',
+            },
+            headerTintColor: '#000',
+            headerTitleStyle: {
+              fontWeight: 'bold',
+            },
+          }}
+        />
+        {/*<Stack.Screen name={'Edit'} component={CardEditScreen} />*/}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default App;
+
+/*
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    setI18nConfig();
+  }
+
+  componentDidMount() {
+    RNLocalize.addEventListener('change', this.handleLocalizationChange);
+  }
+
+  componentWillUnmount() {
+    RNLocalize.removeEventListener('change', this.handleLocalizationChange);
+  }
+
+  handleLocalizationChange = () => {
+    setI18nConfig();
+    this.forceUpdate();
+  };
+
+  render() {
+    return (
+      <>
+        <AppContainer />
+      </>
+    );
+  }
+}
+*/