react-native-text-ticker - npm Package Compare versions

Comparing version 0.18.0 to 0.19.0

index.js

@@ -43,3 +43,4 @@ import React, { PureComponent } from 'react'
     animationType:     PropTypes.string, //(values should be from AnimationType, 'auto', 'scroll', 'bounce')
-    scrollingSpeed:    PropTypes.number //Will be ignored if you set duration directly.
+    scrollingSpeed:    PropTypes.number, //Will be ignored if you set duration directly.
+    shouldAnimateTreshold: PropTypes.number
   }
@@ -59,3 +60,4 @@
     animationType:     'auto',
-    scrollingSpeed:    50
+    scrollingSpeed:    50,
+    shouldAnimateTreshold: 0
   }
@@ -70,3 +72,3 @@
     animating:    false,
-    contentFits:  false,
+    contentFits:  true,
     shouldBounce: false,
@@ -199,2 +201,3 @@ isScrolling:  false
   async calculateMetrics() {
+    const {shouldAnimateTreshold} = this.props
     return new Promise(async (resolve, reject) => {
@@ -223,3 +226,3 @@ try {
         this.textWidth = textWidth
-        this.distance = textWidth - containerWidth
+        this.distance = textWidth - containerWidth + shouldAnimateTreshold
 
@@ -242,3 +245,3 @@ this.setState({
     this.distance = null
-    this.setState({ contentFits: false })
+    this.setState({ contentFits: true })
   }
@@ -269,6 +272,15 @@
   render() {
-    const { style, children, repeatSpacer, scroll, ... props } = this.props
+    const { style, children, repeatSpacer, scroll, shouldAnimateTreshold, ... props } = this.props
     const { animating, contentFits, isScrolling } = this.state
+    const additionalContainerStyle = {
+      // This is useful for shouldAnimateTreshold only:
+      // we use flex: 1 to make the container take all the width available
+      // without this, if the children have a width smaller that this component's parent's,
+      // the container would have the width of the children (the text)
+      // In this case, it would be impossible to determine if animating is necessary based on the width of the container
+      // (contentFits in calculateMetrics() would always be true)
+      flex: shouldAnimateTreshold ? 1 : undefined
+    }
     return (
-      <View style={[styles.container]}>
+      <View style={[styles.container, additionalContainerStyle]}>
         <Text
@@ -322,2 +334,1 @@ {...props}
 })
-

package.json

 {
   "name": "react-native-text-ticker",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "React Native Text Ticker/Marquee Component",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -7,2 +7,4 @@ # react-native-text-ticker
 
+![examples](./example/media/example2.gif)
+
 ## Description
@@ -83,3 +85,5 @@ Inspired from the great [react-native-marquee](https://github.com/kyo504/react-native-marquee), this module acts similarly but with a few extra features and props:
 | easing          | function  | true     | Easing.ease | How the text scrolling animates. Additional options available from the [Easing module](https://facebook.github.io/react-native/docs/easing.html)
+| shouldAnimateTreshold | number | true  | 0        | If you have a view drawn over the text at the right (a fade-out gradient for instance) this should be set to the width of the overlaying view: ![examples](./example/media/example2.gif)
 
+
 ## Methods
@@ -86,0 +90,0 @@ These methods are optional and can be accessed by accessing the ref:

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

Improved metrics

Total package byte prevSize

16249

increased by6.92%

Lines of code

310

increased by4.03%

Number of lines in readme file

98

increased by4.26%

No dependency changes