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?
Related
I am making a React Native app, but I'm challenged by a weird scenario.
I downloaded Android Studio, trying Nexus 6 API 28 and Pixel 5 API 28 (Pie as operating system for both) in local development.
I highlight the problem with a very simple snippet (texts are coming from a simple, classic array with objects):
return (
<>
<View style={styles.container}>
<Text>TApp</Text>
<Text>PAppsss</Text>
</View>
<FlatList
data={texts}
renderItem={({item}) => (
<Text style={{marginVertical: 30, padding: 10}}>{item.text}</Text>
)}
keyExtractor={item => item.id}
/>
</>
);
On real devices (Android) it works perfectly, it scrolls. The weird thing is that on Virtual Device the scrollbar appears only when the app is refreshing, and if I scroll in that moment, it works. As soon as the refresh ends, it disapperas:
I tried all kind of fix (for example, enclosing the FlastList in a View with flex: 1 etc) but they keep on doing the same weird thing. I don't think the code is wrong, since it works on every real device I try, so I'm guessing how the issue can be fixed, since I need that Android Studio/Virtual Device environment to make tests.
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'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.
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: