unicorn-demo-app 7.3.2 → 7.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/screens/PlaygroundScreen.tsx

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
 
 export default class PlaygroundScreen extends Component {
   render() {
@@ -19,7 +18,3 @@ export default class PlaygroundScreen extends Component {
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {}
-});

package/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 (

package/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';
 
 
 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 (

package/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}

package/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';
 
 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
                   }}
                 />
               )}

package/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>

package/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';
 import _ from 'lodash';
 
 export default class ChipsInputScreen extends Component {

package/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;

package/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';
 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,7 +69,7 @@ class DrawerScreen extends Component {
 
   toggleReadState = () => {
     this.setState({unread: !this.state.unread});
-  }
+  };
 
   showItem = () => {
     this.setState({hideItem: false});
@@ -90,31 +77,37 @@ class DrawerScreen extends Component {
 
   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,

package/src/screens/componentScreens/GridViewScreen.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import {View, Text, Image, Colors, Constants, Avatar, GridView, Card} from 'react-native-ui-lib';
+import {View, Text, Image, Colors, Constants, Avatar, GridView, Card, GridViewProps} from 'react-native-ui-lib';
 import React, {Component} from 'react';
 import {Alert, ScrollView} from 'react-native';
 import conversations from '../../data/conversations';
@@ -30,7 +30,7 @@ class GridViewScreen extends Component {
               return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
             }
           }
-        })))(products),
+        })))(products) as GridViewProps['items'],
     pairs: _.flow(products => _.take(products, 2),
       (products: any[]) =>
         _.map(products, product => ({
@@ -102,7 +102,7 @@ class GridViewScreen extends Component {
               );
             }
           }
-        })))(products),
+        })))(products) as GridViewProps['items'],
 
     avatars: _.flow(products => _.take(products, 9),
       (products: any[]) =>

package/src/screens/componentScreens/HintsScreen.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {Alert} from 'react-native';
+import {Alert, ViewStyle} from 'react-native';
 import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
 
@@ -16,7 +16,7 @@ export default class HintsScreen extends Component<HintScreenProps> {
     useShortMessage: false,
     showBottomHint: false,
     showIcon: false,
-    targetPosition: 'flex-start',
+    targetPosition: 'flex-start' as ViewStyle['alignSelf'],
     useBackdrop: true,
     useTargetFrame: false,
     useSideTip: false,

package/src/screens/componentScreens/ModalScreen.tsx

@@ -9,7 +9,7 @@ interface ModalScreenProps {
 }
 
 interface State {
-  currentPage?: number;
+  currentPage: number;
 }
 
 export default class ModalScreen extends Component<ModalScreenProps, State> {

package/src/screens/componentScreens/OverlaysScreen.tsx

@@ -11,11 +11,11 @@ const uri = {
 };
 
 export default class OverlaysScreen extends Component {
-  getImageWithOverlay = (type, text, customOverylay) => {
+  getImageWithOverlay = (type: string | undefined, text: string, customOverlay?: JSX.Element) => {
     return (
       <View centerH>
         <Text grey10>{text}</Text>
-        <Image /* overlayColor={Colors.rgba(Colors.red40, 0.4)} */ style={styles.image} source={image} overlayType={type} customOverlayContent={customOverylay}/>
+        <Image /* overlayColor={Colors.rgba(Colors.red40, 0.4)} */ style={styles.image} source={image} overlayType={type} customOverlayContent={customOverlay}/>
       </View>
     );
   };

package/src/screens/componentScreens/PanDismissibleScreen.tsx

@@ -64,7 +64,7 @@ export default class PanDismissibleScreen extends Component {
           <PanningProvider>
             {!isCoupled && panListener}
             <PanDismissibleView
-              key={key}
+              key={key.toString()}
               style={[styles.panDismissible, {marginTop: isCoupled ? PAN_LISTENER_VIEW_HEIGHT : undefined}]}
             >
               {isCoupled && panListener}

package/src/screens/componentScreens/PanListenerScreen.tsx

@@ -1,6 +1,5 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
-import {View, Text, PanListenerView, PanningProvider, PanDirectionsProps, PanAmountsProps} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, PanListenerView, PanDirectionsProps, PanAmountsProps} from 'react-native-ui-lib';
 
 export default class PanListenerScreen extends Component {
   state = {
@@ -8,11 +7,11 @@ export default class PanListenerScreen extends Component {
     endType: ''
   };
 
-  onDrag = ({directions, deltas}: ({directions: PanDirectionsProps, deltas: PanAmountsProps})) => {
+  onDrag = ({directions}: ({directions: PanDirectionsProps, deltas: PanAmountsProps})) => {
     this.setState({locationText: `Dragged: ${directions.x}, ${directions.y}`});
   };
 
-  onSwipe = ({directions, velocities}: ({directions: PanDirectionsProps, velocities: PanAmountsProps})) => {
+  onSwipe = ({directions}: ({directions: PanDirectionsProps, velocities: PanAmountsProps})) => {
     this.setState({locationText: `Swiped: ${directions.x}, ${directions.y}`});
   };
 

package/src/screens/componentScreens/ScrollBarScreen.tsx

@@ -1,13 +1,12 @@
 import React, {Component} from 'react';
 import {View, Text, ScrollBar, Button} from 'react-native-ui-lib';
 
-
 class ScrollBarScreen extends Component {
   state = {
     selectedIndex: 0
   };
 
-  focus = ({index}) => {
+  focus = ({customValue: index}: {customValue: number}) => {
     this.setState({selectedIndex: index});
   };
 
@@ -33,7 +32,7 @@ class ScrollBarScreen extends Component {
             'November',
             'December'
           ].map((item, index) => {
-            return <Button key={item} index={index} label={item} size="small" onPress={this.focus} marginR-s2/>;
+            return <Button key={item} customValue={index} label={item} size="small" onPress={this.focus} marginR-s2/>;
           })}
         </ScrollBar>
       </View>

package/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -29,7 +29,7 @@ const SectionsWheelPickerScreen = () => {
     return Constants.isRTL && disableRTL;
   }, [disableRTL]);
 
-  const getItems = useCallback(values => {
+  const getItems = useCallback((values: (number | string)[]) => {
     return _.map(values, item => ({label: '' + item, value: item}));
   }, []);
 

package/src/screens/componentScreens/SliderScreen.tsx

@@ -1,6 +1,16 @@
 import React, {Component, Fragment} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Constants, Colors, View, Text, Button, Icon, Slider, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib';
+import {
+  Constants,
+  Colors,
+  View,
+  Text,
+  Button,
+  Icon,
+  Slider,
+  GradientSlider,
+  ColorSliderGroup
+} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface SliderScreenProps {
@@ -41,17 +51,20 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
   gradientSlider = React.createRef();
 
   resetSlider = () => {
+    // @ts-expect-error
     this.slider.current?.reset();
+    // @ts-expect-error
     this.rangeSlider.current?.reset();
+    // @ts-expect-error
     this.gradientSlider.current?.reset();
-  }
+  };
 
-  onSliderRangeChange = (values: {min: number, max: number}) => {
+  onSliderRangeChange = (values: {min: number; max: number}) => {
     const {min, max} = values;
     this.setState({sliderMinValue: min, sliderMaxValue: max});
   };
 
-  onSliderRangeChange2 = (values: {min: number, max: number}) => {
+  onSliderRangeChange2 = (values: {min: number; max: number}) => {
     const {min, max} = values;
     this.setState({sliderMinValue2: min, sliderMaxValue2: max});
   };
@@ -62,11 +75,11 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
 
   onSliderReset = () => {
     this.setState({sliderValue: INITIAL_VALUE});
-  }
+  };
 
   onRangeSliderReset = () => {
     this.setState({sliderMinValue: RANGE_INITIAL_MIN, sliderMaxValue: RANGE_INITIAL_MAX});
-  }
+  };
 
   onGradientValueChange = (value: string, alpha: number) => {
     this.setState({color: value, alpha});
@@ -78,7 +91,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
 
   getReverseStyle = () => {
     return Constants.isRTL && this.state.forceLTR && styles.ltr;
-  }
+  };
 
   renderDefaultSliderExample() {
     const {sliderValue, forceLTR} = this.state;
@@ -88,7 +101,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
         <Text $textDefault text70BO>
           Default slider
         </Text>
-        
+
         <View row centerV style={this.getReverseStyle()}>
           <Icon assetName={'search'} style={styles.image}/>
           <Slider
@@ -99,6 +112,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
             step={1}
             containerStyle={styles.sliderContainer}
             disableRTL={forceLTR}
+            // @ts-expect-error
             ref={this.slider}
             onReset={this.onSliderReset}
           />
@@ -188,6 +202,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           maximumValue={100}
           step={1}
           disableRTL={forceLTR}
+          // @ts-expect-error
           ref={this.rangeSlider}
           onReset={this.onRangeSliderReset}
         />
@@ -243,6 +258,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
             color={color}
             containerStyle={styles.gradientSliderContainer}
             onValueChange={this.onGradientValueChange}
+            // @ts-expect-error
             ref={this.gradientSlider}
           />
           <View style={styles.box}>

package/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -39,14 +39,13 @@ class TabControllerScreen extends Component<{}, State> {
       initialIndex: 0,
       selectedIndex: 0,
       key: Date.now(),
-      items: []
+      items: this.generateTabItems(false)
     };
-
-    this.state.items = this.generateTabItems();
   }
   tabController = React.createRef<TabControllerImperativeMethods>();
 
   generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
+    // @ts-expect-error
     const items: TabControllerItemProps[] = _.flow(tabs => _.take(tabs, fewItems ? 3 : TABS.length),
       (tabs: TabControllerItemProps[]) =>
         _.map<TabControllerItemProps>(tabs, (tab: TabControllerItemProps, index: number) => ({
@@ -58,7 +57,7 @@ class TabControllerScreen extends Component<{}, State> {
           trailingAccessory: index === 4 ? <Text marginL-4>{Assets.emojis.camera}</Text> : undefined
         })))(TABS);
 
-    const addItem: TabControllerItemProps = {
+    const addItem: TabControllerItemProps & {key: string} = {
       icon: Assets.icons.demo.add,
       key: 'add',
       ignore: true,

package/src/screens/componentScreens/TextFieldScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, ActivityIndicator} from 'react-native';
-import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, TextField, TextFieldRef} from 'react-native-ui-lib'; //eslint-disable-line
+import {Assets, Colors, Spacings, View, Text, Button, Keyboard, TextField, TextFieldRef} from 'react-native-ui-lib';
 const {KeyboardAwareInsetsView} = Keyboard;
 
 const priceFormatter = Intl.NumberFormat('en-US');

package/src/screens/componentScreens/WheelPickerScreen.tsx

@@ -32,8 +32,8 @@ export default () => {
   },
   [yearsValue]);
 
-  const onChange = useCallback((value) => {
-    setYearsValue(value);
+  const onChange = useCallback((value: number | string) => {
+    setYearsValue(value as number);
   }, []);
 
   const onPickDaysPress = useCallback(() => {

package/src/screens/componentScreens/WizardScreen.tsx

@@ -83,7 +83,7 @@ export default class WizardScreen extends Component<{}, State> {
     }
 
     const activeIndex = prevActiveIndex + 1;
-    let completedStepIndex = prevCompletedStepIndex;
+    let completedStepIndex: number | undefined = prevCompletedStepIndex;
     if (!prevCompletedStepIndex || prevCompletedStepIndex < prevActiveIndex) {
       completedStepIndex = prevActiveIndex;
     }
@@ -150,10 +150,11 @@ export default class WizardScreen extends Component<{}, State> {
           value={customerName}
           validate={'required'}
           validateOnChange
-          errorMessage="This is required"
+          validationMessage="This is required"
           onChangeText={this.onNameEntered}
         />
         {this.renderPrevButton()}
+        {/* @ts-expect-error */}
         {this.renderNextButton(_.isNil(customerName) || customerName.trim().length === 0)}
       </View>
     );
@@ -186,7 +187,7 @@ export default class WizardScreen extends Component<{}, State> {
   getStepState(index: number) {
     const {activeIndex, completedStepIndex} = this.state;
     let state = Wizard.States.DISABLED;
-    if (completedStepIndex > index - 1) {
+    if (completedStepIndex && completedStepIndex > index - 1) {
       state = Wizard.States.COMPLETED;
     } else if (activeIndex === index || completedStepIndex === index - 1) {
       state = Wizard.States.ENABLED;

package/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, Incubator, TouchableOpacity} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, View, Text, Incubator, TouchableOpacity, ExpandableOverlayMethods, PickerMethods} from 'react-native-ui-lib';
 import _ from 'lodash';
 
 const COLOR_OPTIONS: {[key: string]: string} = {
@@ -11,8 +11,8 @@ const COLOR_OPTIONS: {[key: string]: string} = {
 };
 
 export default class TextFieldScreen extends Component {
-  expandableInputRef = React.createRef();
-  expandablePickerRef = React.createRef();
+  expandableInputRef = React.createRef<ExpandableOverlayMethods>();
+  expandablePickerRef = React.createRef<PickerMethods>();
 
   state = {
     textFieldValueDraft: '',
@@ -24,16 +24,16 @@ export default class TextFieldScreen extends Component {
 
   onDone = () => {
     this.setState({textFieldValue: this.state.textFieldValueDraft});
-    this.expandableInputRef.current.closeExpandable();
+    this.expandableInputRef.current?.closeExpandable();
   };
   onCancel = () => {
     this.setState({textFieldValueDraft: this.state.textFieldValue});
-    this.expandableInputRef.current.closeExpandable();
+    this.expandableInputRef.current?.closeExpandable();
   };
 
   onPickItem = ({customValue: color}: {customValue: string}) => {
     this.setState({selectedColor: color});
-    this.expandablePickerRef.current.closeExpandable();
+    this.expandablePickerRef.current?.closeExpandable();
   };
 
   renderInputModal = () => {

package/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -79,6 +79,7 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(sliderValue)}
         <Incubator.Slider
+          // @ts-expect-error TODO: need to properly support SliderMethods type to use for ref
           ref={slider}
           onValueChange={onValueChange}
           containerStyle={styles.container}
@@ -97,6 +98,7 @@ const IncubatorSliderScreen = () => {
         <Text margin-10 text70BL $textDefault>
           Disabled Slider
         </Text>
+        {/* @ts-expect-error */}
         <Incubator.Slider value={0.4} containerStyle={styles.container} disableRTL={disableRTL} disabled/>
       </View>
     );
@@ -110,6 +112,7 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(customSliderValue)}
         <Incubator.Slider
+          // @ts-expect-error
           ref={customSlider}
           onValueChange={onCustomValueChange}
           value={20}
@@ -137,6 +140,7 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(negativeSliderValue)}
         <Incubator.Slider
+          // @ts-expect-error
           ref={negativeSlider}
           onValueChange={onNegativeValueChange}
           value={-30}
@@ -159,6 +163,7 @@ const IncubatorSliderScreen = () => {
         <View marginH-20>
           {renderValuesBox(sliderMinValue, sliderMaxValue)}
           <Incubator.Slider
+            // @ts-expect-error
             ref={rangeSlider}
             useRange
             onRangeChange={onRangeChange}

package/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -6,6 +6,7 @@ import {renderMultipleSegmentOptions, renderBooleanOption, renderRadioGroup} fro
 const {Toast} = Incubator;
 
 const TOAST_ACTIONS = {
+  none: {},
   label: {label: 'Undo', onPress: () => console.warn('undo')},
   icon: {iconSource: Assets.icons.demo.plus, onPress: () => console.warn('add')}
 };
@@ -24,9 +25,9 @@ export default class ToastsScreen extends Component {
     toastPosition: 'bottom' as Incubator.ToastProps['position'],
     isCustomContent: false,
     showLoader: false,
-    selectedAction: '',
+    selectedAction: 'none' as keyof typeof TOAST_ACTIONS,
     hasAttachment: false,
-    selectedPreset: '' as Incubator.ToastProps['preset'],
+    selectedPreset: '' as Incubator.ToastProps['preset'] & '',
     isSwipeable: true
   };
 

package/src/screens/realExamples/Pinterest/index.tsx

@@ -21,11 +21,18 @@ const IMAGES = [
   'https://images.pexels.com/photos/3206153/pexels-photo-3206153.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
 ];
 
+// @ts-expect-error
 const GUTTER_SIZE = Spacings.page;
+// @ts-expect-error
 const COLUMN_SIZE = (Constants.screenWidth - 2 * Spacings.page - GUTTER_SIZE) / 2;
 
-class Pinterest extends Component {
-  constructor(props) {
+type ImageObject = {uri: string; width: number; height: number; aspectRatio: number};
+interface State {
+  images?: ImageObject[];
+}
+
+class Pinterest extends Component<{}, State> {
+  constructor(props: any) {
     super(props);
 
     this.state = {};
@@ -46,11 +53,11 @@ class Pinterest extends Component {
   }
 
   loadImages() {
-    const images = {};
+    const images: ImageObject[] = [];
 
     _.map(IMAGES, (image, index) => {
       Image.getSize(image,
-        (width, height) => {
+        (width: number, height: number) => {
           images[index] = {
             uri: image,
             width,
@@ -73,7 +80,8 @@ class Pinterest extends Component {
     });
   }
 
-  renderImage(image) {
+  
+  renderImage(image: ImageObject) {
     return (
       <Card
         key={image.uri}
@@ -98,7 +106,7 @@ class Pinterest extends Component {
     );
   }
 
-  renderColumn(columnIndex) {
+  renderColumn(columnIndex: number) {
     const {images} = this.state;
     return (
       <View marginR-page={columnIndex === 0}>

package/src/screens/realExamples/ProductPage/index.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {Assets, View, Text, Icon, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
+import {Assets, View, Text, Icon, Colors, Image, Button, Carousel, Picker, PickerValue} from 'react-native-ui-lib';
 import _ from 'lodash';
 
 const colorOptions: {[key: string]: {name: string; color: string}} = {
@@ -76,19 +76,27 @@ class Product extends Component {
             <Picker
               migrate
               value={selectedColor}
-              onChange={(value: string) => this.setState({selectedColor: value})}
-              trailingAccessory={<Icon {...{
-                width: 24,
-                height: 24,
-                backgroundColor: colorOptions[selectedColor].color,
-                borderRadius: 12
-              }} />}
+              onChange={(value: PickerValue) => this.setState({selectedColor: value})}
+              trailingAccessory={
+                <Icon
+                  {...{
+                    width: 24,
+                    height: 24,
+                    backgroundColor: colorOptions[selectedColor].color,
+                    borderRadius: 12
+                  }}
+                />
+              }
             >
               {_.map(colorOptions, (colorOption, colorKey) => {
                 return <Picker.Item key={colorKey} value={colorKey} label={colorOption.name}/>;
               })}
             </Picker>
-            <Picker migrate value={selectedSize} onChange={(value: string) => this.setState({selectedSize: value})}>
+            <Picker
+              migrate
+              value={selectedSize}
+              onChange={(value: PickerValue) => this.setState({selectedSize: value})}
+            >
               {_.map(sizeOptions, (sizeOption, sizeKey) => {
                 return <Picker.Item key={sizeKey} value={sizeKey} label={sizeOption.name}/>;
               })}

package/src/screens/realExamples/Twitter/index.tsx

@@ -90,7 +90,7 @@ class Twitter extends Component {
             ) : null}
             <View row style={{justifyContent: 'space-between', marginVertical: 10}}>
               {post.icons
-                ? post.icons.map((icnSource: any, index) => {
+                ? post.icons.map((icnSource: any, index: number) => {
                   return (
                     <Button
                       key={index}