Added TypeScript to Project

.eslintrc.js

@@ -1,22 +1,17 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended"
-    ],
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-    }
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {},
 };

App.js → App.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { extendTheme, NativeBaseProvider } from 'native-base';
 
-import HomeScreen from './screens/HomeScreen';
-import ProfileScreen from './screens/ProfileScreen';
+import HomeScreen from './src/screens/HomeScreen';
+import ProfileScreen from './src/screens/ProfileScreen';
 
 import { newColorTheme } from './utils/colorTheme';
 

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],

package.json

@@ -14,7 +14,6 @@
     "expo": "~40.0.0",
     "expo-status-bar": "~1.0.3",
     "native-base": "^3.0.0-next.11",
-    "prop-types": "^15.7.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
@@ -30,6 +29,8 @@
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",
+    "@types/react": "^17.0.0",
+    "@types/react-native": "^0.63.46",
     "eslint": "^7.18.0",
     "eslint-plugin-react": "^7.22.0"
   },

screens/HomeScreen/Chat.js → src/screens/HomeScreen/Chat.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import {
-  Box,
   HStack,
   VStack,
   Avatar,
@@ -15,11 +14,26 @@ import { ScrollView } from 'react-native';
 
 import { CHAT_USER } from './dummyData/chatUser';
 
+interface User {
+  id: number,
+  name: string,
+  uri:string,
+  messageColor: string,
+  lastMessage: string,
+  status: string,
+  time: string,
+  unreadMessage: number,
+  showIcon: boolean,
+  iconName: string,
+  iconColor: string,
+  iconType:string
+}
+
 export default function Index() {
   const [userName, setUserName] = useState('');
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleUserRightMenuClick = (userName) => {
+  const handleUserRightMenuClick = (userName:string) => {
     setUserName(userName);
     setIsOpen(true);
   };
@@ -31,7 +45,7 @@ export default function Index() {
 
   return (
     <ScrollView>
-      {CHAT_USER.map((user, idx) => (
+      {CHAT_USER.map((user:User, idx:number) => (
         <VStack pt={4} pb={4} key={idx}>
           <HStack pl={5} alignItems={'center'} justifyContent={'space-between'}>
             <TouchableOpacity onPress={() => handleUserChatClick()}>
@@ -111,7 +125,7 @@ export default function Index() {
                   <Text fontSize={14} pb={1}>
                     {user.time}
                   </Text>
-                  {user.unreadMessage > 0 ? (
+                  {/* {user.unreadMessage  && (
                     <Box
                       w={5}
                       height={5}
@@ -121,9 +135,9 @@ export default function Index() {
                       alignItems={'center'}
                       color={'white'}
                     >
-                      {user.unreadMessage}
+                      {"id"}
                     </Box>
-                  ) : null}
+                  ) } */}
                 </VStack>
                 <TouchableOpacity
                   onPress={() => handleUserRightMenuClick(user.name)}

screens/HomeScreen/Header.js → src/screens/HomeScreen/Header.tsx

@@ -13,6 +13,13 @@ import {
 
 import { MEMBER } from './dummyData/member';
 
+interface Member {
+  name: string,
+  uri: string,
+  badge: boolean,
+  status: string,
+}
+
 export default function Header() {
   return (
     <VStack
@@ -76,7 +83,7 @@ export default function Header() {
             color={'white'}
             size={12}
           />
-          {MEMBER.map((item, idx) => (
+          {MEMBER.map((item:Member, idx:number) => (
             <Avatar
               key={idx}
               name={item.name}

screens/HomeScreen/Tabs.js → src/screens/HomeScreen/Tabs.tsx

@@ -14,19 +14,23 @@ const TABS = [
   },
 ];
 
+interface Tab {
+  name:string
+}
+
 export default function Tabs() {
   const [activeTab, setActiveTab] = useState('recent');
 
-  const handleTab = (value) => {
+  const handleTab = (value:string) => {
     setActiveTab(value);
   };
   return (
     <HStack justifyContent={'space-evenly'} mb={5}>
-      {TABS.map((tab, idx) => (
+      {TABS.map((tab:Tab, idx:number) => (
         <TouchableOpacity key={idx} onPress={() => handleTab(tab.name)}>
           <Box
-            w={100}
-            h={50}
+            width={100}
+            height={50}
             bg={
               activeTab.toLowerCase() == tab.name.toLowerCase()
                 ? 'blue.400'

screens/HomeScreen/dummyData/chatUser.js → src/screens/HomeScreen/dummyData/chatUser.ts

@@ -8,7 +8,7 @@ export const CHAT_USER = [
     messageColor: 'black',
     status: 'online',
     time: '09:00 PM',
-    unreadMessage: '2',
+    unreadMessage: 2,
     showIcon: false,
     iconName: 'checkmark',
     iconType: 'Ionicons',
@@ -23,7 +23,7 @@ export const CHAT_USER = [
     messageColor: 'black',
     status: 'offline',
     time: '09:00 PM',
-    unreadMessage: '1',
+    unreadMessage: 1,
     showIcon: false,
     iconName: 'checkmark',
     iconType: 'Ionicons',
@@ -38,7 +38,7 @@ export const CHAT_USER = [
     messageColor: 'black',
     status: 'offline',
     time: '10 Jun',
-    unreadMessage: '0',
+    unreadMessage: 0,
     showIcon: true,
     iconName: 'checkmark-done',
     iconType: 'Ionicons',
@@ -53,7 +53,7 @@ export const CHAT_USER = [
     lastMessage: 'Congratulations',
     status: 'online',
     time: 'yesterday',
-    unreadMessage: '0',
+    unreadMessage: 0,
     showIcon: true,
     iconName: 'checkmark',
     iconType: 'Ionicons',
@@ -68,9 +68,10 @@ export const CHAT_USER = [
     lastMessage: 'Missed Call',
     status: 'online',
     time: '09:00 PM',
-    unreadMessage: '2',
+    unreadMessage: 2,
     showIcon: true,
     iconName: 'phone-missed',
+    iconType: 'Ionicons',
     iconColor: 'red.500',
   },
 ];

screens/HomeScreen/index.js → src/screens/HomeScreen/index.tsx

@@ -8,7 +8,7 @@ import Chat from './Chat';
 
 export default function Index() {
   return (
-    <SafeAreaView flex={1}>
+    <SafeAreaView style={{flex:1}}>
       <Box flex={1} p={3} pt={5} bg={'white'}>
         <Box flex={1} bg={'white'} shadow={3} borderRadius={20}>
           <Header />

screens/ProfileScreen/ChatLeft.js → src/screens/ProfileScreen/ChatLeft.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   Box,
   HStack,
@@ -11,10 +10,13 @@ import {
   SliderThumb,
 } from 'native-base';
 
-export default function ChatLeft({ chat }) {
+interface Props {
+  chat:string
+}
+export default function ChatLeft(props:Props) {
   return (
     <>
-      {chat === 'text' ? (
+      {props.chat === 'text' ? (
         <Box alignItems={'flex-start'} mb={5}>
           <HStack
             w={'85%'}
@@ -83,6 +85,3 @@ export default function ChatLeft({ chat }) {
     </>
   );
 }
-ChatLeft.propTypes = {
-  chat: PropTypes.string,
-};

screens/ProfileScreen/ChatRight.js → src/screens/ProfileScreen/ChatRight.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   Box,
   HStack,
@@ -11,10 +10,14 @@ import {
   SliderThumb,
 } from 'native-base';
 
-export default function ChatRight({ chat }) {
+interface Props {
+  chat:string
+}
+
+export default function ChatRight(props:Props ) {
   return (
     <>
-      {chat === 'text' ? (
+      {props.chat === 'text' ? (
         <Box alignItems={'flex-end'} mb={5}>
           <HStack w={'85%'} justifyContent={'flex-end'} alignItems={'flex-end'}>
             <Text fontSize={10}>6:30 AM</Text>
@@ -81,7 +84,3 @@ export default function ChatRight({ chat }) {
     </>
   );
 }
-
-ChatRight.propTypes = {
-  chat: PropTypes.string,
-};

screens/ProfileScreen/index.js → src/screens/ProfileScreen/index.tsx

@@ -8,7 +8,7 @@ import Content from './Content';
 
 export default function Index() {
   return (
-    <SafeAreaView flex={1}>
+    <SafeAreaView style={{flex:1}}>
       <Box flex={1} p={3} pt={5} bg={'white'}>
         <Box flex={1} bg={'white'} borderRadius={20} shadow={5}>
           <Header />

tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist",
+        "allowJs": true,
+        "target": "es5"
+    },
+    "include": ["./src/**/*.ts"]
+}