Enable TS check on demo files and fix all errors

demo/src/screens/PlaygroundScreen.tsx

@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, Avatar, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class PlaygroundScreen extends Component {
   render() {
+    const badgePos = 'BOTTOM_LEFT';
     return (
       <View bg-grey80 flex padding-20>
         <View marginT-20>
@@ -12,8 +13,9 @@ export default class PlaygroundScreen extends Component {
           <Text text50>Playground Screen</Text>
         </Card>
         <View flex center>
-          <Button marginV-20 label="Button"/>
+          <Button marginV-20 label="Button" style={{alignSelf: 'baseline'}}/>
         </View>
+        <Avatar badgePosition={badgePos} source={1}/>
       </View>
     );
   }

demo/src/screens/componentScreens/ActionBarScreen.tsx

@@ -9,13 +9,9 @@ import collections from '../../assets/icons/collections.png';
 import richText from '../../assets/icons/richText.png';
 
 export default class ActionBarScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      currentPage: 0
-    };
-  }
+  state = {
+    currentPage: 0
+  };
 
   render() {
     return (

demo/src/screens/componentScreens/AvatarsScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet, Alert} from 'react-native';
-import {Avatar, AvatarHelper, View, Text, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
+import {Avatar, AvatarHelper, View, Text, Colors, Typography, AvatarProps} from 'react-native-ui-lib'; //eslint-disable-line
 
 
 const star = require('../../assets/icons/star.png');
@@ -25,7 +25,7 @@ const examples = [
         'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'
     },
     badgeProps: {size: 10, backgroundColor: Colors.$backgroundWarningHeavy},
-    badgePosition: 'BOTTOM_RIGHT'
+    badgePosition: 'BOTTOM_RIGHT' as AvatarProps['badgePosition']
   },
 
   {
@@ -36,7 +36,7 @@ const examples = [
         'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'
     },
     badgeProps: {size: 10, backgroundColor: Colors.$backgroundDisabled},
-    badgePosition: 'BOTTOM_LEFT'
+    badgePosition: 'BOTTOM_LEFT' as AvatarProps['badgePosition']
   },
   {
     title: 'Image with fade in animation',
@@ -53,7 +53,7 @@ const examples = [
       uri: 'https://randomuser.me/api/portraits/women/24.jpg'
     },
     badgeProps: {size: 14, borderWidth: 0, backgroundColor: onlineColor},
-    badgePosition: 'TOP_LEFT'
+    badgePosition: 'TOP_LEFT' as AvatarProps['badgePosition']
   },
   {
     title: 'Icon badge',
@@ -102,7 +102,7 @@ const examples = [
     title: 'With custom badge label',
     label: 'LD',
     backgroundColor: Colors.$backgroundDangerLight,
-    badgePosition: 'BOTTOM_RIGHT',
+    badgePosition: 'BOTTOM_RIGHT' as AvatarProps['badgePosition'],
     badgeProps: {
       label: '+2',
       size: 24,
@@ -123,7 +123,7 @@ export default class AvatarsScreen extends Component {
       patchedGravatar ? `Patched-uri: ${patchedGravatar}` : ''
     }`;
     Alert.alert(title, message);
-  }
+  };
 
   render() {
     return (

demo/src/screens/componentScreens/BasicListScreen.tsx

@@ -14,7 +14,6 @@ export default class BasicListScreen extends Component {
     return (
       <View>
         <ListItem
-          // @ts-expect-error
           activeBackgroundColor={Colors.grey60}
           activeOpacity={0.3}
           height={77.5}

demo/src/screens/componentScreens/ButtonsScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet, Alert, Image} from 'react-native';
-import {Text, View, Assets, Constants, Button, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
+import {Text, View, Assets, Constants, Button, Colors, Typography, ButtonProps} from 'react-native-ui-lib'; //eslint-disable-line
 
 const ButtonSpace = 20;
 const plusIcon = Assets.getAssetByPath('icons.demo.plus');
@@ -9,16 +9,12 @@ const labelButton = {label: 'Animated'};
 const iconButton = {round: true};
 
 export default class ButtonsScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      backgroundColor: Colors.yellow30,
-      label: 'Button',
-      // outline: true,
-      buttonProps: labelButton
-    };
-  }
+  state = {
+    backgroundColor: Colors.yellow30,
+    label: 'Button',
+    // outline: true,
+    buttonProps: labelButton as ButtonProps
+  };
 
   changeProps = () => {
     if (this.state.buttonProps === labelButton) {
@@ -241,9 +237,11 @@ export default class ButtonsScreen extends Component {
                   style={{
                     width: 20,
                     height: 20,
-                    backgroundColor: iconStyle[0].tintColor,
+                    // @ts-expect-error
+                    backgroundColor: iconStyle[0]?.tintColor,
                     borderRadius: 10,
-                    marginRight: iconStyle[0].marginRight
+                    // @ts-expect-error
+                    marginRight: iconStyle[0]?.marginRight
                   }}
                 />
               )}

demo/src/screens/componentScreens/CarouselScreen.tsx

@@ -117,7 +117,7 @@ class CarouselScreen extends Component<Props, State> {
           pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
           allowAccessibleLayout
         >
-          {_.map([...Array(numberOfPagesShown)], (item, index) => (
+          {_.map([...Array(numberOfPagesShown)], (_item, index) => (
             <Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>
               <Text margin-15>CARD {index}</Text>
             </Page>

demo/src/screens/componentScreens/ChipsInputScreen.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button, Colors, ChipsInput} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Colors, ChipsInput} from 'react-native-ui-lib'; //eslint-disable-line
 import _ from 'lodash';
 
 export default class ChipsInputScreen extends Component {

demo/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -7,7 +7,7 @@ import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 interface Props {}
 interface State {
   color: string;
-  textColor: string;
+  textColor?: string;
   customColors: string[];
   paletteChange: boolean;
   backgroundColor: string;

demo/src/screens/componentScreens/DrawerScreen.tsx

@@ -1,61 +1,48 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
-import {
-  Assets,
-  Colors,
-  Typography,
-  View,
-  Drawer,
-  Text,
-  Button,
-  Avatar,
-  Badge
-} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib'; //eslint-disable-line
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import conversations from '../../data/conversations';
 
-import {
-  renderBooleanOption,
-  renderSliderOption,
-  renderColorOption
-} from '../ExampleScreenPresenter';
+import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
 
 const ITEMS = {
   read: {
     icon: require('../../assets/icons/mail.png'),
     text: 'Read',
     background: Colors.green30,
-    testID: "left_item_read"
+    testID: 'left_item_read'
   },
   archive: {
     icon: require('../../assets/icons/archive.png'),
     text: 'Archive',
     background: Colors.blue30,
-    testID: "right_item_archive"
+    testID: 'right_item_archive'
   },
   delete: {
     icon: require('../../assets/icons/delete.png'),
     text: 'Delete',
     background: Colors.red30,
-    testID: "right_item_delete"
+    testID: 'right_item_delete'
   }
 };
 
 class DrawerScreen extends Component {
-  constructor(props) {
-    super(props);
+  state = {
+    hideItem: false,
+    showRightItems: true,
+    fullSwipeRight: true,
+    showLeftItem: true,
+    fullSwipeLeft: true,
+    unread: true,
+    itemsTintColor: undefined,
+    bounciness: undefined,
+    itemsIconSize: undefined
+  };
 
-    this.state = {
-      hideItem: false,
-      showRightItems: true,
-      fullSwipeRight: true,
-      showLeftItem: true,
-      fullSwipeLeft: true,
-      unread: true
-    };
-  }
+  ref: React.Ref<typeof Drawer> = null;
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(_prevProps: any, prevState: typeof this.state) {
     if (this.state.hideItem && prevState.hideItem) {
       this.showItem();
     }
@@ -82,39 +69,45 @@ class DrawerScreen extends Component {
 
   toggleReadState = () => {
     this.setState({unread: !this.state.unread});
-  }
+  };
 
   showItem = () => {
     this.setState({hideItem: false});
   };
 
   openLeftDrawer = () => {
     if (this.ref) {
+      // @ts-expect-error
       this.ref.openLeft();
     }
   };
   openLeftDrawerFull = () => {
     if (this.ref) {
+      // @ts-expect-error
       this.ref.openLeftFull();
     }
   };
   toggleLeftDrawer = () => {
     if (this.ref) {
+      // @ts-expect-error
       this.ref.toggleLeft();
     }
   };
   openRightDrawer = () => {
     if (this.ref) {
+      // @ts-expect-error
       this.ref.openRight();
     }
   };
   openRightDrawerFull = () => {
     if (this.ref) {
+      // @ts-expect-error
       this.ref.openRightFull();
     }
   };
   closeDrawer = () => {
     if (this.ref) {
+      // @ts-expect-error
       this.ref.closeDrawer();
     }
   };
@@ -149,13 +142,7 @@ class DrawerScreen extends Component {
           </View>
 
           <View marginH-20>
-            <Button
-              onPress={this.closeDrawer}
-              label="Close"
-              style={{margin: 3}}
-              size={'xSmall'}
-              testID="close_btn"
-            />
+            <Button onPress={this.closeDrawer} label="Close" style={{margin: 3}} size={'xSmall'} testID="close_btn"/>
           </View>
 
           <View>
@@ -192,10 +179,14 @@ class DrawerScreen extends Component {
         style={{borderBottomWidth: 1, borderColor: Colors.grey60}}
         testID="drawer_item"
       >
-        {this.state.unread && <Badge testID="drawer_item_badge" size={6} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
+        {this.state.unread && (
+          <Badge testID="drawer_item_badge" size={6} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>
+        )}
         <Avatar source={{uri: data.thumbnail}}/>
         <View marginL-20>
-          <Text text70R={!this.state.unread} text70BO={this.state.unread}>{data.name}</Text>
+          <Text text70R={!this.state.unread} text70BO={this.state.unread}>
+            {data.name}
+          </Text>
           <Text text80 marginT-2>
             {data.text}
           </Text>
@@ -216,11 +207,12 @@ class DrawerScreen extends Component {
       hideItem
     } = this.state;
 
-    const drawerProps = {
+    const drawerProps: DrawerProps = {
       itemsTintColor,
       itemsIconSize,
       bounciness,
-      ref: (component) => (this.ref = component),
+      // @ts-expect-error
+      ref: component => (this.ref = component),
       fullSwipeRight,
       onFullSwipeRight: this.deleteItem,
       fullSwipeLeft,
@@ -236,7 +228,7 @@ class DrawerScreen extends Component {
       drawerProps.leftItem = {
         ...ITEMS.read,
         icon: this.state.unread ? require('../../assets/icons/mail.png') : require('../../assets/icons/refresh.png'),
-        text: !this.state.unread ? 'Unread' : 'Read', 
+        text: !this.state.unread ? 'Unread' : 'Read',
         background: this.state.unread ? Colors.green30 : Colors.orange30,
         onPress: this.toggleReadState
       };
@@ -265,22 +257,13 @@ class DrawerScreen extends Component {
           </>
         )}
 
-        <ScrollView
-          style={styles.container}
-          contentContainerStyle={styles.contentContainer}
-        >
+        <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
           <View padding-20>
             {this.renderActions()}
             {renderBooleanOption.call(this, 'rightItems', 'showRightItems')}
-            {showRightItems &&
-              renderBooleanOption.call(
-                this,
-                'fullSwipeRight',
-                'fullSwipeRight'
-              )}
+            {showRightItems && renderBooleanOption.call(this, 'fullSwipeRight', 'fullSwipeRight')}
             {renderBooleanOption.call(this, 'leftItem', 'showLeftItem')}
-            {showLeftItem &&
-              renderBooleanOption.call(this, 'fullSwipeLeft', 'fullSwipeLeft')}
+            {showLeftItem && renderBooleanOption.call(this, 'fullSwipeLeft', 'fullSwipeLeft')}
             {renderColorOption.call(this, 'icon+text color', 'itemsTintColor')}
             {renderSliderOption.call(this, 'bounciness', 'bounciness', {
               min: 5,