feat: Migrate to typescript (#63)

Author: mykola-mokhnach

.gitignore

@@ -40,6 +40,7 @@ local.properties
 node_modules/
 npm-debug.log
 yarn-error.log
+*.tsbuildinfo
 
 # fastlane
 #

App.tsx

@@ -0,0 +1,12 @@
+import 'react-native-gesture-handler';
+import React, { Component } from 'react';
+import { AppRegistry } from 'react-native';
+import Router from './router/Router';
+
+export default class VodQAReactNative extends Component {
+  render(): React.JSX.Element {
+    return <Router />;
+  }
+}
+
+AppRegistry.registerComponent('VodQAReactNative', () => VodQAReactNative);

README.md

@@ -1,6 +1,6 @@
 # VodQAReactNative
 
-A React Native mobile application demonstrating various UI interactions and gestures, rebuilt on React Native 0.73.6.
+A React Native mobile application demonstrating various UI interactions and gestures.
 
 ## Features
 

__tests__/LoginScreen.test.js __tests__/LoginScreen.test.tsx__tests__/LoginScreen.test.js renamed to __tests__/LoginScreen.test.tsx

@@ -10,15 +10,15 @@ import LoginScreen from '../screens/LoginScreen';
 const mockNavigation = {
   navigate: jest.fn(),
   goBack: jest.fn(),
-};
+} as any;
 
 describe('LoginScreen', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders without crashing', async () => {
-    let tree;
+    let tree: ReactTestRenderer.ReactTestRenderer | undefined;
     await act(async () => {
       tree = ReactTestRenderer.create(
         React.createElement(LoginScreen, { navigation: mockNavigation }),

__tests__/Router.test.js __tests__/Router.test.tsx__tests__/Router.test.js renamed to __tests__/Router.test.tsx

@@ -37,10 +37,10 @@ jest.mock('../screens/NativeView', () => mockScreen());
 jest.mock('../screens/WheelPicker', () => mockScreen());
 
 describe('Router', () => {
-  let Router;
-  let ReactTestRenderer;
-  let React;
-  let act;
+  let Router: React.ComponentType;
+  let ReactTestRenderer: any;
+  let React: any;
+  let act: any;
 
   beforeAll(async () => {
     // Import Router after mocks are set up
@@ -51,7 +51,7 @@ describe('Router', () => {
   });
 
   it('renders without crashing', async () => {
-    let tree;
+    let tree: any;
     await act(async () => {
       tree = ReactTestRenderer.create(React.createElement(Router));
     });

__tests__/SamplesListScreen.test.js __tests__/SamplesListScreen.test.tsx__tests__/SamplesListScreen.test.js renamed to __tests__/SamplesListScreen.test.tsx

@@ -10,15 +10,15 @@ import SamplesListScreen from '../screens/SamplesListScreen';
 const mockNavigation = {
   navigate: jest.fn(),
   goBack: jest.fn(),
-};
+} as any;
 
 describe('SamplesListScreen', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders without crashing', async () => {
-    let tree;
+    let tree: ReactTestRenderer.ReactTestRenderer | undefined;
     await act(async () => {
       tree = ReactTestRenderer.create(
         React.createElement(SamplesListScreen, { navigation: mockNavigation }),

android/app/build.gradle

@@ -37,7 +37,7 @@ react {
     // bundleAssetName = "MyApplication.android.bundle"
     //
     //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-    // entryFile = file("../js/MyApplication.android.js")
+    // entryFile = file("../../index.js")
     //
     //   A list of extra flags to pass to the 'bundle' commands.
     //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle

helpers/PlatformSpecificStyles.js helpers/PlatformSpecificStyles.tshelpers/PlatformSpecificStyles.js renamed to helpers/PlatformSpecificStyles.ts

@@ -1,9 +1,27 @@
-import { StyleSheet, Platform } from 'react-native';
+import {
+  StyleSheet,
+  Platform,
+  ViewStyle,
+  TextStyle,
+  ImageStyle,
+} from 'react-native';
 
-export function create(styles) {
-  const platformStyles = {};
+type Style = ViewStyle | TextStyle | ImageStyle;
+
+interface PlatformStyle {
+  ios?: Style;
+  android?: Style;
+  [key: string]: any;
+}
+
+interface Styles {
+  [key: string]: PlatformStyle | Style;
+}
+
+export function create(styles: Styles): any {
+  const platformStyles: { [key: string]: Style } = {};
   Object.keys(styles).forEach(name => {
-    let { ios, android, ...style } = { ...styles[name] };
+    let { ios, android, ...style } = { ...styles[name] } as any;
     if (ios && Platform.OS === 'ios') {
       style = { ...style, ...ios };
     }

index.js

@@ -1,12 +1,3 @@
-import 'react-native-gesture-handler';
-import React, { Component } from 'react';
-import { AppRegistry } from 'react-native';
-import Router from './router/Router';
+import App from './App.tsx';
 
-export default class VodQAReactNative extends Component {
-  render() {
-    return <Router />;
-  }
-}
-
-AppRegistry.registerComponent('VodQAReactNative', () => VodQAReactNative);
+export default App;

router/Router.js router/Router.tsxrouter/Router.js renamed to router/Router.tsx

@@ -18,7 +18,7 @@ import Routes from './Routes';
 
 const Stack = createStackNavigator();
 
-function Router() {
+function Router(): React.JSX.Element {
   return (
     <NavigationContainer>
       <Stack.Navigator
@@ -98,4 +98,5 @@ function Router() {
     </NavigationContainer>
   );
 }
+
 export default Router;