Develop Reference

KeyboardAvoidingView on Android creates a grey box above keyboard

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?

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.

ReactNative ScrollView won't scroll or zoom

Using create-react-native-app, testing with an Android device. I'm trying to display a full screen photo in a scroll view. The image displays larger than my screen but I can neither scroll nor zoom.
export default function Photo({ filename }) {
return (
<ScrollView
centerContent
contentContainerStyle={{ flex: 1 }}
maximumZoomScale={2}
minimumZoomScale={1}
>
<View style={{ flex: 1 }}>
<Image style={{ flex: 1 }} source={{ uri: assetPath(filename) }} />
</View>
</ScrollView>
);
}
This component is rendered from a top level react-router Route:
<NativeRouter>
<AndroidBackButton>
<View style={styles.container}>
<Route path="/" exact component={PhotoListContainer} />
<Route
path="/photos/:filename"
component={({ match }) => (
<Photo filename={match.params.filename} />
)}
/>
</View>
</AndroidBackButton>
</NativeRouter>
In the examples I've seen, there's one notable difference: the Image element usually does not have any styles. But if I remove the style property, the image disappears altogether. I suspect at least part of my problem stems from not understanding flex and being new to RN, and that the solution is simple. Please help if you can!

These properties, minimumzoomscale and maximumzoomscale only works for IOS not for Android
Link to docs
Second thing is Scroll only available if your view is getting out of screen.

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