Styling NativeBase Inputs - react-native

Question

I want to change the border size of an input, the color, etc. For some reason when I stack 2 inputs on top of each other, and I add marginTop to the input underneath, or attempt to resize the inputs, and then center them in the page, the borders on either the left or the bottom disappear.
<View style={styles.formAlign}>
<Item regular style={styles.email}>
<Input placeholder='Email' />
</Item>
<Item regular style={styles.password}>
<Input placeholder='Password' />
</Item>
</View>
email:{
borderWidth:4,
color:'red'
},
password:{
},
formAlign:{
justifyContent:'center',
alignItems:'center'
},

Answer 1

tried your code, modified a bit
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native'
import { Item, Input } from 'native-base';
export default class App extends Component {
render() {
return (
<View style={styles.formAlign}>
<Item style={styles.email}>
<Input placeholder='Email' style={styles.input} />
</Item>
<Item style={styles.password}>
<Input placeholder='Password' style={styles.input} />
</Item>
</View>
);
}
}
const styles = StyleSheet.create({
email: {
width: 300,
},
password: {
width: 300,
marginTop: 15,
},
formAlign: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
borderWidth: 1,
borderColor: 'blue'
}
});
Got this result

Answer 2

<Input
size="lg"
colorScheme="gray"
placeholder="Search"
variant="filled"
py="2"
px="2"
fontFamily="body"
style={styles.input}
borderRadius="20"
_focus={{
backgroundColor: "gray.200",
borderColor: "none",
}}
InputLeftElement={
<Icon
ml="2"
size="5"
color="gray.400"
as={<Ionicons name="ios-search" />}
/>
}
/>
In case you want to change when focused, I think this might help. Add this as an input attribute.

Answer 3

import React, { Component } from 'react';
import { Input, Button, Item, Text, Icon } from 'native-base';
export default class App extends Component{
render(){
return(
<Item rounded style={styles.itemStyle}>
<Icon active style={styles.iconstyle} name='navigate' />
<Input keyboardType="default"
getRef={(input) => this.nameInput = input}
returnKeyType='next'
placeholder="Enter Trip Name"
placeholderTextColor="#FFFFFF"
style={{ color: '#ffffff' }}
onSubmitEditing={() => this._focusInput('dayInput')}
value={this.state.tripName}
defaultValue={this.state.tripName}
onChangeText={tripName => this.setState({ tripName })} />
</Item>
)
}
}