Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReText multiline layout rendering issues on Expo SDK 49 on iOS #511

Open
psquizzle opened this issue Sep 23, 2023 · 0 comments
Open

ReText multiline layout rendering issues on Expo SDK 49 on iOS #511

psquizzle opened this issue Sep 23, 2023 · 0 comments

Comments

@psquizzle
Copy link

psquizzle commented Sep 23, 2023

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",
  },
});

@psquizzle psquizzle changed the title ReText multiline layout rendering issues on Expo SDK 49 ReText multiline layout rendering issues on Expo SDK 49 on iOS Sep 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant