I'm trying to create a login form in React Native that includes a button to view and obscure the password input. I want the button and input on the same line, so I wrap it in a View which I set style to {flex:1, flexDirection:'row'}, but as soon as I do, the password input element seems to no longer take up space and the Sign In button overlaps on top of it. This only seems to happen when I add flex:1 to the flex-wrapper View. Only part of the input is visible because of the marginBotton on the parent View element. If that is removed, the entire TextInput is covered by the Button.
Image may be NSFW.
Clik here to view.
Overlapping with marginBottom removed from parent View:
Image may be NSFW.
Clik here to view.
<View style={styles.container}><Text>Login</Text><View style={{marginBottom: 16}}><Text nativeID="username" role="label">Username or E-mail Address</Text><TextInput style={styles.textInput} onChangeText={t => setData({...data, username: t})} aria-labelledBy='username' aria-errormessage='username' /></View><View style={{marginBottom: 16}}><Text nativeID="password">Password</Text><View style={{flex: 1, flexDirection: 'row'}}> <!-- flex-wrapper --><TextInput style={styles.textInput} secureTextEntry={secureEntry} onChangeText={t => setData({...data, password: t})} aria-labelledBy='password' aria-errormessage='password' /><Pressable onPress={toggleSecure} style={{borderWidth: 1, height: 16}} ><Text>X</Text></Pressable></View></View><Button onPress={tryToSignIn} title="Sign In" /></View>const styles = StyleSheet.create({ container: { padding: 16, paddingTop: Constants.statusBarHeight + 10 }, textInput: { height: 40, padding: 10, margin: '1rem', borderWidth: 1 }});