Animation not working on React Native 0.77

[huanguolin]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-text-ticker/index.js b/node_modules/react-native-text-ticker/index.js
index 0a28c78..3dec845 100644
--- a/node_modules/react-native-text-ticker/index.js
+++ b/node_modules/react-native-text-ticker/index.js
@@ -6,12 +6,9 @@ import {
   Text,
   View,
   ScrollView,
-  NativeModules,
-  findNodeHandle,
   I18nManager
 } from 'react-native'
 
-const { UIManager } = NativeModules
 
 export const TextTickAnimationType = Object.freeze({
   auto: 'auto',
@@ -202,6 +199,10 @@ export default class TextMarquee extends PureComponent {
     this.setState({ animating: true })
     this.setTimeout(async () => {
       await this.calculateMetrics()
+
+      // Wait for 'this.setState' to update 'this.state.contentFits' in 'calculateMetrics()'.
+      await new Promise(resolve => setTimeout(resolve, 100))
+
       if (!this.state.contentFits) {
         const {onScrollStart} = this.props
         if(onScrollStart && typeof onScrollStart === "function") {
@@ -233,15 +234,13 @@ export default class TextMarquee extends PureComponent {
       try {
         const measureWidth = node =>
           new Promise(async (resolve, reject) => {
-            // nodehandle is not always there, causes crash. modified to check..
-            const nodeHandle = findNodeHandle(node);
-            if (nodeHandle) {
-              UIManager.measure(nodeHandle, (x, y, w) => {
+            if (node) {
+              node.measure((x, y, w) => {
                 // console.log('Width: ' + w)
                 return resolve(w)
               })
             } else {
-              return reject('nodehandle_not_found');
+              return reject('node_not_found');
             }
           });
         const [containerWidth, textWidth] = await Promise.all([

This issue body was partially generated by patch-package.

[jewelry-store-bot-account]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-text-ticker/index.js b/node_modules/react-native-text-ticker/index.js index 0a28c78..3dec845 100644 --- a/node_modules/react-native-text-ticker/index.js +++ b/node_modules/react-native-text-ticker/index.js @@ -6,12 +6,9 @@ import { Text, View, ScrollView,

• NativeModules,
• findNodeHandle, I18nManager } from 'react-native'

-const { UIManager } = NativeModules

export const TextTickAnimationType = Object.freeze({ auto: 'auto', @@ -202,6 +199,10 @@ export default class TextMarquee extends PureComponent { this.setState({ animating: true }) this.setTimeout(async () => { await this.calculateMetrics() +

•  // Wait for 'this.setState' to update 'this.state.contentFits' in 'calculateMetrics()'.
  

•  await new Promise(resolve => setTimeout(resolve, 100))
  

•  if (!this.state.contentFits) {
     const {onScrollStart} = this.props
     if(onScrollStart && typeof onScrollStart === "function") {
  

@@ -233,15 +234,13 @@ export default class TextMarquee extends PureComponent { try { const measureWidth = node => new Promise(async (resolve, reject) => {

•        // nodehandle is not always there, causes crash. modified to check..
  

•        const nodeHandle = findNodeHandle(node);
  

•        if (nodeHandle) {
  

•          UIManager.measure(nodeHandle, (x, y, w) => {
  

•        if (node) {
  

•          node.measure((x, y, w) => {
             // console.log('Width: ' + w)
             return resolve(w)
           })
         } else {
  

•          return reject('nodehandle_not_found');
  

•          return reject('node_not_found');
         }
       });
     const [containerWidth, textWidth] = await Promise.all([
  

This issue body was partially generated by patch-package.

great work, thank you!

[SwarnaliRoy94]

worked in ios for me ! thanks!

[hamannjames]

Bumping this. @huanguolin are you planning on making a PR with this fix? It should be in core

[huanguolin]

Bumping this. @huanguolin are you planning on making a PR with this fix? It should be in core

pr: https://github.com/deanhet/react-native-text-ticker/pull/130