Fix strict mode enabled typescript issues

package.json

@@ -46,6 +46,9 @@
   "devDependencies": {
     "@expo/webpack-config": "~0.12.45",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@types/lodash": "^4.14.168",
+    "@types/react": "^17.0.3",
+    "@types/react-native": "^0.64.2",
     "babel-preset-expo": "8.3.0",
     "eslint": "^7.3.1",
     "gh-pages": "^2.1.1",

src/helpers/AssetsCaching.tsx

@@ -2,11 +2,11 @@ import { Image } from 'react-native';
 import { loadAsync } from 'expo-font';
 import { Asset } from 'expo-asset';
 
-export const cacheFonts = (fonts) => {
+export const cacheFonts = (fonts: string[]) => {
   return fonts.map((font) => loadAsync(font));
 };
 
-export const cacheImages = (images) => {
+export const cacheImages = (images: string[]) => {
   return images.map((image) => {
     if (typeof image === 'string') {
       return Image.prefetch(image);

src/helpers/AssetsCaching.web.tsx

@@ -1,8 +1,11 @@
 export const cacheImages = () => [];
 
-let cachedFonts = {};
+interface CacheFontType {
+  [key: string]: any;
+}
+let cachedFonts: CacheFontType = {};
 
-const cacheFont = (name, link) => {
+const cacheFont = (name: string, link: string) => {
   const styleBody = `@font-face { src: url(${link}); font-family: ${name}; }`;
   const style: HTMLStyleElement = document.createElement('style');
   style.type = 'text/css';

src/helpers/ThemeReducer.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
 export const initialState = { themeMode: 'light' };
-export function ThemeReducer(state, action) {
+export function ThemeReducer(
+  state: { themeMode: string },
+  action: { type: string; payload: string }
+) {
   const { payload } = action;
   switch (action.type) {
     case 'set-theme':
@@ -12,4 +15,7 @@ export function ThemeReducer(state, action) {
 }
 
 // added null in the create context so that tsc issues are fixed. Refer https://stackoverflow.com/questions/54577865/react-createcontext-issue-in-typescript/54667477
-export const ThemeReducerContext = React.createContext(null);
+export const ThemeReducerContext = React.createContext({
+  ThemeState: { themeMode: 'light' },
+  dispatch: ({ type, payload }) => {},
+});

src/navigation/DrawerNavigator.tsx

@@ -3,12 +3,16 @@ import { View, Image } from 'react-native';
 import {
   DrawerContentScrollView,
   DrawerItemList,
+  DrawerContentComponentProps,
+  DrawerContentOptions,
 } from '@react-navigation/drawer';
 import { ThemeContext, Text, Divider, Switch } from 'react-native-elements';
 import { ThemeReducerContext } from '../helpers/ThemeReducer';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-function CustomContentComponent(props) {
+function CustomContentComponent(
+  props: DrawerContentComponentProps<DrawerContentOptions>
+) {
   const { ThemeState, dispatch } = useContext(ThemeReducerContext);
   const { theme } = useContext(ThemeContext);
 
@@ -17,7 +21,7 @@ function CustomContentComponent(props) {
       style={{
         flex: 1,
         height: '100%',
-        backgroundColor: theme.colors.grey5,
+        backgroundColor: theme?.colors?.grey5,
       }}
       edges={['right', 'left', 'bottom']}
     >
@@ -75,7 +79,9 @@ function CustomContentComponent(props) {
   );
 }
 
-function CustomDrawerContent(props) {
+function CustomDrawerContent(
+  props: DrawerContentComponentProps<DrawerContentOptions>
+) {
   return (
     <DrawerContentScrollView {...props}>
       <CustomContentComponent {...props} />

src/navigation/RootNavigator.tsx

@@ -33,14 +33,15 @@ import WhatsappClone from '../views/whatsappClone';
 const Drawer = createDrawerNavigator();
 
 function RootNavigator() {
-  const { ThemeState, dispatch } = useContext(ThemeReducerContext);
+  const { ThemeState } = useContext(ThemeReducerContext);
   const { theme } = useContext(ThemeContext);
 
   return (
     <NavigationContainer
       theme={{
         colors: {
-          background: theme.colors.white,
+          background:
+            theme?.colors?.white !== undefined ? theme.colors.white : '',
           primary: '',
           card: '',
           text: '',
@@ -53,17 +54,17 @@ function RootNavigator() {
       <Drawer.Navigator
         drawerContent={DrawerNavigator}
         drawerContentOptions={{
-          activeTintColor: theme.colors.secondary,
+          activeTintColor: theme?.colors?.secondary,
           activeBackgroundColor: 'transparent',
-          inactiveTintColor: theme.colors.grey0,
+          inactiveTintColor: theme?.colors?.grey0,
           inactiveBackgroundColor: 'transparent',
           labelStyle: {
             fontSize: 15,
             marginLeft: 0,
           },
         }}
         drawerStyle={{
-          backgroundColor: theme.colors.grey4,
+          backgroundColor: theme?.colors?.grey4,
         }}
       >
         <Drawer.Screen name="Avatars" component={Avatars} />

src/views/avatars.tsx

@@ -4,40 +4,32 @@ import _ from 'lodash';
 import { Avatar } from 'react-native-elements';
 import { Header, SubHeader } from './header';
 
-const dataList = [
+type AvatarData = {
+  image_url: string;
+};
+
+const dataList: AvatarData[] = [
   {
     image_url: 'https://uifaces.co/our-content/donated/6MWH9Xi_.jpg',
-    icon: null,
-    title: null,
   },
   {
     image_url: 'https://randomuser.me/api/portraits/men/36.jpg',
-    icon: null,
-    title: null,
   },
   {
     image_url:
       'https://cdn.pixabay.com/photo/2019/11/03/20/11/portrait-4599553__340.jpg',
-    icon: null,
-    title: null,
   },
   {
     image_url:
       'https://cdn.pixabay.com/photo/2014/09/17/20/03/profile-449912__340.jpg',
-    icon: null,
-    title: null,
   },
   {
     image_url:
       'https://cdn.pixabay.com/photo/2020/09/18/05/58/lights-5580916__340.jpg',
-    icon: null,
-    title: null,
   },
   {
     image_url:
-      'https://cdn.pixabay.com/photo/2016/11/22/21/42/adult-1850703__340.jpg',
-    icon: null,
-    title: null,
+      'https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg',
   },
 ];
 
@@ -80,8 +72,7 @@ const Avatars: React.FunctionComponent<AvatarComponentProps> = () => {
               <Avatar
                 size={64}
                 rounded
-                source={l.image_url ? { uri: l.image_url } : null}
-                title={l.title}
+                source={l.image_url ? { uri: l.image_url } : {}}
                 key={`${chunkIndex}-${i}`}
               />
             ))}
@@ -205,8 +196,7 @@ const Avatars: React.FunctionComponent<AvatarComponentProps> = () => {
             size={64}
             rounded
             source={{
-              uri:
-                'https://randomuser.me/api/portraits/women/57.jpg',
+              uri: 'https://randomuser.me/api/portraits/women/57.jpg',
             }}
             title="Bj"
             containerStyle={{ backgroundColor: 'grey' }}

src/views/badge.tsx

@@ -3,7 +3,7 @@ import { Text, View } from 'react-native';
 import { Avatar, Badge, Icon, withBadge } from 'react-native-elements';
 import { Header, SubHeader } from './header';
 
-const BadgedIcon = withBadge(5)(Icon)
+const BadgedIcon = withBadge(5)(Icon);
 
 const badgeComponent = () => {
   return (
@@ -16,7 +16,8 @@ const badgeComponent = () => {
           justifyContent: 'space-around',
           marginTop: 20,
           marginBottom: 40,
-        }}>
+        }}
+      >
         <Badge value="3" status="success" />
         <Badge value="99+" status="error" />
         <Badge value="5" status="primary" />
@@ -29,7 +30,8 @@ const badgeComponent = () => {
           justifyContent: 'space-around',
           marginTop: 20,
           marginBottom: 20,
-        }}>
+        }}
+      >
         <Badge status="success" />
         <Badge status="error" />
         <Badge status="primary" />
@@ -40,44 +42,46 @@ const badgeComponent = () => {
           flexDirection: 'row',
           justifyContent: 'space-around',
           marginBottom: 20,
-        }}>
-        <Text style={{color: '#397af8', paddingVertical: 10}}>Success</Text>
-        <Text style={{color: '#397af8', paddingVertical: 10}}>Error</Text>
-        <Text style={{color: '#397af8', paddingVertical: 10}}>Primary</Text>
-        <Text style={{color: '#397af8', paddingVertical: 10}}>Warning</Text>
+        }}
+      >
+        <Text style={{ color: '#397af8', paddingVertical: 10 }}>Success</Text>
+        <Text style={{ color: '#397af8', paddingVertical: 10 }}>Error</Text>
+        <Text style={{ color: '#397af8', paddingVertical: 10 }}>Primary</Text>
+        <Text style={{ color: '#397af8', paddingVertical: 10 }}>Warning</Text>
       </View>
-    
+
       <SubHeader title={'Badge as Indicator'} />
       <View
         style={{
           flexDirection: 'row',
           justifyContent: 'space-around',
           marginTop: 20,
           marginBottom: 40,
-        }}>
+        }}
+      >
         <Avatar
           rounded
-          source={{ uri: 'https://randomuser.me/api/portraits/men/41.jpg',}}
+          source={{ uri: 'https://randomuser.me/api/portraits/men/41.jpg' }}
           size="large"
         />
         <Badge
           status="success"
-          containerStyle={{ position: 'absolute', top: 5, left: 100}}
+          containerStyle={{ position: 'absolute', top: 5, left: 100 }}
         />
         <Avatar
           rounded
-          source={{ uri: 'https://randomuser.me/api/portraits/women/40.jpg',}}
+          source={{ uri: 'https://randomuser.me/api/portraits/women/40.jpg' }}
           size="large"
         />
         <Badge
           status="error"
           value={2}
-          containerStyle={{ position: 'absolute', top: 5, left: 255}}
+          containerStyle={{ position: 'absolute', top: 5, left: 255 }}
         />
         <BadgedIcon type="ionicon" name="ios-chatbubbles" />
       </View>
     </>
   );
 };
 
-export default badgeComponent;
+export default badgeComponent;

src/views/buttons.tsx

@@ -252,7 +252,7 @@ const Buttons: React.FunctionComponent<ButtonsComponentProps> = () => {
                   borderColor: 'rgba(78, 116, 289, 1)',
                 }}
                 type="outline"
-                raised="true"
+                raised={true}
                 titleStyle={{ color: 'rgba(78, 116, 289, 1)' }}
                 containerStyle={{
                   width: 200,
@@ -378,4 +378,3 @@ const styles = StyleSheet.create({
 });
 
 export default withTheme(Buttons, '');
-

src/views/lists/content.tsx

@@ -1,9 +1,16 @@
 import _ from 'lodash';
 import React from 'react';
 import { Text, View, ScrollView } from 'react-native';
-import { Avatar, Button, Icon, withTheme } from 'react-native-elements';
+import { Avatar, Button, Icon, Theme, withTheme } from 'react-native-elements';
 
-const USERS = [
+type UserData = {
+  name: string;
+  avatar: string;
+  value: string;
+  positive: boolean;
+};
+
+const USERS: Partial<UserData>[] = [
   {
     name: 'John Smith',
     avatar: 'https://uifaces.co/our-content/donated/1H_7AxP0.jpg',
@@ -43,8 +50,12 @@ const USERS = [
   },
 ];
 
-const ListContent = (props) => {
-  const renderValue = (user) => {
+type ListContentType = {
+  theme?: Theme;
+};
+
+const ListContent = (props: ListContentType) => {
+  const renderValue = (user: Partial<UserData>) => {
     const { value, positive } = user;
 
     if (positive) {
@@ -104,7 +115,7 @@ const ListContent = (props) => {
     }
   };
 
-  const renderCard = (user, index) => {
+  const renderCard = (user: Partial<UserData>, index: React.Key) => {
     const { name, avatar } = user;
     return (
       <View
@@ -113,7 +124,7 @@ const ListContent = (props) => {
           height: 60,
           marginHorizontal: 10,
           marginTop: 10,
-          backgroundColor: props.theme.colors.grey4,
+          backgroundColor: props?.theme?.colors?.grey4,
           borderRadius: 5,
           alignItems: 'center',
           flexDirection: 'row',
@@ -134,7 +145,7 @@ const ListContent = (props) => {
               fontFamily: 'regular',
               fontSize: 15,
               marginLeft: 10,
-              color: props.theme.colors.grey0,
+              color: props?.theme?.colors?.grey0,
             }}
           >
             {name}
@@ -222,7 +233,7 @@ const ListContent = (props) => {
                   style={{
                     fontFamily: 'bold',
                     fontSize: 25,
-                    color: props.theme.colors.secondary,
+                    color: props?.theme?.colors?.secondary,
                     marginLeft: -15,
                   }}
                 >