CODEWITHSUNDEEP
androidreact-nativeandroid-screen-support
Harish Gyanani
Harish Gyanani

Reputation: 1385

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?

Upvotes: 8

Views: 887

Answers (3)

Tuan Nguyen
Tuan Nguyen

Reputation: 2607

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}/>

Upvotes: 2

Patrick R
Patrick R

Reputation: 6857

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

Upvotes: 4

SmoggeR_js
SmoggeR_js

Reputation: 3150

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

Upvotes: 4

Related Questions