React-Native bordered text input? - forms

Question

I am trying to create a login form like below on React Native:
I am having trouble creating a Form/ TextInput with solid border (don't worry about other CSS styling. I just need to get the solid border.)
Imports:
import { View, Text, TextInput } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements';
import { Container, Header, Content, Form, Item, Input, Label, Button } from 'native-base';
This is the style:
const styles = {
container: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
},
loginSquare: {
backgroundColor: '#FFFFFF',
height: 300,
width: 300,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center'
},
loginHeader: {
backgroundColor: '#660008',
width: '100%',
height: 75
},
loginText: {
color: '#FFFFFF'
},
loginForm: {
width: 250,
height: 50
},
loginButton: {
backgroundColor: '#660008'
},
loginForm: {
height: 75,
marginLeft: 25,
marginRight: 25,
borderColor: 'gray'
}
}
and code:
render(){
return (
<View style={styles.container}>
<View style={styles.loginSquare}>
<View style={styles.loginHeader}>
<Text style={styles.loginText}>Login</Text>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Email"
/>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Password"
/>
</View>
<View>
<Button block style={styles.loginButton}>
<Text style={styles.loginText}>Sign In</Text>
</Button>
</View>
</View>
</View>
The code sample above was my attempt using RN's TextInput component + pure CSS. I am also looking at NativeBase and RNElements (RNElements forms API: here, NativeBase forms API: here), but RN Elements does not mention anything about Text Input + Border, and while Native Base mentioned it, I tried, unsuccessfully:
<Form bordered>
<Item>
<Input placeholder="Username" />
</Item>
</Form>
What is one way I can create bordered input like the first screenshot?

Answer 1

If you want a border input then you need to add the borderWidth and borderColor prop to your TextInput style prop. The code for creating these 2 TextInput with border will be as below:-
<View style={{
justifyContent: 'center',
alignItems: "center"
}}>
<TextInput
style={{
borderWidth: 2, // size/width of the border
borderColor: 'lightgrey', // color of the border
paddingLeft: 10,
height: 75
}}
placeholder="Email"
/>
<TextInput
style={{
borderWidth: 2,
borderColor: 'lightgrey',
margin: 10,
height: 75,
paddingLeft: 10
}}
placeholder="Password"
/>
</View>
This will create your TextInput with your desired border :)

Answer 2

<View tyle={{flexDirectoin:'column',alignItems:'center'>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
</View>
Something roughly like this will do