KeyboardAvoidingView on Android creates a grey box above keyboard - android

I have a web view for my login form that I want to automatically scroll up when the keyboard is triggered without pushing my Text component up as well. Is there a way to have a component ignore the keyboard so it remains at the bottom beneath the keyboard while retaining that behavior?
The following is that code of what I have tried. It does push the view up and my text component stays at the bottom but I'm left with a grey box above my keyboard.
<KeyboardAvoidingView
style={{flex: 1}
behavior={Platform.OS === 'ios' ? null : 'padding'}
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : headerHeight - 10}> // if I do -200 it will remove the grey box but the view does not shift when the keyboard is toggled
<ScrollView>
<WebView
automaticallyAdjustContentInsets={false}
style={{flex: 1, alignSelf: 'stretch', width: Dimensions.get('window').width, height: Dimensions.get('window').height},}
source={{ uri }}
/>
<Text style={{position: 'absolute', left: 0, right: 0, textAlign: 'center', bottom: '5%', backgroundColor: 'white'},}>
For more information:{' '}
<Text
style={{ color: 'blue' }}
onPress={() =>
Linking.openURL(redirectURI)
}>
Tap here!
</Text>
</Text>
</ScrollView>
</KeyboardAvoidingView>
How do I fix this?

Did you test putting the KeyboardAvoidingView inside the ScrollView?

Related

React Native TextInput multiline bottom

I have one TextInput with some predefined text.
The problem is that on Android the text is displayed at the bottom of the text input. I tryed with textAlignVertical: 'top' to display it at top position, but without success the strange thing is that on the IOS is working perfectly
React Native TextInput Multiline
multiline
If true, the text input can be multiple lines. The default value is false. It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.
current behaviour:
the text is displayed at the bottom
desired behaviour:
the text to be displayed at the top
index.js
render() {
return (
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
paddingTop: 20,
paddingBottom: 50,
paddingLeft: 20,
paddingRight: 20}}>
<TextInput
style={{
flex: 1,
textAlignVertical: 'top',
borderWidth: 1}}
autoCapitalize={'none'}
autoCorrect={false}
value={this.state.textTabs}
multiline={true}
onChangeText={(text) => {this.setState({textTabs: text})}}
underlineColorAndroid={'transparent'}
editable={true}
/>
</View>
);}
Thanks in advance

React Native's KeyboardAvoidingView keyboardVerticalOffset overlaps underline on textinput

I am using keyboardVerticalOffset in order to move content up appropriately when the keyboard is displayed. It is working well, however the underline is covered up when the keyboard is displayed.
If I increase the keyboardVerticalOffset value it just adds white space below the input, and you still can't see the underline.
<KeyboardAvoidingView
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#fff'
}}
behavior="padding"
keyboardVerticalOffset={90}
enabled>
ScrollView
style={{backgroundColor: '#fff'}}
keyboardShouldPersistTaps='always'>
<Content style={globalStyles.content} keyboardShouldPersistTaps='always'>
<Form>
{this.renderInspectionDetails()}
{this.renderClientInformation()}
{this.renderBuyersAgentDetails()}
{this.renderSellersAgentDetails()}
{this.renderNotes()}
</Form>
</Content>
</ScrollView>
</KeyboardAvoidingView>
The following image displays a text input focused.

Extra blank space on bottom while using KeyboardAwareScrollView - React-native

I am trying to make a form with multiple input fields using react-native. I want the form submit button to remain at the bottom of the screen. I've used the following structure
<KeyboardAwareScrollView
contentContainerStyle={{
backgroundColor: "black",
flexGrow: 1
}}
enableOnAndroid={true}
>
<View style={styles.container}>
<View style={styles.formContainer}>
{/*Form input components here*/}
</View>
<View style={styles.buttonContainer}>
<Button
icon={<Icon name="back" size={24} color="white" />}
onPress={props.setModalVisible}
buttonStyle={styles.backButton}
/>
<Button
buttonStyle={styles.button}
containerStyle={{ flex: 1 }}
title="Update Info"
onPress={props.setModalVisible}
/>
</View>
</View>
</KeyboardAwareScrollView>
The container has style
container: {
padding: 10,
backgroundColor: "green",
flex: 1
},
The form container has style
formContainer: {
padding: 15,
flex: 1,
backgroundColor: "blue"
},
Button container has style
buttonContainer: {
padding: 15,
flexDirection: "row",
backgroundColor: "yellow",
marginTop: 'auto'
},
Using the above code the button sticks to the bottom when there is no keyboard as I expected. I've added background color for easy visualization. Image -
Form View
But when I click on a text field and scroll up I see that the container "shrinks" and the bottom of the screen is black and button is now close to input fields. Background color of KeyboardAwareScrollView contentContainerStyle fills the bottom when I [fully scroll to bottom][3]
How do I make sure that the button still sticks to the bottom in scrollview and the content container height remains the same as screen height?
I am using "react-native-keyboard-aware-scroll-view": "0.8.0",
I've tried removing marginTop: 'auto' from the buttonContainer, fixing the height of the container and all sorts of combinations with flexGrow and flex on KeyboardAwareScrollView.

