React-Native bordered text input?

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