androidreact-nativeandroid-screen-support

React native resources issues


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?


Solution

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