React native resources issues

Question

I am an Android App Developer and started working on React-Native from last one month. I have questions, for those I am unable to find solution:

1. does react-native use sp instead of dp for font-size and what if we want to use dp for font-size.

2. I want to provide hdpi, xhdpi and xxhdpi dimens for a layout, how to do this?

3. How to provide separate dimens for 7 inch tablet, 10 inch tablet and phone? For some purpose, I want to implement isDeviceTablet() method for react-native, how to do that?

Highmuckamuck

Answer 1

Please find below answers to your questions:

1) Does react-native use sp instead of dp for font-size and what if we want to use dp for font-size.

Yes react-native use sp for font-size so does the android, so you don't need to change it to dp. https://developer.android.com/reference/android/widget/TextView.html#attr_android:textSize

2) I want to provide hdpi, xhdpi and xxhdpi dimens for a layout, how to do this?

No specific folders are there to support dimens directly. In this case you should use concept of PixelRatio. https://facebook.github.io/react-native/docs/pixelratio.html

For providing responsive font size, you can check below link for reference: React Native Responsive Font Size

3) How to provide separate dimens for 7 inch tablet, 10 inch tablet and phone? For some purpose, I want to implement isDeviceTablet() method for react-native, how to do that?

Create a method for checking isDeviceTablet() method in your android code and then call that method in your js file.

For checking isDeviceTablet(), Please check below link for reference: Determine if the device is a smartphone or tablet?

For calling android method in your js file please follow below steps:

Create a UtilityControllerModule class:

public class UtilityController implements ReactPackage {
    public UtilityController(Activity activity) {

    }

    public UtilityController() {

    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new UtilityControllerModule(reactContext));
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Create a module class:

public class UtilityControllerModule extends ReactContextBaseJavaModule {
    ReactApplicationContext reactContext;

    public UtilityControllerModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "UtilityController";
    }


    @ReactMethod
    public void isTablet(Callback callback) {
        boolean tabletSize = reactContext.getResources().getBoolean(R.bool.isTablet);
        Log.e("isTablet >>", "" + tabletSize);
        callback.invoke(tabletSize);
    }
}

Now in your js file where you want to call this method:

import { NativeModules } from 'react-native';

var UtilityController = NativeModules.UtilityController

and now call isTablet(),

componentDidMount(){
    UtilityController.isTablet((isTabletCallback)=>{
      console.log("isTabletJs>>",isTabletCallback);
    });
  }

Thermodynamics

Answer 2

I've found the 3rd and 2nd answer for your question. To know what dimensions do you have to use and how, read this: https://facebook.github.io/react-native/docs/pixelratio.html And to for to know if for example the device is a tablet you could use this library: https://www.npmjs.com/package/react-native-device-detection I hope it works for you!!! :D

Hesitant

3rd answer is wrong, take an example of Nexus 4- 720x1280 (318ppi) PixelRatio is - 2 below condition will consider it as tablet if(this.pixelDensity === 2 && (this.adjustedWidth >= 1920 || this.adjustedHeight >= 1920)){ } References- #33740445 gsmarena.com/lg_nexus_4_e960-5048.php facebook.github.io/react-native/docs/pixelratio.html – Highmuckamuck

Then this issue should be reported. Greetings! – Hesitant

Answer 3

I think this one can help you. https://www.npmjs.com/package/react-native-responsive-dimensions

• font size automatic scale base on screen size with

<Text style = {{fontSize: responsiveFontSize(2), color: PRIMARY_COLOR}}>Abonnement</Text>

2: is normal size

• image scale

<Image style = {{width: responsiveWidth(100), height: responsiveHeight(100)}} source={CONNECTION_BACKGROUND}/>

Waldenses