Develop Reference

EdgeLight: Screen borders are not going beyond the notch and softkeys in react native

I am just trying to implement "edge light" Ref in react native.
I have this below code to achieve it.
<Layout style={{ flex: 1, paddingTop: 18, paddingBottom: 18, paddingLeft: 28, paddingRight: 28, borderWidth: 10, borderColor: '#36ABA5', justifyContent: 'center', backgroundColor: '#000', color: '#fff' }}> // All my code </Layout>
This seems to be working fine for the mobiles which are having straigh screens. But I am facing 2 issues,
The same is not working when the mobile has notch or the mobile's softkeys are enabled.
In Honor 8x the border itself is not coming when softkeys are disabled, when those are enabled, the border comes above the softkeys.
I tried calculating the window height, screen height and put the border. It seems to be not happening.
In Straight phone
In Notch phone:
In Softkeys enabled:
In Softkeys disabled:
Wanted similar to this, but not colorful/ Expected Results:

It's likely that Layout element from whatever library you are using automatically adjusts paddings to avoid unsafe areas (like notches and navigation bars). So don't use it, use a simple View with flex: 1
After that, if you are still not able to draw behind status bar and navigation bar, edit styles.xml (android/app/src/main/res/values/styles.xml), to add these 2 entires to <style name="AppTheme" ...> tag:
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>

Answering my own question. I did not find any solution to trigger the inbuilt border lights from react-native or any other solution to replicate it.
I did an alternative solution, made the status bar colored and softkeys colored.

Android 7 React Native number of components limit?

I've been making my first React Native app, for now without redux, just RN. The case is on Android 7 it doesn't show a lot of components, but it does on more recent versions of Android and works perfectly on iOs.
Here are screenshots of my problem, on Android you can see a lot of blank space, but on iOs it is filled with data:
Android 7:
iOS:
Here is the structure and CSS:
<ScrollView contentContainerStyle={mainView}>
<View style={sectionStyle}>...</View>
<View style={sectionStyle}>...</View>
...
<View style={sectionStyle}>...</View>
</ScrollView>
mainView: {
backgroundColor: colors.backgroundGray,
justifyContent: 'flex-start'
},
sectionStyle: {
paddingTop: 15,
paddingBottom: 15,
backgroundColor: colors.mainWhite,
margin: 5,
borderWidth: 1,
borderColor: colors.borderGray,
borderRadius: 5,
shadowOpacity: 0.5,
shadowRadius: 2,
shadowOffset: {
width: 0,
height: 2
},
shadowColor: colors.shadowColor,
elevation: 5
}
What may cause that issue and what can be done to fix this?
UPD:
After a few days of debugging i found that problem may be caused by Android 7 limitations of number of components rendered on screen, because there are a lot of them on that page, like 10-15 screens at least with icons, comments, sliders and dropdowns. If i render just dummy text instead of them - everything is rendered, and so does if i render almost all of them by exception of, for example, dropdowns.
Any ideas?

Well once again i'm answering my own question, it feels like a meditative monolgue service :D
I've solved this problem. That page has really huge amount of complex components on it, like ~30 complex Views grouped by other Views (this is because that part of a page should be same for all products so it's hardcoded) + massive FlatList of same structured Views (this is because products have their unique structure, so it's dynamic), and all of it is inside of a ScrollView to enable scrolling (otherwise it makes no sense to have 20+ screens long page without ability to scroll it).
So i put those static hardcoded components into array, merged with dynamic components array, and rendered only one FlatList, replacing the whole ScrollView with it.

ToolbarAndroid navIcon not displaying

I'm trying to display a ToolbarAndroid with a hamburger icon. I'musing the code:
_buildToolbar (msg) {
const navIcon = require("../../icons/menu.png");
return (
<ToolbarAndroid
title={msg}
style={{
height: 56,
alignSelf: "stretch",
}}
onIconClicked={this.props.openDrawer}
navIcon={navIcon}
/>);
}
The toolbar displays, but the nav icon doesn't. I get the warning Failed prop type: Invalid prop navIcon supplied to ToolbarAndroid. The file does exist, and looking under a debugger navIcon is defined. Looking for any help here. Using an Icon based toolbar is probably not a workable solution, as due to some of our customization features getting the right font would become difficult.
Edit:
Changing to:
<ToolbarAndroid
title={msg}
style={{
height: 56,
alignSelf: "stretch",
}}
onIconClicked={this.props.openDrawer}
navIcon={
{ uri: navIcon }}
/>);
Got rid of the warning but did not fix the display issue.
Edit2:
It looks like something with our build system here (which uses the same stack as our web build system, not the normal RN tools) is loading the files as a different data type- its loading them as data uris. I'm not sure what they normally are. But when the ToolbarAndroid is passed a uri, it assumes it will be a file, an http/https url, or a name of a drawable in our drawable folder. So it looks like we're going to need to debug our build system, or hard code this image (which being a hamburger icon isn't the end of the world).

The navIcon format seems to be specific:
Action Bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished action bar icon dimensions, corresponding to a given generalized screen density, are shown in the table below.
18 x 18 px
24 x 24 px
36 x 36 px
48 x 48 px
https://developer.android.com/guide/practices/ui_guidelines/icon_design_action_bar
Also you can use Icon.ToolbarAndroid from react-native-vector-icons :
https://github.com/oblador/react-native-vector-icons

This (ES6) code works on my app:
import navIcon from '../Images/navIcon.png'
...
<ToolbarAndroid
title={'test'}
style={{
height: 56,
alignSelf: 'stretch',
}}
onIconClicked={this.props.openDrawer}
navIcon={navIcon}
/>
The navIcon file:

Android Screen cut off - React Native

When I run my React Native App on Android (real device or Simulator) the screens are to big somehow and get cut off at the bottom (looks almost like as if the missing part is as high as the status bar, but I don't know if it has something to do with it, check the last screenshot)
The parent view is a simple View with flex: 1 and the rest is relative to that.
Am I missing something on Android? It's my first Android App, I've only done iOS before.
I have the following code to test it:
return (
<View
style={{
backgroundColor: 'red',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height - 24, // 24 = status bar???
}}
>
<Text>{Dimensions.get('window').height}</Text>
</View>
);
I have figured out that it's exactly 24 to high - is this because of the status bar? If so, is it safe to use 24 or does it vary?

React Native: Custom font renders differently on Android and iOS

In the picture below I have inspected the same Text-component as rendered on Android on the left and iOS on the right. It seems that iOS renders the font in top of the Text-container.
I'm using the same TTF font-file for both Android and iOS. (I found an online reference to the font I'm using here.)
Any ideas how to make the font render the same for both Android and iOS?
Just to be clear, the difference is not caused by any styling (margin, font size, etc.). It's exactly the same.

I found a fix but it doesn't feel right. I think you should find another font that renders the same on each device.
You can play around with the lineHeight, padding and margin to get the same vertical alignment for your text components :
Ios:
instructions: {
fontFamily: 'Metric-Regular',
fontSize: 50,
lineHeight: 50,
paddingTop: 25,
marginBottom: -35,
marginTop: 35
}

Problem is with lineGap and ascender .ttf font file parameters. Fix them using ftxdumperfuser tool. Check https://medium.com/#martin_adamko/consistent-font-line-height-rendering-42068cc2957d