[EXPO-53][RN-0.79]: Text styles are not applying

[schriker]

When adding styles to <AnimateableText> looks like none of the style are being applied to the text, when adding the same styles to <Text> from RN, all seems to work fine.

I have tried inline styles, animated styles, and StyleSheet styles, but no luck. I also tried version 0.15.0 and 0.16.0-beta.0.

This issues seems to be on both old and new arch.

Sample repository: https://github.com/schriker/react-native-animateable-text-style

Sample code:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import AnimateableText from 'react-native-animateable-text';
import { useAnimatedProps, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

export default function App() {
  const reanimatedText = useSharedValue('World');

  const animatedProps = useAnimatedProps(() => {
    return {
      text: reanimatedText.value,
    };
  });

  const animatedStyles = useAnimatedStyle(() => {
    return {
      color: 'red'
    };
  });

  const inlineStyle = {
    color: 'purple',
    fontSize: 50
  }

  return (
    <View style={styles.container}>
      <AnimateableText animatedProps={animatedProps} style={[styles.text]} />
      <AnimateableText animatedProps={animatedProps} style={inlineStyle} />
      <AnimateableText animatedProps={animatedProps} style={[animatedStyles]} />

      <View style={{ marginTop: 30, alignItems: 'center' }}>
        <Text children="Text Component" style={[styles.text]} />
        <Text children="Text Component" style={inlineStyle} />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontStyle: 'italic',
    fontWeight: 'bold',
    fontSize: 25, 
    color: 'red'
  }
});

Result:

[Shaninnik]

Same issue

"expo": "53.0.9",
"react-native": "0.79.2",
"react-native-animateable-text": "0.15.0",
"react-native-reanimated": "3.17.4"

[roo12312]

facing same issue

[Rednegniw]

Yes, I have the same issue as well, unfortunately cannot use this library like this 😢

[GLSinthu]

I am not facing any issues with the following:

    "expo": "^53.0.0",
    "react-native": "0.79.5",
    "react-native-animateable-text": "^0.16.0-beta.0",
    "react-native-reanimated": "~3.17.4",

[schriker]

Can confirm RN 0.79.5 seems to be fixing this issue:

I will leave this issue open, but it looks like a regression from RN.

[Shaninnik]

0.16.0-beta.0 fixed this for me

[matinzd]

Is it possible for you @WadhahEssam to release the fix to the latest tag?

[WadhahEssam]

sorry guys, I just released 0.16.0, it should be the latest now, @matinzd thank you for the reminder