skip to Main Content

I am building a react native app and the UI is working as expected with one screensize but not with another.

I am using responsive units exclusivly.

some parts of words and numbers do not appear. I’ll add photos.
what could it be?

Here’s some of the code for example-

<Text style={[styles.upperText, { color: textColour}]}>Right now in {location}</Text>
      {weather && weather.current ? (
        <Text style={[styles.text, {color: textColour}]}>{Math.round(weather.current.temp_c)}°C</Text>
      ) : (
        <Text style={styles.loadingText}>Loading weather...</Text>
      )}

Different screen size
working as expected

2

Answers


  1. I understand the issue that you are facing. Actually your issue didn’t content the styles part but, it’s fine. I will help you out.

    Reason for this was, if text length or text size was increased so while rendering negative text will take next row or go outside the Text component.
    The solution is use adjustFontSizeTofit & numbersOfline(1) Text component properties for implicitly handling.

    Or use can debug using flex:1 , flexShrink :1, textAllign:’center’ for Text style

    Login or Signup to reply.
  2. Solution:

    1. You can use Dimensions from React Native and Flexbox for styling.
    2. You can also use react-native-responsive-screen.

    www(dot)npmjs(dot)com/package/react-native-responsive-screen

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search