unicorn-demo-app 6.13.3 → 6.14.0

package/package.json

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

package/src/screens/ExampleScreenPresenter.tsx

@@ -22,7 +22,7 @@ interface RadioGroupOptions {
   useValueAsLabel?: boolean;
 }
 
-export function renderHeader(title: string, others: TextProps) {
+export function renderHeader(title: string, others?: TextProps) {
   return (
     <Text text30 $textDefault {...others}>
       {title}

package/src/screens/MainScreen.js

@@ -8,17 +8,17 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {
   Assets,
   Colors,
+  Spacings,
   View,
   Text,
+  TextField,
   TouchableOpacity,
   Icon,
   Button,
-  TabController,
-  Incubator
+  TabController
 } from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
 
-const {TextField} = Incubator;
 const settingsIcon = require('../assets/icons/settings.png');
 const chevronIcon = require('../assets/icons/chevronRight.png');
 
@@ -56,8 +56,6 @@ class MainScreen extends Component {
       filteredNavigationData: data
     };
 
-    this.filterExplorerScreens = _.throttle(this.filterExplorerScreens, 300);
-
     Navigation.events().bindComponent(this);
   }
 
@@ -119,11 +117,11 @@ class MainScreen extends Component {
     }, 0);
   };
 
-  updateSearch = filterText => {
+  updateSearch = _.throttle(filterText => {
     this.setState({filterText}, () => {
       this.filterExplorerScreens();
     });
-  };
+  }, 800);
 
   clearSearch = () => {
     this.updateSearch('');
@@ -164,8 +162,8 @@ class MainScreen extends Component {
     return (
       <TextField
         migrate
+        preset={null}
         ref={r => (this.input = r)}
-        value={filterText}
         testID="uilib.search_for_component"
         placeholder="Search for your component..."
         onChangeText={this.updateSearch}
@@ -178,9 +176,9 @@ class MainScreen extends Component {
         text70
         trailingAccessory={
           filterText ? (
-            <Button link iconSource={Assets.icons.demo.close} grey10 onPress={this.clearSearch}/>
+            <Button link iconSource={Assets.icons.demo.close} $iconDefault onPress={this.clearSearch}/>
           ) : (
-            <Icon source={Assets.icons.demo.search}/>
+            <Icon tintColor={Colors.$iconDefault} source={Assets.icons.demo.search}/>
           )
         }
       />
@@ -204,7 +202,7 @@ class MainScreen extends Component {
           paddingV-s2
           onPress={() => this.openScreen(item)}
           onLongPress={() => this.setDefaultScreen(item)}
-          activeBackgroundColor={Colors.primary}
+          activeBackgroundColor={Colors.$backgroundPrimaryHeavy}
           activeOpacity={1}
         >
           <Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
@@ -230,7 +228,7 @@ class MainScreen extends Component {
         keyboardShouldPersistTaps="always"
         data={flatData}
         contentContainerStyle={{paddingTop: 20}}
-        keyExtractor={(item, index) => index.toString()}
+        keyExtractor={(_item, index) => index.toString()}
         renderItem={this.renderItem}
       />
     );
@@ -299,12 +297,13 @@ const styles = StyleSheet.create({
     textDecorationLine: 'line-through'
   },
   searchContainer: {
-    padding: 16,
-    paddingBottom: 0
+    padding: Spacings.s4,
+    paddingBottom: 0,
+    marginBottom: Spacings.s2
   },
   searchField: {
-    padding: 12,
-    backgroundColor: Colors.grey80,
+    padding: Spacings.s3,
+    backgroundColor: Colors.$backgroundNeutralLight,
     borderRadius: 8
   }
 });

package/src/screens/componentScreens/ActionBarScreen.tsx

@@ -19,12 +19,12 @@ export default class ActionBarScreen extends Component {
 
   render() {
     return (
-      <View flex bg-grey80>
+      <View flex bg-$backgroundNeutralLight>
         <PageControl
           containerStyle={[styles.pageControl, styles.absoluteContainer]}
           numOfPages={6}
           currentPage={this.state.currentPage}
-          color={Colors.grey10}
+          color={Colors.$backgroundInverted}
           size={15}
         />
         <Carousel
@@ -35,7 +35,7 @@ export default class ActionBarScreen extends Component {
           <View style={styles.page}>
             <ActionBar
               actions={[
-                {label: 'Delete', onPress: () => Alert.alert('delete'), red30: true},
+                {label: 'Delete', onPress: () => Alert.alert('delete'), $textDangerLight: true},
                 {label: 'Replace Photo', onPress: () => Alert.alert('replace photo')},
                 {label: 'Edit', onPress: () => Alert.alert('edit')}
               ]}
@@ -44,17 +44,17 @@ export default class ActionBarScreen extends Component {
 
           <View style={styles.page}>
             <ActionBar
-              backgroundColor={Colors.primary}
+              backgroundColor={Colors.$backgroundPrimaryHeavy}
               actions={[
-                {label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
-                {label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},
-                {label: 'Duplicate', onPress: () => Alert.alert('duplicate'), white: true}
+                {label: 'Hide', onPress: () => Alert.alert('hide'), $textDefaultLight: true},
+                {label: 'Add Discount', onPress: () => Alert.alert('add discount'), $textDefaultLight: true},
+                {label: 'Duplicate', onPress: () => Alert.alert('duplicate'), $textDefaultLight: true}
               ]}
             />
           </View>
 
           <View style={styles.page}>
-            <ActionBar actions={[{label: 'Delete', red30: true}, {label: 'Edit'}]}/>
+            <ActionBar actions={[{label: 'Delete', $textDangerLight: true}, {label: 'Edit'}]}/>
           </View>
 
           <View style={styles.page}>
@@ -65,9 +65,9 @@ export default class ActionBarScreen extends Component {
             <ActionBar
               centered
               actions={[
-                {label: 'Bold', labelStyle: {color: Colors.grey10, ...Typography.text60, fontWeight: '400'}},
-                {label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.grey10}},
-                {label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.grey10}}
+                {label: 'Bold', labelStyle: {color: Colors.$textDefault, ...Typography.text60, fontWeight: '400'}},
+                {label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.$textDefault}},
+                {label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.$textDefault}}
               ]}
             />
           </View>

package/src/screens/componentScreens/AvatarsScreen.tsx

@@ -65,7 +65,7 @@ const examples = [
       icon: star,
       size: 14,
       borderWidth: 1.5,
-      borderColor: Colors.$outlineLight,
+      borderColor: Colors.$outlineInverted,
       iconStyle: {backgroundColor: Colors.$backgroundWarningHeavy}
     }
   },
@@ -107,7 +107,7 @@ const examples = [
       label: '+2',
       size: 24,
       borderWidth: 1.5,
-      borderColor: Colors.$outlineLight
+      borderColor: Colors.$outlineInverted
     }
   }
 ];

package/src/screens/componentScreens/CardsScreen.tsx

@@ -97,7 +97,6 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
         style={{marginBottom: 15}}
         onPress={() => {}}
         borderRadius={borderRadius}
-        useNative
         bg-$backgroundElevated
         activeOpacity={1}
         activeScale={isImageOnLeft ? 0.96 : 1.04}
@@ -136,7 +135,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
 
   renderCoupon = (cardProps: CardProps) => {
     return (
-      <Card {...cardProps} flex height={160} onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
+      <Card {...cardProps} flex height={160} onPress={() => {}} activeOpacity={1} activeScale={0.96}>
         <Card.Section
           bg-$backgroundDangerHeavy
           padding-20
@@ -169,7 +168,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
 
   renderComplexImage = (cardProps: CardProps, image: React.ReactNode) => {
     return (
-      <Card {...cardProps} flex marginV-10 onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
+      <Card {...cardProps} flex marginV-10 onPress={() => {}} activeOpacity={1} activeScale={0.96}>
         {image}
         <Card.Section
           bg-$backgroundElevated

package/src/screens/componentScreens/CarouselScreen.tsx

@@ -87,7 +87,7 @@ class CarouselScreen extends Component<Props, State> {
 
     return (
       <ScrollView showsVerticalScrollIndicator={false}>
-        <Text h1 margin-20>
+        <Text h1 margin-20 $textDefault>
           Carousel
         </Text>
 
@@ -115,7 +115,6 @@ class CarouselScreen extends Component<Props, State> {
           containerStyle={{height: 160}}
           pageControlPosition={Carousel.pageControlPositions.UNDER}
           pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
-          // showCounter
           allowAccessibleLayout
         >
           {_.map([...Array(numberOfPagesShown)], (item, index) => (
@@ -143,6 +142,7 @@ class CarouselScreen extends Component<Props, State> {
               containerStyle: styles.loopCarousel
             }}
             pageControlPosition={Carousel.pageControlPositions.OVER}
+            showCounter
           >
             {IMAGES.map((image, i) => {
               return (

package/src/screens/componentScreens/FaderScreen.tsx

@@ -18,7 +18,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
   renderItem = (index: number) => {
     return (
       <View key={index} style={styles.item}>
-        <Text>{index + 1}</Text>
+        <Text $textDefault>{index + 1}</Text>
       </View>
     );
   };
@@ -31,7 +31,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
         : !scrollReachedProps.isScrollAtStart;
 
     return (
-      <View margin-10>
+      <View padding-10>
         {renderHeader('Fader', {'marginB-10': true})}
         <View center>
           <View style={styles.container}>
@@ -69,8 +69,8 @@ const styles = StyleSheet.create({
   item: {
     height: itemHeight,
     width: itemWidth,
-    backgroundColor: Colors.grey60,
-    borderColor: Colors.grey40,
+    backgroundColor: Colors.$backgroundDefault,
+    borderColor: Colors.$outlineDisabled,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center'

package/src/screens/componentScreens/PickerScreen.tsx

@@ -13,7 +13,9 @@ import {
   PanningProvider,
   Typography,
   PickerProps,
-  DialogProps
+  PickerMethods,
+  DialogProps,
+  Button
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import {longOptions} from './PickerScreenLongOptions';
@@ -38,6 +40,7 @@ const filters = [
 ];
 
 export default class PickerScreen extends Component {
+  picker = React.createRef<PickerMethods>();
   state = {
     itemsCount: 1,
     // language: {value: 'java', label: 'Java'},
@@ -260,6 +263,8 @@ export default class PickerScreen extends Component {
 
           <Picker
             migrate
+            // @ts-expect-error
+            ref={this.picker}
             migrateTextField
             label="Language"
             placeholder="Favorite Language"
@@ -270,6 +275,7 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             marginT-s4
+            enableErrors={false}
             // mode={Picker.modes.MULTI}
             // useNativePicker
           >
@@ -277,6 +283,12 @@ export default class PickerScreen extends Component {
               <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
+          <Button
+            label="Open Picker Manually"
+            link
+            style={{alignSelf: 'flex-start'}}
+            onPress={() => this.picker.current?.openExpandable?.()}
+          />
         </View>
       </ScrollView>
     );

package/src/screens/componentScreens/ProgressBarScreen.tsx

@@ -41,14 +41,14 @@ export default class ProgressBarScreen extends Component {
 
     return (
       <ScrollView>
-        <View flex bg-grey80 spread paddingV-18>
+        <View flex bg-$backgroundNeutralLight spread paddingV-18>
           <View paddingL-18 marginB-18>
-            <Text text40 grey10>
+            <Text $textDefault text40>
               ProgressBar
             </Text>
           </View>
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             Default
           </Text>
           <ProgressBar
@@ -56,7 +56,7 @@ export default class ProgressBarScreen extends Component {
             style={styles.progressBar}
           />
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             FullWidth
           </Text>
           <ProgressBar
@@ -65,7 +65,7 @@ export default class ProgressBarScreen extends Component {
             fullWidth
           />
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             Styled
           </Text>
           <ProgressBar
@@ -74,7 +74,7 @@ export default class ProgressBarScreen extends Component {
             progressColor={Colors.purple70}
           />
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             Custom Element
           </Text>
           <ProgressBar

package/src/screens/componentScreens/RadioButtonScreen.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {TouchableOpacity, ScrollView} from 'react-native';
+import {TouchableOpacity, ScrollView, StyleSheet} from 'react-native';
 import {Assets, Colors, View, Text, RadioButton, RadioGroup} from 'react-native-ui-lib'; //eslint-disable-line
 const starIcon = require('../../assets/icons/star.png');
 
@@ -11,10 +11,10 @@ const COLORS = {
 
 export default class RadioButtonScreen extends Component {
   static colors = COLORS;
-  
+
   constructor(props) {
     super(props);
-    
+
     this.state = {
       color: undefined,
       messageType: undefined,
@@ -89,10 +89,10 @@ export default class RadioButtonScreen extends Component {
             <Text marginB-20 text60 $textDefault>
               Alignments
             </Text>
-            {this.renderRadioButtonWithImageAndText('right-icon', 'Text on right')}
-            {this.renderRadioButtonWithImageAndText('left-icon', 'Text on left', true)}
-            {this.renderRadioButton('left-content', 'Content on left', true)}
-            {this.renderRadioButton('right-content', 'Content on right', {contentOnRight: true})}
+            {this.renderRadioButtonWithImageAndText('left-icon', 'Text on right')}
+            {this.renderRadioButtonWithImageAndText('right-icon', 'Text on left', true)}
+            {this.renderRadioButton('right-content', 'Content on right', true)}
+            {this.renderRadioButton('left-content', 'Content on left', {contentOnLeft: true})}
             <Text marginT-10>You chose: {this.state.textSide}</Text>
           </RadioGroup>
 
@@ -116,6 +116,8 @@ export default class RadioButtonScreen extends Component {
               onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
               label="Individual Radio Button (with style)"
               labelStyle={{fontSize: 16, fontWeight: 'bold'}}
+              contentOnLeft
+              containerStyle={styles.contentOnLeft}
             />
           </View>
           <TouchableOpacity
@@ -124,7 +126,12 @@ export default class RadioButtonScreen extends Component {
             accessible={false}
           >
             <View row centerV>
-              <RadioButton selected={this.state.individualValue} label="Individual Radio Button (wrapped)"/>
+              <RadioButton
+                contentOnLeft
+                containerStyle={styles.contentOnLeft}
+                selected={this.state.individualValue}
+                label="Individual Radio Button (wrapped)"
+              />
             </View>
           </TouchableOpacity>
           <View row centerV marginT-10>
@@ -133,6 +140,8 @@ export default class RadioButtonScreen extends Component {
               selected={this.state.disabledValue}
               onPress={() => this.setState({disabledValue: !this.state.disabledValue})}
               label="Disabled Radio Button"
+              contentOnLeft
+              containerStyle={styles.contentOnLeft}
             />
           </View>
           <View row centerV marginT-10>
@@ -141,6 +150,8 @@ export default class RadioButtonScreen extends Component {
               selected={this.state.disabledSelectedValue}
               onPress={() => this.setState({disabledSelectedValue: !this.state.disabledSelectedValue})}
               label="Disabled Selected Radio Button"
+              contentOnLeft
+              containerStyle={styles.contentOnLeft}
             />
           </View>
         </ScrollView>
@@ -148,3 +159,10 @@ export default class RadioButtonScreen extends Component {
     );
   }
 }
+
+const styles = StyleSheet.create({
+  contentOnLeft: {
+    flex: 1,
+    justifyContent: 'space-between'
+  }
+});

package/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -38,17 +38,17 @@ const SegmentedControlScreen = () => {
           />
           <SegmentedControl
             containerStyle={styles.container}
-            activeColor={Colors.red30}
+            activeColor={Colors.$textDangerLight}
             segments={segments.third}
           />
           <SegmentedControl
             containerStyle={styles.container}
             segments={segments.forth}
-            activeColor={Colors.grey10}
+            activeColor={Colors.$textDefault}
             borderRadius={BorderRadiuses.br20}
-            backgroundColor={Colors.grey10}
-            activeBackgroundColor={Colors.grey40}
-            inactiveColor={Colors.grey70}
+            backgroundColor={Colors.$backgroundInverted}
+            activeBackgroundColor={Colors.$backgroundNeutralIdle}
+            inactiveColor={Colors.$textDisabled}
           />
         </View>
         <SegmentedControl
@@ -60,7 +60,7 @@ const SegmentedControlScreen = () => {
           segments={segments.sixth}
         />
       </View>
-      <Text text40 grey10>
+      <Text text40 $textDefault>
         Segmented Control
       </Text>
     </View>

package/src/screens/componentScreens/SkeletonViewScreen.tsx

@@ -14,7 +14,6 @@ import {
   View,
   Colors
 } from 'react-native-ui-lib';
-// @ts-expect-error
 import * as ExampleScreenPresenter from '../ExampleScreenPresenter';
 
 const AVATAR_SIZE = 48;
@@ -29,9 +28,10 @@ const NUMBER_OF_ITEMS_TO_SHOW = 10;
 
 const DATA_TYPE = {
   List: 'list',
+  Content: 'content',
   Images: 'images',
   Avatars: 'avatars',
-  Content: 'content'
+  Custom: 'custom'
 };
 
 const LIST_TYPE = {
@@ -152,7 +152,7 @@ export default class SkeletonViewScreen extends Component {
         <Text>Verified</Text>
       </View>
     );
-  }
+  };
 
   renderListItemsData = (customValue?: any) => {
     const {isLarge, showEndContent} = this.state;
@@ -162,13 +162,7 @@ export default class SkeletonViewScreen extends Component {
       <React.Fragment>
         {_.times(NUMBER_OF_ITEMS_TO_SHOW, index => {
           return (
-            <ListItem
-              key={index}
-              activeBackgroundColor={Colors.grey60}
-              activeOpacity={0.3}
-              height={90}
-              onPress={() => Alert.alert(`pressed on order #${index + 1}`)}
-            >
+            <ListItem key={index} height={90} onPress={() => Alert.alert(`pressed on order #${index + 1}`)}>
               {hasAvatar && this.renderAvatar()}
               {hasThumbnail && this.renderThumbnail()}
               <ListItem.Part middle column containerStyle={[styles.border, {marginLeft: 18}]}>
@@ -247,16 +241,17 @@ export default class SkeletonViewScreen extends Component {
     const imageSize = this.getImageSize();
 
     return (
-      <View row spread margin-page>
-        <SkeletonView
-          width={imageSize}
-          height={imageSize}
-          showContent={isDataAvailable}
-          renderContent={this.renderImagesData}
-          accessibilityLabel={'Loading image'}
-          times={IMAGE_URIS.length}
-        />
-      </View>
+      <SkeletonView
+        row
+        spread
+        margin-page
+        width={imageSize}
+        height={imageSize}
+        showContent={isDataAvailable}
+        renderContent={this.renderImagesData}
+        accessibilityLabel={'Loading image'}
+        times={IMAGE_URIS.length}
+      />
     );
   };
 
@@ -317,6 +312,40 @@ export default class SkeletonViewScreen extends Component {
     );
   };
 
+  renderCustom = () => {
+    const {isDataAvailable} = this.state;
+
+    return (
+      <View margin-20>
+        <View row spread marginB-8>
+          <SkeletonView
+            width={120}
+            height={20}
+            borderRadius={5}
+            showContent={isDataAvailable}
+            renderContent={() => <Text text60BO>Lorem Ipsum</Text>}
+          />
+          <SkeletonView
+            width={40}
+            height={10}
+            borderRadius={5}
+            style={{marginTop: 5}}
+            showContent={isDataAvailable}
+            renderContent={() => <Button label={'Info'} size={Button.sizes.small} link/>}
+          />
+        </View>
+        <SkeletonView
+          shimmerStyle={{width: '100%' /* , height: 30 */}}
+          height={10}
+          borderRadius={5}
+          showContent={isDataAvailable}
+          renderContent={() => <Text>Lorem Ipsum is simply dummy text of the industry.</Text>}
+          colors={[Colors.red70, Colors.red50, Colors.red70]}
+        />
+      </View>
+    );
+  };
+
   renderContent = () => {
     const {isDataAvailable} = this.state;
     return (
@@ -345,12 +374,14 @@ export default class SkeletonViewScreen extends Component {
           case LIST_TYPE.Thumbnail:
             return this.renderListItemsWithThumbnail();
         }
+      case DATA_TYPE.Content:
+        return this.renderContent();
       case DATA_TYPE.Images:
         return this.renderImages();
       case DATA_TYPE.Avatars:
         return this.renderAvatarStrip();
-      case DATA_TYPE.Content:
-        return this.renderContent();
+      case DATA_TYPE.Custom:
+        return this.renderCustom();
     }
   };
 
@@ -385,7 +416,7 @@ const styles = StyleSheet.create({
     paddingLeft: Spacings.s5
   },
   avatar: {
-    marginHorizontal: 14
+    marginVertical: 8
   },
   image: {
     flex: 1,

package/src/screens/componentScreens/SliderScreen.tsx

@@ -196,7 +196,7 @@ const styles = StyleSheet.create({
     height: 20,
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: Colors.$outlineNeutral
+    borderColor: Colors.$outlineDefault
   },
   group: {
     backgroundColor: Colors.$backgroundNeutralMedium,

package/src/screens/componentScreens/StackAggregatorScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Button, StackAggregator} from 'react-native-ui-lib';
+import {Colors, View, Text, Button, StackAggregator} from 'react-native-ui-lib';
 
 
 const contents = [
@@ -32,7 +32,7 @@ export default class StackAggregatorScreen extends Component {
 
   render() {
     return (
-      <ScrollView bg-grey80 keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false}>
+      <ScrollView keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false}>
         <Text center grey40 text90 marginT-20>Thu, 10 Dec, 11:29</Text>
         <StackAggregator
           containerStyle={{marginTop: 12}}
@@ -48,7 +48,7 @@ export default class StackAggregatorScreen extends Component {
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}
           collapsed={false}
-          // contentContainerStyle={{backgroundColor: Colors.red30}}
+          contentContainerStyle={{backgroundColor: Colors.red70}}
           // itemBorderRadius={10}
           // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
         >

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

@@ -174,7 +174,7 @@ class TabControllerScreen extends Component<{}, State> {
             // iconColor={'green'}
             // selectedIconColor={'blue'}
             enableShadow
-            activeBackgroundColor={Colors.blue60}
+            activeBackgroundColor={Colors.$backgroundGeneralLight}
             centerSelected={centerSelected}
           >
             {/* {this.renderTabItems()} */}

package/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -110,7 +110,7 @@ export default class ToastsScreen extends Component {
         // backgroundColor={Colors.$backgroundSuccess}
         // icon={Assets.icons.demo.add}
         // iconColor={Colors.$backgroundSuccessHeavy}
-        // style={{borderWidth: 1, borderColor: Colors.$outlineNeutralMedium}}
+        // style={{borderWidth: 1, borderColor: Colors.$outlineDisabled}}
         // messageStyle={Typography.text80BO}
       >
         {isCustomContent ? this.renderCustomContent() : undefined}