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.
Related
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.
I am working on a react native project made using react native cli. The problem is that the TextInput gets highlighted when the keyboard is visible/active & it squeezes the view and mess up the layout which reminded me of KeyboardAvoidingView behaviour. Even though I don't use KeyboardAvoidingView in this project because all text inputs are in the upper half of the screen so they won't get covered by the keyboard.
<TextInput
style={styles.inputText}
multiline={false}
onSubmitEditing={() => Keyboard.dismiss()}
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
onChangeText={numberInputHandler}
value={enteredValue}/>
inputText: {
borderBottomColor: "white",
borderBottomWidth: 2,
width: "30%",
position: "absolute",
bottom: Dimensions.get("window").height / 5,
left: Dimensions.get("window").width / 5,
color: "white",
fontSize: Dimensions.get("window").height * 0.03,
fontFamily: "Lato-Regular"
}
React Native Ver 0.61.5
Testing was done on an Android emulator and an Android physical device
As I can see you are using absolute positioning where bottom uses Dimension api to get the height. The problem occurs due to this. Try giving static height rather then fetching from Dimension because when keyboard appears visible window gets shrink causing react to re-render because height changes.
position: "absolute",
bottom: Dimensions.get("window").height / 5,
Solution provided by Nikosssgr:
In AndroidManifest.xml
android:windowSoftInputMode="adjustResize" changed it to "adjustNothing"
I was wondering if anyone had any experience with fontSize limit in react-native?
Let's say we have a Text component that renders a huge 'A' character:
<Text style={{ fontSize: 273, borderWidth: 1, borderColor: 'red' }}>A</Text>
When one changes the fontSize style to 274 or more, the character A vanishes, even though red border still remains.
This only happens on Android, iOS renders hugh font sizes as expected.
Has anyone had similar problems? Any ideas on how to proceed in order to support higher fontSize is very much appretiated.
I also experienced such a problemon my Genymotion android emulator, but the problem doesn't exist on real devices.
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?
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