unicorn-demo-app 7.3.3 → 7.3.4

package/package.json

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

package/src/screens/PlaygroundScreen.tsx

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
+import {StyleSheet} from 'react-native';
+import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class PlaygroundScreen extends Component {
   render() {

package/src/screens/componentScreens/ActionBarScreen.tsx

@@ -9,9 +9,13 @@ import collections from '../../assets/icons/collections.png';
 import richText from '../../assets/icons/richText.png';
 
 export default class ActionBarScreen extends Component {
-  state = {
-    currentPage: 0
-  };
+  constructor(props) {
+    super(props);
+
+    this.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, AvatarProps} from 'react-native-ui-lib';
+import {Avatar, AvatarHelper, View, Text, Colors, Typography} 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' as AvatarProps['badgePosition']
+    badgePosition: 'BOTTOM_RIGHT'
   },
 
   {
@@ -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' as AvatarProps['badgePosition']
+    badgePosition: 'BOTTOM_LEFT'
   },
   {
     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' as AvatarProps['badgePosition']
+    badgePosition: 'TOP_LEFT'
   },
   {
     title: 'Icon badge',
@@ -102,7 +102,7 @@ const examples = [
     title: 'With custom badge label',
     label: 'LD',
     backgroundColor: Colors.$backgroundDangerLight,
-    badgePosition: 'BOTTOM_RIGHT' as AvatarProps['badgePosition'],
+    badgePosition: 'BOTTOM_RIGHT',
     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,6 +14,7 @@ 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, ButtonProps} from 'react-native-ui-lib';
+import {Text, View, Assets, Constants, Button, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
 
 const ButtonSpace = 20;
 const plusIcon = Assets.getAssetByPath('icons.demo.plus');
@@ -9,12 +9,16 @@ const labelButton = {label: 'Animated'};
 const iconButton = {round: true};
 
 export default class ButtonsScreen extends Component {
-  state = {
-    backgroundColor: Colors.yellow30,
-    label: 'Button',
-    // outline: true,
-    buttonProps: labelButton as ButtonProps
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      backgroundColor: Colors.yellow30,
+      label: 'Button',
+      // outline: true,
+      buttonProps: labelButton
+    };
+  }
 
   changeProps = () => {
     if (this.state.buttonProps === labelButton) {
@@ -237,11 +241,9 @@ export default class ButtonsScreen extends Component {
                   style={{
                     width: 20,
                     height: 20,
-                    // @ts-expect-error
-                    backgroundColor: iconStyle[0]?.tintColor,
+                    backgroundColor: iconStyle[0].tintColor,
                     borderRadius: 10,
-                    // @ts-expect-error
-                    marginRight: iconStyle[0]?.marginRight
+                    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, Colors, ChipsInput} from 'react-native-ui-lib';
+import {View, Text, Card, TextField, Button, Colors, ChipsInput} from 'react-native-ui-lib'; //eslint-disable-line
 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,48 +1,61 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
-import {Assets, Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
+import {
+  Assets,
+  Colors,
+  Typography,
+  View,
+  Drawer,
+  Text,
+  Button,
+  Avatar,
+  Badge
+} 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 {
-  state = {
-    hideItem: false,
-    showRightItems: true,
-    fullSwipeRight: true,
-    showLeftItem: true,
-    fullSwipeLeft: true,
-    unread: true,
-    itemsTintColor: undefined,
-    bounciness: undefined,
-    itemsIconSize: undefined
-  };
+  constructor(props) {
+    super(props);
 
-  ref: React.Ref<typeof Drawer> = null;
+    this.state = {
+      hideItem: false,
+      showRightItems: true,
+      fullSwipeRight: true,
+      showLeftItem: true,
+      fullSwipeLeft: true,
+      unread: true
+    };
+  }
 
-  componentDidUpdate(_prevProps: any, prevState: typeof this.state) {
+  componentDidUpdate(prevProps, prevState) {
     if (this.state.hideItem && prevState.hideItem) {
       this.showItem();
     }
@@ -69,7 +82,7 @@ class DrawerScreen extends Component {
 
   toggleReadState = () => {
     this.setState({unread: !this.state.unread});
-  };
+  }
 
   showItem = () => {
     this.setState({hideItem: false});
@@ -77,37 +90,31 @@ 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();
     }
   };
@@ -142,7 +149,13 @@ 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>
@@ -179,14 +192,10 @@ 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>
@@ -207,12 +216,11 @@ class DrawerScreen extends Component {
       hideItem
     } = this.state;
 
-    const drawerProps: DrawerProps = {
+    const drawerProps = {
       itemsTintColor,
       itemsIconSize,
       bounciness,
-      // @ts-expect-error
-      ref: component => (this.ref = component),
+      ref: (component) => (this.ref = component),
       fullSwipeRight,
       onFullSwipeRight: this.deleteItem,
       fullSwipeLeft,
@@ -228,7 +236,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
       };
@@ -257,13 +265,22 @@ 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, GridViewProps} from 'react-native-ui-lib';
+import {View, Text, Image, Colors, Constants, Avatar, GridView, Card} 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) as GridViewProps['items'],
+        })))(products),
     pairs: _.flow(products => _.take(products, 2),
       (products: any[]) =>
         _.map(products, product => ({
@@ -102,7 +102,7 @@ class GridViewScreen extends Component {
               );
             }
           }
-        })))(products) as GridViewProps['items'],
+        })))(products),
 
     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, ViewStyle} from 'react-native';
