Book TypesSript

babel.config.js

@@ -15,7 +15,8 @@ module.exports = {
           '@config': './src/config',
           '@utils': './src/utils',
           '@styles': './src/styles',
-          '@context': './src/context'
+          '@context': './src/context',
+          '@interfaces': './src/interfaces'
         }
       }
     ]

package.json

@@ -29,19 +29,25 @@
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
     "@react-native-community/eslint-config": "^0.0.5",
+    "@types/jest": "^25.2.1",
+    "@types/react": "^16.9.32",
+    "@types/react-native": "^0.62.1",
+    "@types/react-test-renderer": "^16.9.2",
     "babel-jest": "^24.9.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.10.0",
     "eslint-config-wolox-react-native": "^1.0.1",
+    "eslint-import-resolver-babel-module": "^5.1.2",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-prettier": "^3.1.2",
     "install": "^0.13.0",
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.56.0",
     "npm": "^6.14.2",
     "prettier": "^1.19.1",
-    "react-test-renderer": "16.9.0"
+    "react-test-renderer": "16.9.0",
+    "typescript": "^3.8.3"
   },
   "jest": {
     "preset": "react-native"

src/app/components/Header/components/BackButton/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TouchableOpacity, Image } from 'react-native';
+
+import styles from './styles';
+
+interface Props {
+  onPress: () => void;
+  backButton: number;
+}
+
+function BackButton({ onPress, backButton }: Props) {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Image style={styles.headerBackBtn} source={backButton} />
+    </TouchableOpacity>
+  );
+}
+
+export default BackButton;

src/app/components/Header/components/LogoutButton/index.js → src/app/components/Header/components/LogoutButton/index.tsx

@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
-import { Image, ActivityIndicator, TouchableWithoutFeedback, View } from 'react-native';
+import { Image, ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 
-import { useGlobalValue } from '@context';
+import { useGlobalValue } from '@context/index';
 import { actionsCreator } from '@context/user/actions';
 import logout from '@assets/logout.png';
-import { WHITE } from '@constants/colors';
+import COLORS from '@constants/colors';
 
 import styles from './styles';
 
 function LogoutButton() {
   const [, dispatch] = useGlobalValue();
-  const [loading, setLoading] = useState();
+  const [loading, setLoading] = useState<boolean>();
   const handleLogoutBtn = async () => {
     setLoading(true);
     try {
@@ -24,11 +24,11 @@ function LogoutButton() {
   };
 
   return (
-    <TouchableWithoutFeedback disabled={loading} onPress={handleLogoutBtn}>
+    <TouchableOpacity disabled={loading} onPress={handleLogoutBtn}>
       <View style={styles.logoutBtn}>
-        {loading ? <ActivityIndicator size="small" color={WHITE} /> : <Image source={logout} />}
+        {loading ? <ActivityIndicator size="small" color={COLORS.WHITE} /> : <Image source={logout} />}
       </View>
-    </TouchableWithoutFeedback>
+    </TouchableOpacity>
   );
 }