I'm looking for away to disable or alter the automatic zoom behavior I get when I select a TextInput in a react-native-web project. This is not an issue I'm having in react-native projects, only in projects using react-native-web. It throws off my layout because it zooms in when I select a TextInput, but never zooms back out, even when I navigate to another screen in the same project. I end up with a screen that is wider than the phone screen and has a scroll bar on bottom.
Here are the solutions I've tried so far that haven't worked for me:
Set height and maxHeight of the TextInput to the same value, and set width and maxWidth of the TextInput to the same value. This seems to be completely ignored and make no difference.
Contain the TextInputs within a View of set height/width and/or contain the whole component or screen within a View of set height/width. This doesn't work because TextInputs won't stay inside the boundaries of the View if it expands.
Put margin and padding around the main View of the screen. This will just compensate for the behavior instead of stopping it. It's not really sufficient.
I've looked at documentation for aspect ratio but I don't think this will help since as far as I can tell aspect ratio is not changing.
Here is an example of code that I'm having this issue with:
<TextInput style={styles.inputsTwo}
accessible={this.state.access}
placeholder="Email"
clearButtonMode="always"
onChangeText={text => this.setState({email: text})}
value={this.state.email}
/>
And here's my styling:
inputsTwo: {
textDecorationLine: 'underline',
marginBottom: 10,
textAlign: 'left',
marginLeft: 30,
borderBottomColor: 'rgb(85, 99, 255)',
borderBottomWidth: 2,
fontFamily: 'HelveticaNeue',
height: 48,
maxHeight: 48,
width: 300,
maxWidth: 300
},
When I open up developer tools in a browser I see that this is what react-native-web has translated this into:
<div dir="auto" data-focusable="true" tabindex="0" class="rn-borderTopWidth-13yce4e rn-
borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-
deolkf rn-display-1471scf rn-fontStyle-o11vmf rn-fontVariant-ebii48 rn-fontWeight-gul640
rn-lineHeight-t9a87b rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-
marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-
paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
style="align-items: center; color: rgb(255, 0, 0); font-family: Helvetica-Bold; font-size:
15px; justify-content: center; text-align: center; -webkit-box-align: center; -webkit-box-
pack: center;"></div>
<input placeholder="Email" autocapitalize="sentences" autocomplete="on" autocorrect="on"
dir="auto" spellcheck="true" type="text" data-focusable="true" class="rn-MozAppearance-
97bpaa rn-WebkitAppearance-n1uzsy rn-backgroundColor-1niwhzg rn-borderTopColor-nqhrom rn-
borderRightColor-1878er4 rn-borderLeftColor-fpul1g rn-borderTopLeftRadius-ou6ah9 rn-
borderTopRightRadius-t12b5v rn-borderBottomRightRadius-zmljjp rn-borderBottomLeftRadius-
pm2fo rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-
borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-
borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-fontSize-1b43r93 rn-paddingTop-wk8lta rn-
paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-resize-1dz5y72"
value="" style="border-bottom-color: rgb(85, 99, 255); border-bottom-width: 2px; font-
family: HelveticaNeue; height: 48px; margin-bottom: 10px; margin-left: 30px; max-height:
48px; max-width: 300px; text-align: left; text-decoration: underline; width: 300px;">
Any suggestions are appreciated. Thanks,
