Styling NativeBase Inputs

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