weather/App.js at master · gmcalixto/weather · GitHub

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
import React,{Component,useState} from 'react';
import { Text,
         View,
         StyleSheet,
         KeyboardAvoidingView,
         TextInput,
         Platform,
         ImageBackground,
         Image } from 'react-native';


class App extends Component {

  state = {
    city: 'São Paulo'
  }

  render(){


return (
<KeyboardAvoidingView
  behavior="height">

  <ImageBackground
    source = {require('./image/colors.jpg')}
    style={styles.container}>


  <Image
    source={require('./image/cloud.png')}/>

	<Text style={[styles.largeText,styles.textStyle]}>{this.state.city}</Text>
	<Text style={[styles.smallText,styles.textStyle]}>Nuvens</Text>
	<Text style={[styles.largeText,styles.textStyle]}>18°</Text>
	<TextInput
      autoCorrect = {false}
	    placeholder = "Busque uma cidade"
		  placeholderTextColor = "white"
		  style = {styles.textInput}
		  clearButtonMode = "always"
      onChangeText={(value) => this.setState({ city: value })}
       />

  </ImageBackground>

</KeyboardAvoidingView>
  );

  }

}
export default App

const styles = StyleSheet.create({
  container:
		{ width: '100%',
      height: '100%',
      alignItems:'center',
		  justifyContent:'center'},
	 textStyle:{
	 	textAlign:'center',
	 	fontFamily:Platform.OS==='ios'?'AvenirNext-Regular':'Roboto'},
	 largeText:{
		fontSize:44},
	smallText:{
		fontSize:18},
  textInput: {
	    backgroundColor:'#666',
	    color:'white',
	    height: 40,
	    width: 300,
	    marginTop: 20,
	    marginHorizontal:20,
	    paddingHorizontal:10,
	    alignSelf: 'center'}
});