Major version 6.0.0 (#1535)

* Major version bump

* Rename components props interface (#1534)

* Renaming components props (<Component>PropTypes is now <Component>Props).

* generating types

* Removing from generatedTypes/index.d.ts file

* SelectableComponent - Removing deprecated component (#1536)

* SelectableComponent - removing component

* removing from types

* TagsInput - removing component (#1538)

* AnimatableManager - removing component (#1537)

* AnimatableManager - removing component and it usages

* remove import

* ThemeManager - removing 'setTheme' (#1539)

* CardImage - remove deprecated props (#1541)

* CardImage - removing deprecated props

* remove import

* KeyboardTrackingView (iOS)- changed 'useSafeArea' default to 'false' (#1543)

* PanningProviderDirection - removing type (use PanningDirections) (#1542)

* Avatar and Badge - props deprecation (#1540)

* Badge and Avatar - removing deprecated props and enum, and their usages

* fix demo screens

* removing Animatable refs

* fix prop description

* types

* react-native-animatable - removing dep (#1544)

* Colors new presets (#1546)

* change color palette to more accessible colors; Remove DARKS palette and replacing usage with GREYS

* update tests

* types

* pr comments

* TabBar - start deprecation and remove usages (#1545)

* TabBarItem - remove deprecated prop (#1554)

* StateScreen - remove deprecated props: 'source' (use 'imageSource'), 'testId' (use RN's 'testID'). (#1553)

* Dialog remove deprecated prop (#1550)

* Dialog - remove 'onModalDismissed' (use 'onDialogDismissed')

* remove 'migrate' prop from demos

* CardSection - remove 'source' (use 'imageSource') (#1551)

* Stepper new design (#1547)

* Stepper - new component design and API

* types

* export types

* fix parameter

* fix typings exports

* fix imports

* removing unused imports

* fix imports

* Progress bar new design (#1549)

* ProgressBar - new component design and API

* customElement demo

* borderRadius

* demo - texts style

* fix merge

* Remove old implementations of TabController (#1555)

* Avatar - revert 'imageSource' deletion (#1557)

* Avatar - restore warning on 'imageSource' deprecated prop

* V6 migration guide (#1558)

Co-authored-by: Ethan Sharabi <[email protected]>

Author: Inbal-Tish

demo/src/demoApp.js

@@ -1,7 +1,6 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {Navigation} from 'react-native-navigation';
-import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, Constants, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
+import {Constants, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
 import {registerScreens} from './screens';
 
 
@@ -27,21 +26,6 @@ import {registerScreens} from './screens';
 //   }
 // });
 
-// AnimatableManager.loadAnimationPresets({
-//   preset1: {
-//     animation: 'fadeIn',
-//     easing: 'ease-out-quint',
-//     duration: 1000,
-//     useNativeDriver: true,
-//   },
-//   preset2: {
-//     animation: 'fadeInLeft',
-//     easing: 'ease-out-expo',
-//     duration: 500,
-//     useNativeDriver: true,
-//   },
-// });
-
 // const customAnimationsDefinitions = {
 //   customAnimation1: {
 //     from: {opacity: 0, translateY: 20},
@@ -52,10 +36,6 @@ import {registerScreens} from './screens';
 //     to: {opacity: 1, translateY: 0},
 //   },
 // };
-// IMPORTANT! Make uilib's animations available globally for the app's use (option to pass adittional animation definitions)
-Animatable.initializeRegistryWithDefinitions(
-  AnimatableManager.loadAnimationDefinitions(/** customAnimationsDefinitions */)
-);
 
 function getDefaultNavigationStyle() {
   return {

demo/src/index.js

@@ -118,9 +118,6 @@ module.exports = {
       get TabControllerScreen() {
         return require('./screens/componentScreens/TabControllerScreen').default;
       },
-      get TabBarScreen() {
-        return require('./screens/componentScreens/TabBarScreen').default;
-      },
       get TextScreen() {
         return require('./screens/componentScreens/TextScreen').default;
       },
@@ -212,12 +209,6 @@ module.exports = {
       get CardScannerScreen() {
         return require('./screens/componentScreens/CardScannerScreen').default;
       },
-      get CardAnimationsScreen() {
-        return require('./screens/animationScreens/CardAnimationsScreen').default;
-      },
-      get ListAnimationsScreen() {
-        return require('./screens/animationScreens/ListAnimationsScreen').default;
-      },
       get ProgressBarScreen() {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },

demo/src/screens/DemoScreen.js

@@ -54,7 +54,7 @@ export default class DemoScreen extends Component {
     if (PropTypes.bool === prop) {
       return (
         <View row spread key={propId} paddingV-10>
-          <Text test70 dark60>
+          <Text test70 grey60>
             {propId}
           </Text>
           <Switch

demo/src/screens/MainScreen.js

@@ -207,10 +207,10 @@ class MainScreen extends Component {
           activeBackgroundColor={Colors.primary}
           activeOpacity={1}
         >
-          <Text style={[item.deprecate && styles.entryTextDeprecated]} dark10 text50>
+          <Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
             {item.title}
           </Text>
-          <Image source={chevronIcon} style={{tintColor: Colors.dark10}} supportRTL/>
+          <Image source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
         </TouchableOpacity>
       );
     } else {
@@ -284,7 +284,7 @@ class MainScreen extends Component {
         )}
         {showNoResults && (
           <View padding-20>
-            <Text dark40 text50>
+            <Text grey40 text50>
               Sorry, nothing was found. Try Button or something..
             </Text>
           </View>
@@ -304,7 +304,7 @@ const styles = StyleSheet.create({
   },
   searchField: {
     padding: 12,
-    backgroundColor: Colors.dark80,
+    backgroundColor: Colors.grey80,
     borderRadius: 8
   }
 });

demo/src/screens/MenuStructure.js

@@ -95,7 +95,6 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
-      {title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
       {
         title: 'withScrollEnabler',
         tags: 'scroll enabled withScrollEnabler',
@@ -144,8 +143,6 @@ export const navigationData = {
       {title: 'Animated Image', tags: 'animated image', screen: 'unicorn.components.AnimatedImageScreen'},
       {title: 'Haptic feedback', tags: 'haptic feedback', screen: 'unicorn.components.HapticScreen'},
       {title: 'ProgressiveImage', tags: 'progressive image cover overlay', screen: 'unicorn.components.ProgressiveImageScreen'},
-      {title: 'List Animations', tags: 'animated card', screen: 'unicorn.animations.ListAnimationsScreen'},
-      {title: 'Card Animations', tags: 'animated card', screen: 'unicorn.animations.CardAnimationsScreen'},
       {title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
       {title: 'Pan Dismissible', tags: 'pan swipe drag dismiss', screen: 'unicorn.components.PanDismissibleScreen'},
       {title: 'Pan Listener', tags: 'pan swipe drag listener', screen: 'unicorn.components.PanListenerScreen'},

demo/src/screens/PlaygroundScreen.tsx

@@ -6,7 +6,7 @@ import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslin
 export default class PlaygroundScreen extends Component {
   render() {
     return (
-      <View bg-dark80 flex padding-20>
+      <View bg-grey80 flex padding-20>
         <View marginT-20>
           <TextField placeholder="Placeholder" />
         </View>

demo/src/screens/SettingsScreen.js

@@ -83,9 +83,9 @@ class SettingsScreen extends Component {
             ))}
           </Picker>
 
-          <View style={{borderWidth: 1, borderColor: Colors.dark70, marginTop: 40}}>
+          <View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
             <View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
-              <Text text80 dark20>Current layout direction</Text>
+              <Text text80 grey20>Current layout direction</Text>
             </View>
             <View center margin-5 padding-10>
               <Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
@@ -96,14 +96,14 @@ class SettingsScreen extends Component {
                 value={isRTL}
                 onValueChange={this.onDirectionChange}
               />
-              <Text text80 dark20>Force RTL</Text>
+              <Text text80 grey20>Force RTL</Text>
             </View>
           </View>
 
           {extraSettingsUI?.()}
         </View>
 
-        <Text text30 dark10>Settings</Text>
+        <Text text30 grey10>Settings</Text>
         <Toast visible={showRefreshMessage} position="bottom" message="Refresh the app!"/>
       </View>
     );
@@ -112,8 +112,8 @@ class SettingsScreen extends Component {
 
 const styles = StyleSheet.create({
   block: {
-    borderColor: Colors.dark70,
-    backgroundColor: Colors.dark80
+    borderColor: Colors.grey70,
+    backgroundColor: Colors.grey80
   }
 });