Android ignores unicode soft hyphen (u00AD)

[ccfz]

Description:
On android soft-hyphen unicode u00AD is ignored, neither the word break nor the hyphen are displayed correctly. Using u200B is a workaround for getting better word wrapping results but is still missing the hyphen.

React Native version:

System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 108.98 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.10.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.0, 29.0.1
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.12.0 => 16.12.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

Render the following on android vs. iOS

const testString = 'sup\u00ADer\u00ADfrag\u00ADilis\u00ADtice\u00ADxpial\u00ADidocious'

return (
  <View>
    <Text style={{ width: 100 }}>
      {testString}
    </Text>
  </View>
);

Expected Results

Screenshot from iOS

Actual Result

Screenshot from Android

[plaa]

This makes it very hard / practically impossible to get proper when-needed hyphenation on Android. iOS works perfectly and is easy to make buttons that properly wrap the text only when needed.

[lennartdemeij]

What would the 'very hard' way be to get the hyphenation working on Android with this version of React Native? I'm experiencing the same bug...

[ccfz]

Good question, you would need to build some kind of regex/matcher that checks for u200B followed by a new line and append "-" if it matches. Don't know if that is possible but it would be my first guess for a workaround.

[fabOnReact]

seems to me that this is the default android behaviour https://stackoverflow.com/questions/4454911/hyphenation-in-android but I did not look extensively into it. Probably regex is the best option.

[lennartdemeij]

EDIT: I found a more-or-less workable solution: onTextLayout gives you the lines, now you can check the last character and change it. So I've replaced \u00AD with \u200B and then this code works:

<Text
 onTextLayout={({ nativeEvent: { lines } }) => {
  if (Platform.OS === "android") {
   this.hyphenAndroid(lines);
  }
 }}
>
 Some Long text
</Text>

------------

hyphenAndroid(lines) {
    let hyphenedText = "";
    lines.forEach((line) => {
      if (line.text.substr(line.text.length - 1) === "\u200B") {
        hyphenedText += line.text.substr(0, line.text.length - 1) + "- ";
      } else {
        hyphenedText += line.text;
      }
    });
   //Change the text of the element to hyphenedText
  }
}

[ochrstn]

hyphenedText += line.text.substr(0, line.text.length - 1) + "- ";

With this solution I have some weird effects because the changed text (additional "- ") is triggering the onTextLayout again, which is performing changes again because the text has to change again ... in an endless loop 🔁

[lennartdemeij]

I'm checking for that as well.

if (line.text.substr(line.text.length - 2) === "- ") {
 alreadyHyphenated = true;
}

and I don't change the text again if alreadyHyphenated === true

I know it's not perfect (yet), but it is a step in the right direction I think. Not it's just eliminating these quirks.
It also sometimes brings the hyphenated word to the next line because the added dash pushes it over the edge. I'll have to think of a solution for that as well...

[ochrstn]

It also sometimes brings the hyphenated word to the next line because the added dash pushes it over the edge. I'll have to think of a solution for that as well...

Yes, that's what I'm experiencing right now too. Almost all dashes are within the words because the new lines breaks are different after adding the dashes.

[fabOnReact]

as we can read in this medium article it is possible on android thanks to setHyphenationFrequency

so I solved this in native code like this in ReactTextView.java:

  const testString = 'sup\u00ADer\u00ADfrag\u00ADilis\u00ADtice\u00ADxpial\u00ADidocious'

renders as:

I'll write a pull request to add a prop <Text androidHyphenationFrequency="normal" />
You can then checkout my branch and install in your app the forked version of react-native that includes this fix, in 1-3 months they will publish an npm package and you can go back using the react-native master package.

https://github.com/facebook/react-native/wiki/Building-from-source#publish-your-own-version-of-react-native

Thanks a lot. Fabrizio