Add customLoader and remove animatable (#1152)

* Add customLoader and remove animatable

* remove redundent view

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

Author: lidord-wix

demo/src/screens/componentScreens/LoadingScreen.js

@@ -1,40 +1,22 @@
 import React, {Component} from 'react';
-import {View as AnimatableView} from 'react-native-animatable';
-import {View, Text, LoaderScreen, Colors} from 'react-native-ui-lib';//eslint-disable-line
-
+import {View, Text, LoaderScreen, Colors} from 'react-native-ui-lib';
 export default class LoadingScreen extends Component {
-
   state = {
-    loading: true,
+    loading: true
   };
 
   componentDidMount() {
     setTimeout(() => {
-      this.setState({
-        animationConfig: {
-          animation: 'fadeOut',
-          onAnimationEnd: () => this.setState({loading: false}),
-        },
-      });
+      this.setState({loading: false});
     }, 2500);
   }
 
   render() {
-    const {loading, animationConfig} = this.state;
+    const {loading} = this.state;
     return (
       <View flex bg-orange70 center>
-        <Text text10>
-          Content Content Content
-        </Text>
-        {loading &&
-        <AnimatableView {...animationConfig}>
-          <LoaderScreen
-            color={Colors.blue30}
-            message="Loading..."
-            overlay
-          />
-        </AnimatableView>
-        }
+        <Text text10>Content Content Content</Text>
+        {loading && <LoaderScreen color={Colors.blue30} message="Loading..." overlay/>}
       </View>
     );
   }

src/components/loaderScreen/index.js

@@ -7,7 +7,6 @@ import {BaseComponent} from '../../commons';
 import View from '../../components/view';
 import Text from '../../components/text';
 
-
 /**
  * @description: Component that shows a full screen with an activity indicator
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/LoadingScreen.js
@@ -22,6 +21,10 @@ export default class LoaderScreen extends BaseComponent {
      * Color of the loading indicator
      */
     loaderColor: PropTypes.string,
+    /**
+     * Custom loader
+     */
+    customLoader: PropTypes.element,
     /**
      * Color of the loader background (only when passing 'overlay')
      */
@@ -44,18 +47,29 @@ export default class LoaderScreen extends BaseComponent {
   };
 
   render() {
-    const {message, messageStyle, loaderColor, overlay, backgroundColor, containerStyle, ...others} = this.props;
+    const {
+      message,
+      messageStyle,
+      loaderColor,
+      overlay,
+      backgroundColor,
+      customLoader,
+      containerStyle,
+      ...others
+    } = this.props;
 
     return (
       <View style={[overlay ? [styles.overlayContainer, {backgroundColor}] : styles.container, containerStyle]}>
         <View flex center>
-          <ActivityIndicator
-            size={'large'}
-            animating
-            color={loaderColor || (Constants.isIOS ? Colors.dark60 : Colors.primary)}
-            {...others}
-          />
-          {!overlay && message && <Text style={[styles.message, messageStyle]}>{message}</Text>}
+          {customLoader || (
+            <ActivityIndicator
+              size={'large'}
+              animating
+              color={loaderColor || (Constants.isIOS ? Colors.dark60 : Colors.primary)}
+              {...others}
+            />
+          )}
+          {message && <Text style={[styles.message, messageStyle]}>{message}</Text>}
         </View>
       </View>
     );