I'm trying to create a screen that looks like the attached picture. The styling code I used works only for iOS but doesn't work for Android.
The sample code with preview can be found here: https://snack.expo.io/#tushark/absolute-android
Please check for both iOS and android.
Here is the layout I want to create.
I've create a new Expo project from a sample code you give here: https://snack.expo.io/S1yDf4Q47
On the AbsoluteView Component add another View to handle the display screen:
<View style={styles.container}>
<View style={{borderColor:'transparent'}}> // add borderColor, or the screen looks weird on android (i don't know why)
{View of card, row, title and content styles}
</View>
<OrangeButton
label="CONFIRM"
onPress={() => console.log('Pressed')}
styleButton={styles.loginBtn}
/>
</View>
and the Button Component I change the Bottom: -20 to top: width / 3,
and the layout look's like :
Android :
iOS:
I would recommend leaving the orange button outside of the card container and using an absolute position with device height to position it, you can also do the same for the card container to give the button the same position relevant to the card container on any device.
ex.
top: Dimensions.get('window').height/8
Related
When i use "softwareKeyboardLayoutMode": "pan" keyboard always pushes header up (above screen) while using "softwareKeyboardLayoutMode": "resize" it works fine..
Here are some examples:
(How it should look)
(when using 'pen' mode)
My code looks something like this:
<View style={{ flex: 1 }}>
<View/> //header
<ScrollView/> //chat
<View/> //text input
</View>
Full code of Chat Screen
https://pastecode.io/s/zbbktv90
react: 18.1.0,
react-native: 0.70.5,
expo: ~47.0.12
I tried litterally every way to put KeyboardAvoidingView and all behaviors. Did I styled my elements wrong or what?
I am not able to fill the status bar area with component. I tried to do it by hiding the status bar using <StatusBar hidden />. But this one leaves a white space there. For example I want to fill the green image the status bar.
TLDR: working project link
On the gist link (you've provided on the comment), I can see that you are using the following structure
<SafeAreaView>
<StatusBar ... />
<ImageBackground ...></ImageBackground>
</SafeAreaView>
If you want to hide the status bar and cover the whole screen with the image you need to change SafeAreaView to just View and also remove StatusBar component.
<View>
<ImageBackground ...></ImageBackground>
</View>
Cause SafeAreaView will dynamically put some padding at the top. So although you've put style={{ height: '100%', width: '100%' }} it will respect the padding of SafeAreaView cause it is the parent component here.
Also at this point, you do not need StatusBar, cause the StatusBas already has an image as background.
I have the following react-native code which does exactly what I want because it prints a solid black rectangle:
getTable() {
const cell = {
backgroundColor:'black',
flex:1,
height:50,
};
const table = {
borderColor:'black',
borderLeftWidth:0,
borderRightWidth:0,
borderTopWidth:0,
borderBottomWidth:0,
width:'100%'};
return (
<View style={table}>
<View style={{flexDirection:"row"}}>
<View style={cell}></View>
<View style={cell}></View>
<View style={cell}></View>
</View>
</View>
);
}
However, when I change the table.borderLeftWidth to a value of 1, I see a white vertical line 66% from the left of the black box as depicted in this image:
Why does adding a border left to the container cause a white line to the interior content?
This issue happens in all iOS devices and all iOS simulated devices. It does not appear in Android. What am I doing wrong?
Based on the fact that this issue only occurs on iOS devices I'd suspect it's an issue with the iOS implementation. The react-native issue #2089 on GitHub seems to be similar to what you're encountering.
The issue lies in react-native's "implementation" of CSS on iOS devices (since it's not actually CSS) and that it's simply a rendering bug (probably with flexbox). I'd recommend that you post about your issue there and see if they can resolve it.
I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.
<View style={MainView}>
<View style={subMain1}>
<View style={{flex:1,backgroundColor:'#add264'}}></View>
<View style={{flex:1,backgroundColor:'#b7d778'}}></View>
<View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
</View>
<View style={subMain2}>
<View style={{flex:1,backgroundColor:'#cce39f'}}></View>
<View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
<View style={{flex:1,backgroundColor:'#69ee9a'}}>
<TextInput placeholder="input field"/>
</View>
</View>
</View>
const Styles = {
MainView:{
flex:1,
backgroundColor:'green'
},
subMain1:{
flex:1,
backgroundColor:'blue'
},
subMain2:{
flex:1,
backgroundColor:'orange'
}
}
I just found an answer to this.
I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.
This helped me hope it can help others. :)
I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.
Check this package out - it did the trick for me, and offers some cool customization capabilities:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.
Using android-specific style rule, elevation, I get a nasty "halo" effect when using. for example, this image shows elevation: 20:
Even a small elevation 1,2, or 3 gives the appearance that the element is "haloed"/has a border (bad)
How can I add more customization to the android-specific shadow to get rid of halo effect. iOS has specific rules like shadowOpactiy, shadowRadius, shadowOffset–but I don't see anything for android.
According to the official documentation there is no such thing as shadowopacity or any way to change the default shadow since is there
by design, by "material design"
Source: https://developer.android.com/training/material/shadows-clipping
But what you can do is to use a component with a dummy view that has the desired border and then just use it in your render function like
render(){
<View style={{flex:1}}>
<Viewwithborder>
//pass the item you want to have custom elevation here
</Viewwithborder>
</View>
}
and in your custom "viewwithborder" you just do this
render(){
<View style={{styles.CustomElevationStyle}}>
{this.props.children}
</View>
}