+import {Alert} 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' as ViewStyle['alignSelf'],
+    targetPosition: 'flex-start',
     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: string | undefined, text: string, customOverlay?: JSX.Element) => {
+  getImageWithOverlay = (type, text, customOverylay) => {
     return (
       <View centerH>
         <Text grey10>{text}</Text>
-        <Image /* overlayColor={Colors.rgba(Colors.red40, 0.4)} */ style={styles.image} source={image} overlayType={type} customOverlayContent={customOverlay}/>
+        <Image /* overlayColor={Colors.rgba(Colors.red40, 0.4)} */ style={styles.image} source={image} overlayType={type} customOverlayContent={customOverylay}/>
       </View>
     );
   };

package/src/screens/componentScreens/PanDismissibleScreen.tsx

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

package/src/screens/componentScreens/PanListenerScreen.tsx

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

package/src/screens/componentScreens/ScrollBarScreen.tsx

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

package/src/screens/componentScreens/SliderScreen.tsx

@@ -1,16 +1,6 @@
 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 {
@@ -51,20 +41,17 @@ 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});
   };
@@ -75,11 +62,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});
@@ -91,7 +78,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
 
   getReverseStyle = () => {
     return Constants.isRTL && this.state.forceLTR && styles.ltr;
-  };
+  }
 
   renderDefaultSliderExample() {
     const {sliderValue, forceLTR} = this.state;
@@ -101,7 +88,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
@@ -112,7 +99,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
             step={1}
             containerStyle={styles.sliderContainer}
             disableRTL={forceLTR}
-            // @ts-expect-error
             ref={this.slider}
             onReset={this.onSliderReset}
           />
@@ -202,7 +188,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           maximumValue={100}
           step={1}
           disableRTL={forceLTR}
-          // @ts-expect-error
           ref={this.rangeSlider}
           onReset={this.onRangeSliderReset}
         />
@@ -258,7 +243,6 @@ 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,13 +39,14 @@ class TabControllerScreen extends Component<{}, State> {
       initialIndex: 0,
       selectedIndex: 0,
       key: Date.now(),
-      items: this.generateTabItems(false)
+      items: []
     };
+
+    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) => ({
@@ -57,7 +58,7 @@ class TabControllerScreen extends Component<{}, State> {
           trailingAccessory: index === 4 ? <Text marginL-4>{Assets.emojis.camera}</Text> : undefined
         })))(TABS);
 
-    const addItem: TabControllerItemProps & {key: string} = {
+    const addItem: TabControllerItemProps = {
       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, View, Text, Button, Keyboard, TextField, TextFieldRef} from 'react-native-ui-lib';
+import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, TextField, TextFieldRef} from 'react-native-ui-lib'; //eslint-disable-line
 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: number | string) => {
-    setYearsValue(value as number);
+  const onChange = useCallback((value) => {
+    setYearsValue(value);
   }, []);
 
   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: number | undefined = prevCompletedStepIndex;
+    let completedStepIndex = prevCompletedStepIndex;
     if (!prevCompletedStepIndex || prevCompletedStepIndex < prevActiveIndex) {
       completedStepIndex = prevActiveIndex;
     }
@@ -150,11 +150,10 @@ export default class WizardScreen extends Component<{}, State> {
           value={customerName}
           validate={'required'}
           validateOnChange
-          validationMessage="This is required"
+          errorMessage="This is required"
           onChangeText={this.onNameEntered}
         />
         {this.renderPrevButton()}
-        {/* @ts-expect-error */}
         {this.renderNextButton(_.isNil(customerName) || customerName.trim().length === 0)}
       </View>
     );
@@ -187,7 +186,7 @@ export default class WizardScreen extends Component<{}, State> {
   getStepState(index: number) {
     const {activeIndex, completedStepIndex} = this.state;
     let state = Wizard.States.DISABLED;
-    if (completedStepIndex && completedStepIndex > index - 1) {
+    if (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, ExpandableOverlayMethods, PickerMethods} from 'react-native-ui-lib';
+import {Colors, View, Text, Incubator, TouchableOpacity} from 'react-native-ui-lib'; //eslint-disable-line
 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<ExpandableOverlayMethods>();
-  expandablePickerRef = React.createRef<PickerMethods>();
+  expandableInputRef = React.createRef();
+  expandablePickerRef = React.createRef();
 
   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,7 +79,6 @@ 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}
@@ -98,7 +97,6 @@ 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>
     );
@@ -112,7 +110,6 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(customSliderValue)}
         <Incubator.Slider
-          // @ts-expect-error
           ref={customSlider}
           onValueChange={onCustomValueChange}
           value={20}
@@ -140,7 +137,6 @@ const IncubatorSliderScreen = () => {
         </Text>
         {renderValuesBox(negativeSliderValue)}
         <Incubator.Slider
-          // @ts-expect-error
           ref={negativeSlider}
           onValueChange={onNegativeValueChange}
           value={-30}
@@ -163,7 +159,6 @@ 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,7 +6,6 @@ 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')}
 };
@@ -25,9 +24,9 @@ export default class ToastsScreen extends Component {
     toastPosition: 'bottom' as Incubator.ToastProps['position'],
     isCustomContent: false,
     showLoader: false,
-    selectedAction: 'none' as keyof typeof TOAST_ACTIONS,
+    selectedAction: '',
     hasAttachment: false,
-    selectedPreset: '' as Incubator.ToastProps['preset'] & '',
+    selectedPreset: '' as Incubator.ToastProps['preset'],
     isSwipeable: true
   };
 

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

@@ -21,18 +21,11 @@ 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;
 
-type ImageObject = {uri: string; width: number; height: number; aspectRatio: number};
-interface State {
-  images?: ImageObject[];
-}
-
-class Pinterest extends Component<{}, State> {
-  constructor(props: any) {
+class Pinterest extends Component {
+  constructor(props) {
     super(props);
 
     this.state = {};
@@ -53,11 +46,11 @@ class Pinterest extends Component<{}, State> {
   }
 
   loadImages() {
-    const images: ImageObject[] = [];
+    const images = {};
 
     _.map(IMAGES, (image, index) => {
       Image.getSize(image,
-        (width: number, height: number) => {
+        (width, height) => {
           images[index] = {
             uri: image,
             width,
@@ -80,8 +73,7 @@ class Pinterest extends Component<{}, State> {
     });
   }
 
-  
-  renderImage(image: ImageObject) {
+  renderImage(image) {
     return (
       <Card
         key={image.uri}
@@ -106,7 +98,7 @@ class Pinterest extends Component<{}, State> {
     );
   }
 
-  renderColumn(columnIndex: number) {
+  renderColumn(columnIndex) {
     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, PickerValue} from 'react-native-ui-lib';
+import {Assets, View, Text, Icon, Colors, Image, Button, Carousel, Picker} from 'react-native-ui-lib';
 import _ from 'lodash';
 
 const colorOptions: {[key: string]: {name: string; color: string}} = {
@@ -76,27 +76,19 @@ class Product extends Component {
             <Picker
               migrate
               value={selectedColor}
-              onChange={(value: PickerValue) => this.setState({selectedColor: value})}
-              trailingAccessory={
-                <Icon
-                  {...{
-                    width: 24,
-                    height: 24,
-                    backgroundColor: colorOptions[selectedColor].color,
-                    borderRadius: 12
-                  }}
-                />
-              }
+              onChange={(value: string) => 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: PickerValue) => this.setState({selectedSize: value})}
-            >
+            <Picker migrate value={selectedSize} onChange={(value: string) => 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: number) => {
+                ? post.icons.map((icnSource: any, index) => {
                   return (
                     <Button
                       key={index}