react-native-animated-splash-screen - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

example/lib/AnimatedSplash.js

 /* @flow */
-import PropTypes from "prop-types";
-import * as React from "react";
-import { View, Animated, StatusBar, StyleSheet } from "react-native";
+import PropTypes from "prop-types"
+import * as React from "react"
+import { View, Animated, StatusBar, StyleSheet } from "react-native"
 import styles, {
   _solidBackground,
   _dynamicLogoStyle,
+  _dynamicCustomComponentStyle,
   _dynamicImageBackground,
-} from "./AnimatedSplash.style";
+} from "./AnimatedSplash.style"
 
@@ -14,3 +15,3 @@ class AnimatedSplash extends React.Component {
     isLoaded: false,
-  };
+  }
 
@@ -20,7 +21,7 @@ state = {
     loadingProgress: new Animated.Value(0),
-  };
+  }
 
   componentDidUpdate(prevProps) {
-    const { isLoaded } = this.props;
-    const { loadingProgress } = this.state;
+    const { isLoaded } = this.props
+    const { loadingProgress } = this.state
 
@@ -35,4 +36,4 @@ if (isLoaded && !prevProps.isLoaded) {
           animationDone: true,
-        });
-      });
+        })
+      })
     }
@@ -42,17 +43,17 @@ }
   renderChildren() {
-    const { children, preload, isLoaded } = this.props;
+    const { children, preload, isLoaded } = this.props
 
     if (preload || preload == null) {
-      return children;
+      return children
     } else {
       if (isLoaded) {
-        return children;
+        return children
       }
     }
 
-    return null;
+    return null
   }
 
   render() {
-    const { loadingProgress, animationDone } = this.state;
+    const { loadingProgress, animationDone } = this.state
     const {
@@ -65,3 +66,5 @@ logoImage,
       imageBackgroundResizeMode,
-    } = this.props;
+      translucent,
+      customComponent,
+    } = this.props
 
@@ -74,3 +77,3 @@ const opacityClearToVisible = {
       }),
-    };
+    }
 
@@ -86,3 +89,3 @@ const imageScale = {
       ],
-    };
+    }
 
@@ -98,3 +101,3 @@ const logoScale = {
       ],
-    };
+    }
 
@@ -107,3 +110,3 @@ const logoOpacity = {
       }),
-    };
+    }
 
@@ -119,7 +122,11 @@ const appScale = {
       ],
-    };
+    }
 
     return (
       <View style={[styles.container]}>
-        <StatusBar backgroundColor={backgroundColor || null} animated />
+        <StatusBar
+          backgroundColor={backgroundColor || null}
+          animated
+          translucent={translucent}
+        />
         {!animationDone && <View style={StyleSheet.absoluteFill} />}
@@ -148,12 +155,25 @@ <View style={styles.containerGlue}>
             <View style={[StyleSheet.absoluteFill, styles.logoStyle]}>
-              <Animated.Image
-                source={logoImage}
-                resizeMode={"contain"}
-                style={_dynamicLogoStyle(
-                  logoScale,
-                  logoOpacity,
-                  logoWidth,
-                  logoHeight
-                )}
-              />
+              {customComponent ? (
+                <Animated.View
+                  style={_dynamicCustomComponentStyle(
+                    logoScale,
+                    logoOpacity,
+                    logoWidth,
+                    logoHeight
+                  )}
+                >
+                  {customComponent}
+                </Animated.View>
+              ) : (
+                <Animated.Image
+                  source={logoImage}
+                  resizeMode={"contain"}
+                  style={_dynamicLogoStyle(
+                    logoScale,
+                    logoOpacity,
+                    logoWidth,
+                    logoHeight
+                  )}
+                />
+              )}
             </View>
@@ -163,3 +183,3 @@ )}
       </View>
-    );
+    )
   }
@@ -180,5 +200,7 @@ }
     PropTypes.object,
-  ]).isRequired,
-};
+  ]),
+  translucent: PropTypes.bool,
+  customComponent: PropTypes.element,
+}
 
-export default AnimatedSplash;
+export default AnimatedSplash

lib/AnimatedSplash.js

@@ -8,2 +8,3 @@ /* @flow */
   _dynamicLogoStyle,
+  _dynamicCustomComponentStyle,
   _dynamicImageBackground,
@@ -63,2 +64,3 @@ } from "./AnimatedSplash.style"
       translucent,
+      customComponent,
     } = this.props
@@ -145,12 +147,25 @@
             <View style={[StyleSheet.absoluteFill, styles.logoStyle]}>
-              <Animated.Image
-                source={logoImage}
-                resizeMode={"contain"}
-                style={_dynamicLogoStyle(
-                  logoScale,
-                  logoOpacity,
-                  logoWidth,
-                  logoHeight
-                )}
-              />
+              {customComponent ? (
+                <Animated.View
+                  style={_dynamicCustomComponentStyle(
+                    logoScale,
+                    logoOpacity,
+                    logoWidth,
+                    logoHeight
+                  )}
+                >
+                  {customComponent}
+                </Animated.View>
+              ) : (
+                <Animated.Image
+                  source={logoImage}
+                  resizeMode={"contain"}
+                  style={_dynamicLogoStyle(
+                    logoScale,
+                    logoOpacity,
+                    logoWidth,
+                    logoHeight
+                  )}
+                />
+              )}
             </View>
@@ -176,6 +191,7 @@ )}
     PropTypes.object,
-  ]).isRequired,
+  ]),
   translucent: PropTypes.bool,
+  customComponent: PropTypes.element,
 }
 
 export default AnimatedSplash

