native base UI components Example

Native Base  UI components for React Native Login form example 

Install NativeBase

npm install native-base --save

App.js

import React,{Component} from 'react';
import {View,StyleSheet,Text,Image} from "react-native";
import { Container, Header, Content, Form, Item, Input, Label,Button } from 'native-base';


export default class App extends Component
{

  render()
  {
    return(
    <View style={styles.container}>

<Image source={{uri: 'https://www.appcoda.com/wp-content/uploads/2016/06/Banner2-1024x375.jpg'}}  
       style={{width: 340, height: 160}} />  

    <Text style={{fontSize:25,fontWeight:"bold",color:"tomato",marginTop:20}}>Welcome Back</Text>
         <Item style={{marginTop:20}} floatingLabel>
              <Label>Username</Label>
              <Input/>
            </Item>

            <Item style={{marginTop:20}} floatingLabel>
              <Label>Password</Label>
              <Input />
            </Item>

            <View style={{marginTop:20,flex:1,flexDirection:"row",flexWrap:"wrap",justifyContent:"space-between"}}>
            <Button block success>
            <Text style={styles.textDecoration}>Login</Text>
              </Button>

              <Button block primary>
            <Text style={styles.textDecoration}>Sign Up</Text>
          </Button>
            </View>

    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex:1,
   flexDirection:"column",
   margin:10,
  },
  textDecoration:{
    padding:40,color:"#fff",fontSize:18,textAlign:"center"
  }
});
NativeBase in React Native


For more information Check out:https://docs.nativebase.io/