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
Oppo A77 - Some texts gets cut-off #15114
Comments
This comment has been minimized.
This comment has been minimized.
@mykelaballe cc @hramos We've had similar issue(some texts getting cut off in Oppo device). Although it's not a complete solution, we found some hacky-way to solve this problem. in short, (at least in our case) just adding empty for example, use |
As a side note, I also have this issue. It seems to appear on multiple Oppo devices. Probably something to do with fonts. |
@johnwook do you still use this workaround? |
@jemmyphan Hello! Unfortunately yes :( . As our OPPO user grows, our team think we should SOLVE this problem right. For now there is no progress. If some arises, I'll let you know by commenting here. If you find some better solution please let me know :) |
@johnwook yeah, oppo user's grow so fast, anyway didn't expect it to be replied this fast. thanks and appreciate it a lot. ;) |
I have faced similar issues in OnePlus 5. These issues only happen in a OnePlus 5 phone when you have chosen "OnePlus Slate" font in Settings. If you change the font to Roboto, the issues don't occur. I'm gonna ship Roboto font along with my app in the next version to go around this. |
@yeswanth Can you share how to ship the Roboto font along the app? Will all |
Hi @asdacap You can download roboto font and add it to your project(As shown in this link). Unfortunately, you will have to create a wrapper for all |
this solution works for me, you can try this
|
@hkxicor trying your suggestion. will edit after the result |
I can say that it worked in my case. |
@hkxicor do I need to place that code on every one of my js files with affected text or will it solve the issue for my entire app if I only put it in my main app.js? I'd test it myself but I do not personally have an oppo phone to reproduce on. Thank you |
@jslok just put it on app.js it will work. |
I tried the code but it appears to break react-native-vector-icons. All icons get replaced by X. |
@jslok please update hare if you find any solution |
import React from 'react';
import { StyleSheet, Text } from 'react-native';
const styles = StyleSheet.create({
defaultFontFamily: {
fontFamily: 'lucida grande',
},
});
export default function fixOppoTextCutOff() {
const oldRender = Text.prototype.render;
Text.prototype.render = function render(...args) {
const origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
- style: [origin.props.style, styles.defaultFontFamily],
+ style: [styles.defaultFontFamily, origin.props.style],
});
};
} |
Can anybody else confirm if justjavac's solution above still fixes the issue of text getting cutoff? I don't have an oppo device to test, but I can say it does not cause react-native-vector-icons to break. Also I have found OnePlus (not sure if some or all) devices also have this same issue. |
Confirmed working |
Perhaps because OnePlus does not have the Lucida Grande font installed by default, you can manually install the Lucida Grande font in your react-native project. My solution above is to solve "All icons get replaced by X". If there is still a text cutoff problem, check your fonts. |
@justjavac |
Setting the following seems to fix the issue: <Text style={{fontFamily: ""}}> |
I have similar issue in LG G3 and react-native v0.53.0 |
@hramos This issue should be open... (like many others) Anyway, thanks for the workaround guys. |
* chore: Fix redirect created when a new version is released Previous link was broken * chore: Remove untranslated strings from messages (#496) Reduces memory use and APK size * chore(CI): Update JDK setup action (#505) * note to use specific ndk version * chore: Improve contributor docs (#509) * chore: Added instructions to build translations and run the Javascript bundler prior to building for Android * chore: Added instructions for downloading and preparing offline maps wth the needed structure * chore: Add detailed instructions on how to download maps and add them to phone * chore: Add note about react-native run-android not opening bundler on all machines * chore: Add note about com.mapeo changing with different release versions * chore: Change asar to full flag name * fix: Localize "Import Config" button (#510) * fix: Change hardcoded message to intl FormattedMessage * Add missing string to translations * chore: prettier * extract messages Co-authored-by: Gregor MacLennan <gmaclennan@digital-democracy.org> * feat: Updated translations (vi, es, po) (#498) * New translations en.json (Vietnamese) * New translations en.json (Vietnamese) * New translations en.json (Vietnamese) * New translations en.json (Portuguese, Brazilian) * New translations en.json (Portuguese, Brazilian) * New translations en.json (Portuguese, Brazilian) * New translations en.json (Spanish) * New translations en.json (Portuguese, Brazilian) Co-authored-by: Gregor MacLennan <gmaclennan@digital-democracy.org> * fix: Fix import config button crash (#512) * fix: Fix import config button crash * Update version in package-lock Co-authored-by: luandro <luandro@gmail.com> * chore: Fix Github CI builds by removing NDK r22 (#516) See #517 for explanation An update to the Github Action virtual environment added NDK r22, which CMake uses, ignoring $ANDROID_NDK_HOME. Solution: Remove NDK r22 and update to latest NDK r21f * fix: Write preset tags to observations (#514) * fix: Add better variable naming and easier to understand logic * fix: Cleaner and easier to understand logic on updating tags * fix: Clean redundant code and sort updated value order in preparation for edge cases * fix: Fix cutoff of text on OnePlus6T phone #502 (#511) * fix: Fix cutoff of text on OnePlus6T phone #502 Use a custom Text component with fontFamily explicitly set, to work around bug facebook/react-native#15114 (comment) * Fix implementation of style merging * fix bugs * feat: Add French translations * feat: Add Sranan Tongo translations * feat: Add Dutch translations * fix: Update Thai, Khmer & Vietnamese translations * feat: Updated translations for default configuration (vi, srn) * Revert "feat: Updated translations for default configuration (vi, srn)" This reverts commit c267a99. Install was done using npm@7 which changed the package-lock format and broke the build * chore: Re-apply c267a99 with correct npm@6 version and lockfile v1 * chore: Prepare release v5.2.0 Co-authored-by: Kira Oakley <kira@eight45.net> Co-authored-by: luandro <luandro@gmail.com> Co-authored-by: Digidem Bot <68966934+digidem-bot@users.noreply.github.com>
In my case |
Seems the problem is affected by the font family. I have set font-family globally. But I had to set again font family in some places to fix this issue.
|
### Description Includes a button for clear functionality, tapping back numerous times was tedious. Included styling to handle large numbers. On iOS values is shown with ellipses while retaining the value. On Android the value is shown in entirely, but in a scrollable view. The value is not impacted by these style changes. ### Other changes N/A ### Tested Tested locally on iOS and Android. ### How others should test - Using the Send Amount component tap max and ensure the value displays without broken numbers or super small text. - Copy the value and ensure that the whole value is sent. - Hold backspace and ensure the value is cleared. ### Related issues N/A ### Backwards compatibility This change is backwards compatible. ### Screenshot <div> <div> <h2>Android Send Amount</h2> <img src="https://user-images.githubusercontent.com/26950305/145876191-256d0b64-4856-4fc5-872e-b91f1b76faff.png" alt="Android-SendAmount" width="45%" height="auto"> </div> <div> <h2>iOS Send Amount</h2> <img src="https://user-images.githubusercontent.com/26950305/145876200-020fcd4e-6ab4-4c91-b9d0-d68cabf27ab6.png" alt="iOS-SendAmount" width="45%" height="auto"> </div> </div> ### Notes - There are some weird things about ellipses text and getting it to fit with Android. More info can be found here: facebook/react-native#15114. I've set font family, font weight and width to the text element while also removing padding from adjacent elements which appears to have solved the issue.
Hi all, for me this issue fixes if you add fontWeight explicilty in Text Style |
5 years have passed, and this issue still hasn't been resolved. Recently, I developed a new app using React Native, and surprisingly, I still employed the same solution as before #15114 (comment). 😂 |
Hello, Thanks for the issue. I have been contributing to facebook/react-native for 4 years and specialize in the Text/TextInput components. I currently have 58 facebook/react-native PRs: https://github.com/facebook/react-native/pulls?q=is%3Apr+author%3Afabriziobertoglio1987+ It is the suggested approach from the react-native core team (see this discussion). I'm publishing several fixes for Text and TextInput component in a separate library react-native-improved.
The advantages would be:
What do you think about this? Should I keep working on this? Thanks |
I believe this issue is fixed with #41770 |
Hello,thank you for the solution. React-Native version 0.70 Looking forward to your recovery |
I found the problem because of "packageManager": "yarn@3.6.1" in the dependency package. Is the yarn version necessary? thanks |
@NaOMi-HaNaKi sorry. I only support rn 0.73 for now, in the future I may support more versions (feature request #18). I tested with npm on rn 0.73 (screenshot) and there are no issues. I believe it is the same issue with #39722 (PR #41770 may fix both). The root issue was that the Text width was calculated wrong with StaticLayout from the ReactTextShadowNode measure function. The issue reproduces when the text width is higher of it's parent and needs to be cut with an ellipsis. StaticLayout uses line break strategy to decide where to cut the text. It works well with more than one line, but with one line may remove an entire word and the text width is not the full width of the parent. Using BoringLayout in that case fixed the issue. Your text is boring, does not include gifs, so it should fix this issue too. I'll update the issue in 1 week with more info, Thanks a lot. |
Thank you so much! |
@NaOMi-HaNaKi Can you reproduce it in react-native 0.73? I tested similar issue with custom font OnePlus Slate, but it does not reproduce (see my comment #25481 (comment)). Thanks |
Regarding the rn version, the project specified 0.70, and I could not actively change it to 0.73. It is very strange that the problem I encountered did not cause problems when it was displayed locally, but after it was distributed to the user and opened, the display was incomplete. In addition, I don’t have a OnePlus device. I encountered a similar problem when using another device, Redmi K30 - Xiaomi's default font. When I adjusted the device font to Big Mac Bold, the content was not fully displayed.And I have tried testing the same font on other Xiaomi phones and the problem did not occur.I started to wonder if the problem was related to rn… |
A similar situation also appeared in RedMi K30 MIUI13 setting MiSans font, Big Mac thick. All numbers involved will be truncated at the end. |
Environment
react-native -v
: 0.34 through 0.59node -v
:4.4.7npm -v
: 4.5.0yarn --version
:Steps to Reproduce
There's no necessary steps to produce these bug. You just have to run the app either in dev or production
Expected Behavior
Texts should not be cut-off
Actual Behavior
Some texts are cut-off as shown below. These cut-off issue doesnt occur in iphone and other phone models except Oppo A77
Screenshots:
Those screenshots are just few of the texts that are cut-off
Sorry i can't provide a link to the project
The text was updated successfully, but these errors were encountered: