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:
does react-native use sp
instead of dp
for font-size and what if we want to use dp for font-size.
I want to provide hdpi
, xhdpi
and xxhdpi
dimens for a layout, how to do this?
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?
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);
});
}