-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
113 lines (109 loc) · 3.2 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React from 'react';
import { StyleSheet, View, StatusBar, TouchableWithoutFeedback, Alert, Keyboard, ScrollView,ImageBackground,Text } from 'react-native';
import { TextInput, Appbar, Button } from 'react-native-paper';
import Displaylove from './component/Displaylove'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fname: '',
sname: '',
result: "loading"
}
}
submit() {
if (this.state.fname == '' || this.state.sname == '') {
Alert.alert(
"Warning",
'Some thing went Wrong.... please Enter all Fields'
)
}
else {
fetch(`https://love-calculator.p.rapidapi.com/getPercentage?fname=${this.state.fname}&sname=${this.state.sname}`, {
"method": "GET",
"headers": {
"x-rapidapi-host": "love-calculator.p.rapidapi.com",
"x-rapidapi-key": "b15632a744msh02c17d5f151c924p15daaajsne70af54766f6"
}
})
.then(data => data.json())
.then(data2 => {
console.log(data2)
this.setState({
result: data2
})
})
this.setState(
{
fname: '',
sname: ''
}
)
}
}
render() {
return (
<View style={styles.container}>
{/* <ImageBackground source={require('./images/Back.jpg')} style={styles.BackImage}> */}
<StatusBar backgroundColor='#8565c4' barStyle="light-content" />
<Appbar.Header>
{/* <Appbar.BackAction
onPress={this._goBack}
/> */}
<Appbar.Content
title="Love % Calculator"
style={{ alignItems: 'center' }}
/>
{/* <Appbar.Action icon="magnify" onPress={this._handleSearch} />
<Appbar.Action icon="dots-vertical" onPress={this._handleMore} /> */}
</Appbar.Header>
<ScrollView>
<TextInput
label='Enter Name (Male)'
value={this.state.fname}
style={{ margin: 20,backgroundColor:'white' }}
onChangeText={text => this.setState({ fname: text })}
/>
<TextInput
label='Enter Name (Female)'
value={this.state.sname}
style={{ margin: 20,backgroundColor:'white' }}
onChangeText={text => this.setState({ sname: text })}
/>
<Button icon="tag-faces" mode="contained" style={{ height: 40, marginTop: 20, marginLeft: 30, marginRight: 30 }} onPress={() => {
this.submit();
}}
>
Calculate
</Button>
<Displaylove style={{ marginTop: 20 }} data={this.state.result} />
</ScrollView>
<Text style={styles.text1}>[email protected]</Text>
{/* </ImageBackground> */}
</View>
);
}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e8f4f8',
},
BackImage:
{
width: '100%',
height: '100%'
},
text1:
{
fontSize:12,
textAlign:'center',
marginLeft:200,
marginRight:5,
marginTop:10,
marginBottom:10,
color:'#8565c4',
fontWeight: "bold"
}
});