I am building a simple weather app and having some issues render the forecast. Not sure if it is the styling. I know the api call through the browser and no errors come from the call in android studio
App.JS
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
import Forecast from './components/Forecast';
import Weather from './components/Weather'
class WeatherApp extends Component {
constructor(props){
super(props);
this.state = {
//setting the state to an empty string while keeping the forecast null
zip: "",
forecast: null
};
}
_handleTextChange = event => {
//this function handles the text change when typing in a zip
let zip = event.nativeEvent.text;
Weather.fetchForecast(zip).then(forecast => {
this.setState({forecast: forecast})
})
}
render() {
let content = null;
if(this.state.forecast !== null) {
content = (
<Forecast
main = {this.state.forecast.main}
description = {this.state.forecast.description}
temp = {this.state.forecast.temp}
/>
)
}
return (
<View style = {styles.container}>
<Text style = {styles.welcome}>
Please Input {this.state.zip}
</Text>
<TextInput
style = {styles.input}
onSubmitEditing={this._handleTextChange}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#666666',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
input: {
fontSize: 20,
borderWidth: 2,
padding: 2,
height: 40,
width: 100,
textAlign: 'center'
},
});
export default WeatherApp;
this is my forecast.js that is suppose to render the forecast after the state is set.
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
// component renders forecast based on zip code
class Forecast extends Component {
render(){
return(
<View style = {styles.container}>
<Text style = {styles.bigText}>
{this.props.main}
</Text>
<Text style = {styles.mainText}>
Current condition:
{this.props.description}
</Text>
<Text style = {styles.bigText}>
{this.props.temp}
</Text>
</View>
);
}
};
const styles = StyleSheet.create({
container: { height: 130 },
bigText: {
flex: 2,
fontSize: 20,
textAlign: "center",
margin: 10,
color: "#FFFFFF"
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: "center",
color: "#FFFFFF"
}
});
export default Forecast;
in the react-devtools I do not even see the component render or show. Is this the result of styling from not using flexbox properly?
You declare content to be a Forecast component, but never actually reference it in your render().
Related
I am fairly new to React Native and am struggling to get this page to show up when importing it to App.js. It was working by itself, but once I tried to clean things up and put the code into its own file and just call upon it, things went south.
To break things down;
Welcome.js contains the code of a "welcome page" I am trying to create
App.js is the default file created that basically just calls Welcome
and GetStartedButton is just the code of a button that is imported into Welcome but I dont think its necessary to provide.
When running App.js I am not receiving any errors, my screen is just white!
Thank you for any help, I appreciate it more than you know. I apologize for my ignorance!
It wouldnt surprise me if it was just another typo.
I am sure my code is horrible btw! Assuming my styles were an interesting way to do things! Learning...
Welcome.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import GetStarted from './src/components/GetStartedButton';
export default class Welcome extends Component {
render() {
return (
<View style={styles.containerMain}>
<View style={styles.containerClub}>
<Text style={styles.title}>Word</Text>
</View>
<View style={styles.containerCaption}>
<Text style={styles.caption}> Words Words Words </Text>
</View>
<View style={styles.containerBottom}>
<GetStarted text='Get Started' color='#E50061' />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
containerClub: {
position: 'absolute',
bottom: 288
},
containerCaption: {
position: 'absolute',
bottom: 250
},
/* To style the button and positioning*/
containerBottom: {
position: 'absolute',
bottom: 100
},
/* To style "Word"*/
title: {
fontSize: 35,
fontWeight: "bold",
},
/* To style "Words Words Words"*/
caption:
{
fontSize: 16
}
}
)
App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import Welcome from './src/pages/Welcome';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Welcome/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
}
);
GetStartedButton.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
const GetStarted = props => {
const content = (
<View style={[styles.button, {backgroundColor: props.color}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
)
return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
padding: 20,
width: 340,
borderRadius: 8,
alignItems: 'center',
},
text: {
color: 'white',
fontSize: 20,
justifyContent: 'center',
alignItems: 'center',
}
});
export default GetStarted;
The problem is in your Welcome component styles. You colored your texts white, so... it is all white.
const styles = StyleSheet.create({
// (...)
/* To style "word"*/
title: {
color: 'white', // remove it!
fontSize: 35,
fontWeight: "bold",
},
/* To style "words words words"*/
caption:
{
color: 'white', // remove it!
fontSize: 16
}
#edit
Also you did not apply your styles in your App component. It should look like this:
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Welcome/>
</View>
)
}
}
Try changing backgroundColor to something else other than white like
containerMain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
I have written simple React Native app which shall display two background on first screen which one is overlay on one another.The app runs but it showing only a blank white screen. I have imported the login.js files from './src/components/login' in the App.js files but its not showing anything in screen beside white color?
Do I need to install any other dependency to connect with imported .js files in react-native? I am using the react-native-cli: 2.0.1
react-native: 0.57.8 and tools for android studio 3.2.
.src/components/login
import React, { Component } from 'react';
import { AppRegister, StyleSheet, Text, View, Image } from 'react-native';
export default class Login extends Component {
render() {
return (
<View style = {styles.container}>
<View style = {styles.backgroundContainer}>
<Image style = {styles.backdrop} source = {require('../../images/vape.jpg')} resizeMode = 'cover'/>
</View>
<View style = { styles.overlay}>
<Image
style={styles.logo}
source={require('../../images/smoke.jpg')}/>
<Text style={styles.title}>Ada Smoke Shop</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
},
backgroundContainer: {
flex:1,
position: 'absolute',
top:0,
bottom:0,
left:0,
right:0
},
overlay: {
opacity: 0.5,
backgroundColor: '#000000',
flexDirection: 'column',
top:100
},
logoContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center',
},
logo: {
backgroundColor: '#000000',
top:150,
left: 50,
width: 200,
height: 200
},
backdrop: {
flex:1,
},
title: {
color: '#B03A2E',
marginTop:150,
width:300,
height:300,
fontSize: 30,
fontStyle: 'italic',
fontFamily: 'Baskerville',
textAlign: 'center',
opacity: 10
},
});
App.js
import React, { Component } from 'react';
import { AppRegister, StyleSheet, Text, View, Image } from 'react-native';
import login from './src/components/login';
export default class App extends Component {
render() {
return (
<View style = {styles.container}>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center'
}
});
Login component is imported, but not used. Your render in App.js should be something like this:
render() {
return (
<View style = {styles.container}>
<Login />
</View>
);
}
I've got a Text component inside a TouchableOpacity which I want to change the color depend on a var.
Here is my code:
import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
var flag = false;
export default class MyTest extends Component {
changeColor() {
flag = true;
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
onPress={this.changeColor.bind(this)}
>
<Text style={[{ color: "blue" }, flag ? { color: "red" } : false]}>
One
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#F5FCFF"
}
});
I have tried to use this.state.textColor but no result. I've also tried to use that in styles variable but again, not working.
Any idea?
The flag variable is not in your component state, so the component will not re-render when it changes.
Put it in your component state instead and toggle it with setState and it will work.
class MyTest extends Component {
state = { flag: true };
changeColor = () => {
this.setState(previousState => {
return { flag: !previousState.flag };
});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
onPress={this.changeColor}
>
<Text style={{ color: this.state.flag ? "red" : "blue" }}>One</Text>
</TouchableOpacity>
</View>
);
}
}
You have to give style to the Text for color.
<Text style={styles.steelblue}>Sign Up</Text>
Give this style to Text.
const styles = StyleSheet.create({
steelblue: {
color: "steelblue",
},
});
try this example this may help you to solve problem.
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={[styles.setFontSize,styles.setColorRed]}> React Native Font example 1</Text>
<Text style={[styles.setFontSize,styles.setColorPink]}> React Native Font example 2</Text>
<Text style={[styles.setFontSize,styles.setColorPurple]}> React Native Font example 3</Text>
<Text style={[styles.setFontSize,styles.setColorBlue]}> React Native Font example 4</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
setFontSize: {
fontSize: 20,
fontWeight : 'bold'
},
setColorRed : {
color: '#f44336'
},
setColorPink :{
color: '#e91e63'
},
setColorPurple :{
color: '#9c27b0'
},
setColorBlue :{
color: '#2196f3'
},
});
I'm studying React Native with this site https://www.tutorialspoint.com/react_native/react_native_animations.htm
However, there is a problem while i'm trying to open app on iPhone. According to error it cannot find variable, though it's imported.
import React, { Component } from 'react';
import { View, LayoutAnimation, TouchableOpacity, Text, StyleSheet} from 'react-native';
export default class Animations extends Component {
state = {
myStyle: {
height: 100,
backgroundColor: 'red'
}
};
expandElement = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({
myStyle: {
height: 400,
backgroundColor: 'red'
}
})
};
collapseElement = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
this.setState({
myStyle: {
height: 100,
backgroundColor: 'red'
}
})
};
render() {
return (
<View>
<View>
<View style={this.state.myStyle}/>
</View>
<TouchableOpacity>
<Text style={styles.button} onPress = {this.expandElement}>
Expand
</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button} onPress = {this.collapseElement}>
Collapse
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
button: {
borderWidth: 1,
borderColor: 'red',
color: 'red',
textAlign: 'center',
marginTop: 50,
padding: 10
}
});
Ah... I've found the problem. It was in other component which had styles but no elements to them and had no imported StylesSheet since I corrected it to new conditions but forgot about block with styles.
I am rendering a ListView in a React Native app that I'm building and am finding that a parent View container for the row is not expanding to fit all the content within it and I'm not sure why.
See in screenshot below how the second row within the row is rendered within the margin of the row view:
Component is as follows:
import React from 'react';
import { connect } from 'react-redux';
import {
View,
Text
} from 'react-native';
import { Icon } from 'native-base';
const ListViewRow = (props) => {
const { booking } = props;
const guest = props.guests[booking.guest_id];
return (
<View style={styles.rowStyle}>
<View style={styles.leftContentStyle}>
<View>
<Text>{guest.fullname}</Text>
</View>
<View>
<Text>{booking.start_date} - {booking.end_date}</Text>
</View>
</View>
<View style={styles.rightContentStyle}>
<Icon name='ios-arrow-forward' />
</View>
</View>
);
};
const styles = {
rowStyle: {
flex: 1,
borderBottomWidth: 1,
padding: 10,
backgroundColor: '#fff',
justifyContent: 'space-between',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative'
},
leftContentStyle: {
alignItems: 'stretch'
},
rightContentStyle: {
flexDirection: 'row',
alignItems: 'center'
}
};
const mapStateToProps = state => {
return { guests: state.guests };
};
export default connect(mapStateToProps)(ListViewRow);