lib/AnimatedSplash.style.js

@@ -1,4 +0,4 @@
-import { StyleSheet, Dimensions } from "react-native";
+import { StyleSheet, Dimensions } from "react-native"
 
-const { width, height } = Dimensions.get("screen");
+const { width, height } = Dimensions.get("screen")
 
@@ -9,3 +9,3 @@ export const _solidBackground = (logoOpacity, backgroundColor) => [
   { backgroundColor: backgroundColor || null },
-];
+]
 
@@ -28,3 +28,3 @@ export const _dynamicImageBackground = (
   },
-];
+]
 
@@ -43,4 +43,20 @@ export const _dynamicLogoStyle = (
   },
-];
+]
 
+export const _dynamicCustomComponentStyle = (
+  logoScale,
+  logoOpacity,
+  logoWidth,
+  logoHeight
+) => [
+  logoScale,
+  logoOpacity,
+  {
+    width: logoWidth || 150,
+    height: logoHeight || 150,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+]
+
 export default {
@@ -62,2 +78,2 @@ container: {
   },
-};
+}

package.json

 {
   "name": "react-native-animated-splash-screen",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Animated splash screen component for React Native project.",

README.md

@@ -13,2 +13,3 @@ <h1 align="center">
 ![GitHub issues](https://img.shields.io/github/issues-raw/fabio-alss-freitas/react-native-animated-splash-screen)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green)](https://github.com/fabio-alss-freitas/react-native-animated-splash-screen/pulls)
 [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)
@@ -72,13 +73,14 @@
 
-| Name                   | Description                                                                                                                                                                                      | Type    | Required |                        Default Value                        |
-| :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------: | :---------------------------------------------------------: |
-| isLoaded               | Condition to show children component and finish the animation.                                                                                                                                   | Boolean |    ✓     |                                                             |
-| backgroundColor        | Splash screen background color.                                                                                                                                                                  | String  |          | ![#f00](https://placehold.it/15/f00/000000?text=+) `'#f00'` |
-| logoImage              | Splash screen logo image.                                                                                                                                                                        | Object  |    ✓     |                                                             |
-| logoWidth              | Logo image width in `px`.                                                                                                                                                                        | Number  |          |                             150                             |
-| logoHeight             | Logo image height in `px`.                                                                                                                                                                       | Number  |          |                             150                             |
-| children               | Children to render inside this component.                                                                                                                                                        | Node    |          |                           `null`                            |
-| preload                | Condition to load children component while wait isLoaded prop be True.                                                                                                                           | Boolean |          |                            true                             |
-| disableBackgroundImage | Disable the background image                                                                                                                                                                     | Boolean |          |                            false                            |
-| translucent            | When translucent is set to true, the app will draw under the status bar. Example: [here](https://github.com/fabio-alss-freitas/react-native-animated-splash-screen#example-of-translucent-prop)! | Boolean |          |                            false                            |
+| Name                   | Description                                                                                                                                                                                      | Type            | Required |                        Default Value                        |
+| :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :------: | :---------------------------------------------------------: |
+| isLoaded               | Condition to show children component and finish the animation.                                                                                                                                   | Boolean         |    ✓     |                            false                            |
+| backgroundColor        | Splash screen background color.                                                                                                                                                                  | String          |          | ![#f00](https://placehold.it/15/f00/000000?text=+) `'#f00'` |
+| logoImage              | Splash screen logo image.                                                                                                                                                                        | Object          |          |                           `null`                            |
+| logoWidth              | Logo image width in `px`.                                                                                                                                                                        | Number          |          |                             150                             |
+| logoHeight             | Logo image height in `px`.                                                                                                                                                                       | Number          |          |                             150                             |
+| children               | Children to render inside this component.                                                                                                                                                        | Node            |          |                           `null`                            |
+| preload                | Condition to load children component while wait isLoaded prop be True.                                                                                                                           | Boolean         |          |                            true                             |
+| disableBackgroundImage | Disable the background image                                                                                                                                                                     | Boolean         |          |                            false                            |
+| translucent            | When translucent is set to true, the app will draw under the status bar. Example: [here](https://github.com/fabio-alss-freitas/react-native-animated-splash-screen#example-of-translucent-prop)! | Boolean         |          |                            false                            |
+| customComponent        | Add a logo component instead of a logo image.                                                                                                                                                    | React Component |          |                           `null`                            |
 
@@ -209,14 +211,12 @@ ## Example with React Navigation
 
-<p align="center" >
-  <kbd>
-    <img src="https://i.postimg.cc/8C4wzxZ6/ezgif-3-938850179141.gif" title="Demo" float="left">
-    <br>
-    <em>translucent={true}</em>
-  </kbd>
-  <kbd>
-    <img src="https://i.postimg.cc/J4Bs7Jp3/ezgif-3-24968f8730b0.gif" title="Demo" float="left">
-    <br>
-    <em>translucent={false}</em>
-  </kbd>
-</p>
+<kbd>
+  <img src="https://i.postimg.cc/8C4wzxZ6/ezgif-3-938850179141.gif" title="Demo" float="left">
+  <br>
+  <em>translucent={true}</em>
+</kbd>
+<kbd>
+  <img src="https://i.postimg.cc/J4Bs7Jp3/ezgif-3-24968f8730b0.gif" title="Demo" float="left">
+  <br>
+  <em>translucent={false}</em>
+</kbd>
 
@@ -223,0 +223,0 @@ ## Author

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1000461

increased by0.19%

Lines of code

8673

increased by0.61%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes