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?

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);
    });
  }