import React, { Component } from 'react';

import { View,Text,Image, TextInput,TouchableOpacity, CameraRoll} from 'react-

native';
//import Login from './Components/Login'
// const App = () =>{
// this.state={username : "", password : ""}
export default class Interest extends Component{
constructor(props){
super(props)
this.state={ name : "", mobile: "", adress: "", totalAmount: "",
rateOfInterest: "", collection: "" }
}
validate_field=()=>{
const { name, mobile, adress, totalAmount, rateOfInterest, collection} =
this.state
if(name == ""){
alert("Please Enter the Name")
return false
} else if(mobile == ""){
alert("Please Enter the Mobile no.")
return false
} else if(adress == "") {
alert("Please Enter Adress")
} else if(totalAmount == ""){
alert("Please Enter the Total Amount")
return false
}else if(rateOfInterest == ""){
alert("Please Enter the Rate of Interest")
return false
}else if(collection == ""){
alert("Please Enter the Collection")
return false
}
return true
}
make_api_call =()=>{
if(this.validate_field()){
alert("Successfully Submitted")
}
}
render(){
return(
<View style={{backgroundColor: "skyblue"}}>
<Text style= {{height:36,marginTop: "5%", fontSize: 22, marginLeft:
"2%", alignContent : "center", alignItems: "center", alignSelf: "auto"}}
>Header</Text>
<View style={{width : "100%", height : "100%", alignItems: "center" ,
backgroundColor: "skyblue"}}>
<TextInput placeholder = {"Name"} placeholderTextColor="#003f5c"
onChangeText={(value)=> this.setState({name : value})}
style ={{height:48 , fontSize: 20, width: "90%", borderWidth: 1.8,
marginBottom: "5%", marginTop : "10%"}}/>

<TextInput placeholder ={"Mobile"} placeholderTextColor="#003f5c"

onChangeText={(value)=> this.setState({mobile : value})}
style ={{height:48 ,fontSize: 20, width: "90%", borderWidth: 1.8,
marginBottom: "5%"}}/>
 <TextInput placeholder ={"Address"} placeholderTextColor="#003f5c"
onChangeText={(value)=> this.setState({adress : value})}
style ={{height:48 , fontSize: 20, width: "90%", borderWidth: 1.8,
marginBottom: "5%"}}/>

<TextInput placeholder ={"Total Amount"} placeholderTextColor="#003f5c"

onChangeText={(value)=> this.setState({totalAmount : value})}
style ={{height:48 , fontSize: 20, width: "90%", borderWidth: 1.8,
marginBottom: "5%"}}/>

<TextInput placeholder ={"Rate of Interest"}

placeholderTextColor="#003f5c"
onChangeText={(value)=> this.setState({rateOfInterest : value})}
style ={{height:48 , fontSize: 20,width: "90%", borderWidth: 1.8,
marginBottom: "8%"}}/>

<TextInput placeholder ={"Collectiion Drop down [Monthly / Yearly]"}

placeholderTextColor="#003f5c"
onChangeText={(value)=> this.setState({collection : value})}
style ={{height:48 , fontSize: 20, width: "90%", borderWidth: 1.8,
marginBottom: "5%"}}/>

<Text style = {{height:42 ,fontSize:20, justifyContent: "space-around",

width: "90%", borderWidth: 1.8, alignItems : "center", alignContent : "center",
alignSelf : "auto"}}>Payable</Text>

<TouchableOpacity style={{borderWidth:1 ,marginTop: "5%", height:42,

width:"50%", justifyContent: "space-around", alignItems: "center", backgroundColor:
"white"}}
onPress={()=>this.make_api_call()}>
<Text style = {{fontSize: 20}}>Submit</Text>
</TouchableOpacity>
</View>
</View>
)
}
}

HEADER, IMAGE ================================================>

import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';

import React from 'react';
import { StyleSheet,SafeAreaView, Text,Button,TouchableOpacity, View , Image,} from
'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Header from './components/Header';
import { render } from 'react-dom';
class App extends React.Component {
render() {
return (
// replace View by SafeAreaView
<SafeAreaView>
<Header />
<Text style={styles.text}>Tushar</Text>
<Image source= {require('./android/image/im.jpg')} style={styles.image}/>
<Button title = 'Press Me'
/>
<TouchableOpacity style= {{borderWidth: 1,height:42, width:"70%"}}>
<Text>Touch Me ok</Text>
</TouchableOpacity>

</SafeAreaView>
);
}

}
const AppNavigator = createStackNavigator({
Home: {
screen: App
}
})

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#fff',
// alignItems: 'center',
// justifyContent: 'center',
},
text: {
color: 'blue',
fontSize: 23,
textAlign: 'center',
},
image: {
width: 100,
height: 100,
alignContent: 'center',
alignSelf: 'center',
marginTop: "50%"
}
});

export default createAppContainer(AppNavigator) ;

NAVIGATION NAVIGATION

// React Navigation
npm install @react-navigation/native react-native-reanimated react-native-gesture-
handler react-native-screens react-native-safe-area-context @react-native-
community/masked-view @react-navigation/stack @react-navigation/bottom-tabs

// SVG
npm install react-native-svg

// iPhone X Helper
npm install react-native-iphone-x-helper

// React Native Maps

npm install react-native-maps --save-exact

// React Native Maps Directions

npm install react-native-maps-directions