ReText multiline layout rendering issues on Expo SDK 49 on iOS #511
Description
It appears that your ReText implementation no longer functions with multiline={true}. It flickers while rendering and never reaches its expected height. It appears to have a height of 0 in between renders. It worked as expected on the following
"expo": "~48.0.18",
"react-native": "0.71.8",
"react-native-reanimated": "^3.3.0",
But after upgrading to the following the problem appears
"expo": "^49.0.0",
"react-native": "^0.72.4",
"react-native-reanimated": "~3.3.0",
For some reason, I couldn't build a version with expo 49 and react-native 0.71.8, but it seems likely that it is to do with the TextInput component.
This is an iOS specific problem, it works as expected on Android.
Minimal reproducible example
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import { ReText } from "react-native-redash";
import React from "react";
const string =
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
export default function App() {
const stream = useSharedValue("");
const count = useSharedValue(0);
React.useEffect(() => {}, []);
React.useEffect(() => {
setInterval(() => {
try {
stream.value = string.slice(0, count.value);
console.log(count.value);
count.value = count.value + 1;
} catch (e) {
console.log("end");
}
}, 200);
}, []);
return (
<View style={styles.container}>
<View
style={{ width: "100%", height: 100, backgroundColor: "red" }}
></View>
<ReText multiline={true} text={stream} style={{ fontSize: 16 }}></ReText>
<View
style={{ width: "100%", height: 100, backgroundColor: "green" }}
></View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
});