Error: TypeError: undefined is not an object (evaluating '_reactNative.Text.propTypes.style') and useNativeDriver warning

[YogeshBhatt]

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-animated-ellipsis/dist/AnimatedEllipsis.js b/node_modules/react-native-animated-ellipsis/dist/AnimatedEllipsis.js
index 908626b..8d5d214 100644
--- a/node_modules/react-native-animated-ellipsis/dist/AnimatedEllipsis.js
+++ b/node_modules/react-native-animated-ellipsis/dist/AnimatedEllipsis.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Text, Animated, View, StyleSheet } from 'react-native';
+import { Text, Animated, View, StyleSheet, TextPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 
 export default class AnimatedEllipsis extends Component {
@@ -47,7 +47,8 @@ export default class AnimatedEllipsis extends Component {
 
     Animated.timing(this._animation_state.dot_opacities[which_dot], {
       toValue: this._animation_state.target_opacity,
-      duration: this.props.animationDelay
+      duration: this.props.animationDelay,
+      useNativeDriver: true,
     }).start(this.animate_dots.bind(this, next_dot));
   }
 
@@ -71,7 +72,7 @@ AnimatedEllipsis.propTypes = {
   numberOfDots: PropTypes.number,
   animationDelay: PropTypes.number,
   minOpacity: PropTypes.number,
-  style: Text.propTypes.style
+  style: TextPropTypes.style
 };
 AnimatedEllipsis.defaultProps = {
   numberOfDots: 3,

This issue body was partially generated by patch-package.

[paramsiddharth]

I am using Expo and this worked for me:

diff --git a/node_modules/react-native-animated-ellipsis/dist/AnimatedEllipsis.js b/node_modules/react-native-animated-ellipsis/dist/AnimatedEllipsis.js
index 908626b..2123d8c 100644
--- a/node_modules/react-native-animated-ellipsis/dist/AnimatedEllipsis.js
+++ b/node_modules/react-native-animated-ellipsis/dist/AnimatedEllipsis.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Text, Animated, View, StyleSheet } from 'react-native';
+import { Text, Animated, View, StyleSheet, TextStyle } from 'react-native';
 import PropTypes from 'prop-types';
 
 export default class AnimatedEllipsis extends Component {
@@ -47,7 +47,8 @@ export default class AnimatedEllipsis extends Component {
 
     Animated.timing(this._animation_state.dot_opacities[which_dot], {
       toValue: this._animation_state.target_opacity,
-      duration: this.props.animationDelay
+      duration: this.props.animationDelay,
+      useNativeDriver: true
     }).start(this.animate_dots.bind(this, next_dot));
   }
 
@@ -71,7 +72,7 @@ AnimatedEllipsis.propTypes = {
   numberOfDots: PropTypes.number,
   animationDelay: PropTypes.number,
   minOpacity: PropTypes.number,
-  style: Text.propTypes.style
+  style: PropTypes.shape(TextStyle)
 };
 AnimatedEllipsis.defaultProps = {
   numberOfDots: 3,

[YogeshBhatt]

Are you using the latest expo?

[paramsiddharth]

Are you using the latest expo?

@YogeshBhatt Yes! I think so!

...
    "@expo/webpack-config": "^0.17.0",
    "expo": "~46.0.16",
    "expo-status-bar": "~1.4.0",
    "patch-package": "^6.5.0",
...

[Thanhal-P-A]

https://www.npmjs.com/package/rn-animated-ellipsis

[paramsiddharth]

https://www.npmjs.com/package/rn-animated-ellipsis

@Thanhal-P-A Thank you, mate. :)