score:31
this usually happens when you have this: fontweight:bold
and your android device is for example a oneplus or oppo (there are some other brands tho), it's a conflict with your system font.
to fix, you can add some other fontfamily
or put 2 blank spaces in front of the word seems to work too.
see: https://github.com/facebook/react-native/issues/15114
edit
setting textbreakstrategy
to simple
on the text element also seems to work for some devices like samsung galaxy s10, google pixel
score:0
if you remove numberoflines
it will display correctly. if it still doesn't show up, it could be that the parent view has a fixed height (or maxheight)
score:0
as it turns out, the last line of our paragraphs were getting cut off due to 'highquality'
value of textbreakstrategy
parameter. we changed this to 'simple'
and now all of our text displays. apparently highquality
is actually low quality.
score:0
you can fix it by adding extra space at the end which is not a good workaround.
recommended: include default font-family in your application and it works same for all devices
score:0
there are other better ways to fix this issue. but in my case adding custom font
fixed the text-cut issue and font alignment in different devices.
adding custom font can easily solve the problem.
how to add custom fonts = checkout this stackoverflow answer
score:0
try this.
- remove fontwight : bold
- add style in text tag like this = width:'100%' (according to your text size)
score:0
i simply added padding and the issue resolved
if text cut off from the left side just add paddingleft:10
in my case text was cut-off from top-side, when i was increasing the font size, so i added paddingtop:20
if text cut off from top
add textalignvertical: 'bottom'
score:1
in my case adding fontfamily: 'arial' to the text component did the trick. even fontfamily: 'abc' also works. i think it just requires fontfamily to be set.
score:1
adding extra space or adding textbreakstrategy as "simple" did not work for me.
i added alignself:"stretch"
for the text component style and it worked for me finally. if you want to text to be in the center just add textalign: "center"
as well.
hopefully this helps someone.
score:2
adding a flex: x
style to the <view>
surrounding the <text>
element being cut worked for me, when using a oneplus 7t.
score:3
i'd had problem of text cut horizontally.
by using lineheight
to text components, and boom, my problem solved
score:4
after struggling with it for a long time, i finally figured it out.
seems like for default, the text sets the property textbreakstrategy to * highquality*.
changing it to * simple* solved my problem.
link here: https://reactnative.dev/docs/0.56/text#textbreakstrategy
score:5
for anyone who found provided solutions not working like in my case here's my solution to text being cut on oneplus phones:
just set component style with these properties
alignself: 'stretch',
textalign: 'center',
this is probably an equivalent to android match_parent setting. did not test how it will affect ios though as i don't have that possibility right now.
Source: stackoverflow.com
Related Query
- Text is getting cut off in android for react native
- React native text going off my screen, refusing to wrap. What to do?
- React native for android run very slow when not enable "Debug JS"
- Building hybrid React apps for iOS and Android with native performance
- How to enable the Android monitor in React Native for checking logs?
- Android - Hide text cursor input React Native
- Do react native uses same code for ios and android or both platform code should be written separately?
- Creating Custom UI component for android on React Native fails. App crashes
- How to center text in Facebook Login Button for React Native (Android)?
- React Native SVG - Setting SVG width and height cause the icon to be cut off
- React Native Inline style for multiple Text in single Text With Touch effect
- Text is not wrapping and is getting of the screen react native
- React Native - Do a search bar for ios or android
- React Native Android error trying to nest a view inside a text
- how to handle focus same item when hardware back button click in react native for android Tv app
- React Dropdown Select Initialization and getting results back for key of displayed text
- React Native on Android failed to find Build Tools
- React - getting a component from a DOM element for debugging
- What does React Native use to allow JavaScript to be executed on iOS and Android natively?
- React Native 0.57.1 Android Duplicate Resources
- How to add sourcemap in React Native for Production?
- React Native: No propType for native prop RCTView.maxHeight
- How to adjust font size to fit view in React Native for Android?
- React native textDecoration properties not working on Android
- React native text component using number of lines
- React Native multi line TextInput, text is centered
- React Native Android Negative Margins
- How to set the height of button in React Native Android
- Linking.canOpenURL returning false when targeting android 30 sdk on React Native
- Info.plist file for react native ios app using expo SDK
More Query from same tag
- How to make synchronous API call request in react js
- Preview and upload two separate images in the same component in react js
- Problem with logout hook in react-google-login when using typescript
- Manipulation the zoom property in CSS3
- How can i get data in `handleOnDrop` function in react-papaparse?
- How to use routes in React?
- Using material components in react
- How to get username and password in a javascript object in ReactJS?
- Passing correct properties to popup notification
- Update ClassNames on State change React js
- Reset value of RangePicker Ant design
- React Bootstrap get value from form on submit
- Get request query parameters aren't applying
- material-ui autocomplete attribute "value" not available when it is used with attribute "getOptionLabel"
- React Material Table action OnClick event for edit and delete does not fire action
- React: How can I call these functions in useEffect conditionally inside my component?
- Named import in React
- Dynamic React Select Menu Component
- How to avoid line break in Typography
- TypeError: cannot read properties 'items' of undefined while making the custom selectbox/dropdown list
- How to trigger just one dropdown among bunch of others created inside .map
- Redirect not showing the redirected component
- Why not dispatch directly into store from action creator redux?
- Can I use matchPath without a child component?
- Calling one action from another action creator
- Translation into react nodes
- Tailwind mixed classes with utility classes
- How to style ToggleButon in material-ui
- Can we assign a Typescript class to a useState field of a Functional Component in React?
- How to change a object state inside a map function