axelra-ag / react-native-animateable-text

🆎 A fork of React Native's <Text/> component that supports Animated Values!
https://www.npmjs.com/package/react-native-animateable-text
MIT License
360 stars 27 forks source link

Special characters are not displayed correctly. #10

Closed brandtnewlabs closed 3 years ago

brandtnewlabs commented 3 years ago

Hi @JonnyBurger 😉 Special characters like ä ö ü are not displayed on Android. Doesn't matter if I use a custom or the system font.

Edit: On iOS, these characters crash the App without error message.

"react-native-animateable-text": "0.5.9" "react-native": "0.63.4"

image
JonnyBurger commented 3 years ago

This is actually also in the backlog for our project. Can you provide some information like phone model, Android version, locale, other information which could be relevant?

Because on Simulator and Galaxy S8 I wasn't able to reproduce it, but I acknowledge it must be a problem on some devices.

brandtnewlabs commented 3 years ago

The crash happens on the iPhone 12 Pro Simulator with iOS 14.2 / 14.4 ... The Android issue happens on a real Pixel 3A with Android 10. Both devices have a DE locale.

Let me know if I can provide you additional information. I'm eager to help!

JonnyBurger commented 3 years ago

I think this is a bug in Reanimated (or even RN possibly). I have opened an issue here: https://github.com/software-mansion/react-native-reanimated/issues/1782

The issue is also reproducible without react-native-animateable-text and also happens in Redash's <ReText>. Therefore I consider it not a problem in the scope of this library.

However, I have found a workaround: It works if you don't wrap the text in a shared value and use it in useAnimatedProps directly.

Notice how in the following example one way works and one don't. If you rearchitect it a bit I'm sure you can make it work.

import React from 'react';
import {TextInput} from 'react-native';
import Animated, {
  useAnimatedProps,
  useSharedValue,
} from 'react-native-reanimated';

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

const value = 'ööö';

export const Repro = () => {
  const sharedValue = useSharedValue(value);
  const animatedProps = useAnimatedProps(() => {
    return {value: `${value} ${sharedValue.value}`};
  }, []);
  return <AnimatedTextInput animatedProps={animatedProps} />;
};

// Result: ööö ööö
brandtnewlabs commented 3 years ago

Thanks, @JonnyBurger for pointing this out, showing me a workaround and creating the bug report in the reanimated repo! 🙌 Highly appreciate that.