React Native Android - how do i *stop* <View>'s from resizing automatically when inside a Modal?

version of RN is 0.41.2
does anyone know how to stop View's that use flexbox for sizing, from automatically "shrinking" their height if a TextInput element is used in one of the Views? It's probably easier to illustrate by example, and to be clear, you can see that these are View's nested inside a <Modal>.
Here is the view when no keyboard is open. Same on both.
Here's what happens when TextInput has the focus. I dont want these views to adjust as they have, above the keyboard. I want the yellow and blue colored View's to remain 'full size' - exactly as illustrated in the iOS screenshot.
This same code, on iOS, does not move/adjust the View's (above the keyboard). That's the behavior I want on Android too.
Here is the sample render method code. It's just a standard template RN project with a change to the render method to test this out.
I tried inserting android:windowSoftInputMode="adjustNothing" into AndroidManifest.xml but had no effect. I'm sure it's just a prop or other manifest setting. Hoping someone can let me know?
render() {
return (
<View style={styles.container}>
<Modal
animationType={'slide'}
transparent={false}
onRequestClose={() => console.log('sd')}
>
<View style={{flex:1, backgroundColor: 'lightgrey'}}>
<View style={{
//height:300,
flex: 1,
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
margin: 10,
//height:100,
width: 200,
justifyContent: 'center',
backgroundColor: 'green'}}>
<TextInput style={{height: 40, backgroundColor: 'orange'}} />
</View>
</View>
<View style={{
//height:200,
flex: 1,
backgroundColor: 'blue',
}}>
</View>
</View>
</Modal>
</View>
);
}
Did you try wrapping all of the contents within a ScrollView and then a child KeyboardAvoidingView?
I had exactly the same problem, and instead of adding ScrollView everywhere I just made a little change in AndroidManifest.xml:
instead of: android:windowSoftInputMode="adjustResize"
i wrote: android:windowSoftInputMode="adjustPan"
Worked like a charm for me

React Native, TouchableOpacity wrapping floating button get nothing

I'm creating a simple action button (floating button)
This is working :
<View style={{
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,
flexDirection:'row'
}}>
<Text>
+
</Text>
</View>
This is not :
<TouchableOpacity
onPress={()=>{
}} >
<View style={{
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,
flexDirection:'row'
}}>
<Text>
+
</Text>
</View>
</TouchableOpacity>
Just wrap with TouchableOpacity then my button not show up without any errors.
React 0.1.7, Android
Then I try move styling from View to TouchableOpacity, It's work
<TouchableOpacity
onPress={()=>{
}}
style={{
width: this.props.size,
height: this.props.size,
position: 'absolute',
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
bottom: 10,
right: 10,
}}>
<Text>
+
</Text>
</TouchableOpacity>
Can any one explain me why?
React Native docs said
[https://facebook.github.io/react-native/docs/touchableopacity.html][1]
A wrapper for making views respond properly to touches.
This is done without actually changing the view hierarchy,
and in general is easy to add to an app without weird side-effects.
This mean I wrap my original view and it would work as I expected, But it's not.
From my experience, TouchableOpacity does not work well with absolute positioning. Perhaps if you remove that, the onPress will work again.
Also please note that it is EXTREMELY important what element you render first and what you render last.
For example, if you do:
<View>
<TouchableOpacity style={{position:'absolute'}} onPress={()=>
{console.log("It works or not?")}}>
</TouchableOpacity>
<Text style={styles.aStyle}>
Some text bla bla......
</Text>
</View>
There is a pretty good chance that the Text will be rendered on top of the TouchableOpacity, therefore you won't be able to get the onPress working.
Then since the position is absolute, all you have to do is render it as the last child of the View:
<View>
<Text style={styles.aStyle}>
Some text bla bla
</Text>
<TouchableOpacity style={{position:'absolute'}} onPress={()=>
{console.log("It works or not?")}}>
</TouchableOpacity>
</View>
I know this is old but I had this issue and nothing above worked until adding flex: 1 to my TouchableOpacity.
TouchableOpacity does not assume the style of the view it is the parent of. You need provide it style information.
Incase anyone else stumbles across this, and none of these suggestions work my fix was to instead import TouchableOpacity from react-native instead of react-native-gesture-handler
So
import { TouchableOpacity } from "react-native";
Instead of
import { TouchableOpacity } from "react-native-gesture-handler";
I had a similar issue after a lot of debugging I found out that negative margin was the problem.
Beware of negative margin when using TouchableOpacity
Debugging step:
Remove all the styling
Create fresh component without styling
Make sure it is working without styling
Then state adding your styling

Categories

Resources