iOS Crash on Styling Change

[brandtnewlabs]

Hi @JonnyBurger - it's me again. From time to time I experience crashes on iOS when I'm working with the AnimateableText component. Right now, it happens when I'm using the values of translation functions. React-Native doesn't show an error message but in Xcode, I can see the following in JBBaseTextShadowView.m:

It doesn't crash on Android though and sometimes, it works on iOS too, until I change styling for the AnimateableText & refresh the screen.

"react-native-reanimated": "^2.0.0",
"i18next": "^19.8.4",
"react-native": "0.63.4",
"react-native-animateable-text": "0.5.9",

Reproducable Demo:

import React from 'react'
import { useTranslation } from 'react-i18next'
import { Button, View } from 'react-native'
import AnimateableText from 'react-native-animateable-text'
import { useAnimatedProps, useDerivedValue, useSharedValue } from 'react-native-reanimated'

export default function Repro() {
    const [t] = useTranslation('translation')

    const description00 = t('screen.intro.intro.message')
    const description01 = t('screen.intro.interview.message')
    const description02 = t('screen.intro.legal.message')

    const progress = useSharedValue(0)

    const animatedText = useDerivedValue(() => {
        if (progress.value === 1) return description01
        if (progress.value === 2) return description02
        return description00
    })

    const animatedProps = useAnimatedProps(() => {
        return {
            text: animatedText?.value
        }
    })

    const onPressNext = () => {
        progress.value = progress.value + 1
    }

    const onPressBack = () => {
        progress.value = progress.value - 1
    }

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <AnimateableText
                animatedProps={animatedProps}
                style={{ fontSize: 16, textAlign: 'center', fontWeight: '500' }}
            />
            <Button title="Next" onPress={onPressNext} />
            <Button title="Back" onPress={onPressBack} />
        </View>
    )
}

[brandtnewlabs]

Hi! Did you have any chance to look into this? I'm still searching for a workaround. For the reproducible demo, you don't need a translation function t(). It's enough if you use something like to crash the App.

const outputValue = value => value

const description00 = outputValue('screen.intro.intro.message')
const description01 = outputValue('screen.intro.interview.message')
const description02 = outputValue('screen.intro.legal.message')

However, if I then remove the styling from the AnimateableText, the App doesn't crash.

[JonnyBurger]

Fixed by b8a50138778e2ed6af80dbc8b2ac14df44d158ce!

[brandtnewlabs]

Thanks a lot, Jonny! 🙌