I'm new on React-Native, really Im new on React. Im doing the exercises from Learning-React-Native.'s book. But there are a lot of things that are differents, I think for version. My code shows a white screen on the ADV and suppose it must show another thing. Console doesn't show any error.
Book suggests in Forecast.js file, render: function(){...} but it launch me an error on this way for that reason I change it just by render() {...}
This is my WeatherProject.js
// Importing react Components module
import React, { Component } from 'react';
// Importing another modules for React.
import {
Platform,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
import Forecast from './Forecast';
/*
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
*/
// WeatherProject class for WeatherProject.js
export default class WeatherProject extends Component {
// App exec always as first the constructor method
constructor(props){
/*
* La palabra clave super se usa para acceder y llamar funciones en el elemento primario de un objeto.
* The super keyword can also be used to call functions on a parent object.
* The parent class is Component.
*
* super([arguments]); // calls the parent constructor.
* super.functionOnParent([arguments]);
*
*/
super(props);
// Constructor controls the first state of variables that can be modified by this keyword.
this.state = {
zip: '',
forecast: {
main: 'Clouds',
description: 'few clouds',
temp: 45.7
}
}
}
// _handleTextChange method use a event for change a value of zip variable with this.setState
_handleTextChange(event) {
console.log(event.nativeEvent.text);
// Getting the event value and setting on zip variable
this.setState({
zip: event.nativeEvent.text
});
}
// Render de application.
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
You input {this.state.zip}.
</Text>
<Forecast
main={this.state.forecast.main}
description={this.state.forecast.description}
temp={this.state.forecast.temp}/>
<TextInput
style={styles.input}
returnKeyType='go'
onSubmitEditing={this._handleTextChange}/>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
input: {
fontSize: 20,
borderWidth: 2,
height: 40,
},
});
This is my Forecast.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
class Forecast extends Component {
render() {
return (
<View>
<Text style={styles.bigText}>
{this.props.name}
</Text>
<Text style={styles.mainText}>
Current conditions: {this.props.description}
</Text>
<Text style={styles.bigText}>
{this.props.temp}°F
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigText: {
flex: 2,
fontSize: 20,
textAlign: 'center',
margin: 10,
color: "#FFF"
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: 'center',
color: "#FFF"
}
});
module.exports = Forecast;
There isn't any error here. Your text is same color with screen so you can't see it. Just change text color in your Forecast
const styles = StyleSheet.create({
bigText: {
flex: 2,
fontSize: 20,
textAlign: 'center',
margin: 10,
color: "black" // Change it to black
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: 'center',
color: "black" // Change it to black
}
});
A white screen means a fatal error and the entire app has crashed. Sometimes it can be the smallest littlest hardest bug to find, such as const userID = user.uid and user is undefined so the app crashes and can go white. I recommend integrating bugsnag as they have a free tier and will help you figure out where the errors are occurring.
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 only started learning React native a week ago and here i'm trying to add animation to an app that loads films on search from the TMDB api, it works fine, but when trying the animation and after i press the search button it displays and error saying :
undefined is not an object (evaluating 'new _reactNativeReanimated.Animated.Value')
* components\FilmItem.js:18:17 in constructor
to be honest i searched on the net but i didn't find a similar problem so can anyone help ?
here's my code :
ps: the app works perfectly fine before trying the animation, i added the comments ' //>>> ' to the code i added for the animation, also i added some screens
search screen before validating a search
error screen
// Components/FilmItem.js
import React from "react";
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
Dimensions
} from "react-native";
import { getImageFromApi } from "../Api/TMDBApi";
import { Animated } from "react-native-reanimated";
class FilmItem extends React.Component {
//>>> added the constructor
constructor(props) {
super(props);
this.state = {
positionLeft: new Animated.Value(Dimensions.get("window").width)
};
}
//>>> added the componentDidMount()
componentDidMount() {
Animated.spring(
this.state.positionLeft, {
toValue: 0
}).start()
}
_displayFavoriteImage() {
if (this.props.isFilmFavorite) {
return (
<Image
source={require("../images/icons8-heart-filled.png")}
style={styles.favorite_image}
/>
);
}
}
render() {
const film = this.props.film;
const displayDetailForFilm = this.props.displayDetailForFilm;
return (
//>>> encapsulated the Touchable opacity inside a Animated.view with a style
<Animated.View style={{ left: this.state.positionLeft }}>
<TouchableOpacity
onPress={() => displayDetailForFilm(film.id)}
style={styles.main_container}
>
<Image
style={styles.image}
source={{ uri: getImageFromApi(film.poster_path) }}
/>
<View style={styles.content_container}>
<View style={styles.header_container}>
{this._displayFavoriteImage()}
<Text style={styles.title_text}>{film.title}</Text>
<Text style={styles.vote_text}>{film.vote_average}/10</Text>
</View>
<View style={styles.description_container}>
<Text style={styles.description_text} numberOfLines={6}>
{film.overview}
</Text>
{/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
</View>
<View style={styles.date_container}>
<Text style={styles.date_text}>Sorti le {film.release_date}</Text>
</View>
</View>
</TouchableOpacity>
</Animated.View>
)
}
}
const styles = StyleSheet.create({
main_container: {
height: 190,
flexDirection: "row"
},
image: {
width: 120,
height: 180,
margin: 5,
backgroundColor: "gray"
},
content_container: {
flex: 1,
margin: 5
},
header_container: {
flex: 3,
flexDirection: "row"
},
title_text: {
fontWeight: "bold",
fontSize: 20,
flex: 1,
flexWrap: "wrap",
paddingRight: 5
},
vote_text: {
fontWeight: "bold",
fontSize: 16,
color: "#666666"
},
description_container: {
flex: 7
},
description_text: {
fontStyle: "italic",
color: "#666666"
},
date_container: {
flex: 1
},
date_text: {
textAlign: "right",
fontSize: 14
},
favorite_image: {
width: 25,
height: 25,
marginRight: 5
}
});
export default FilmItem;
I believe you are not importing your dependencies correctly - make sure you differentiate between default and named exports i.e.
import Animated, { Value } from 'react-native-reanimated'
then you would have e.g.
positionLeft: new Value(Dimensions.get("window").width)
See here for ES6 import syntax.
I am currently trying to add a custom font to a react native app but after trying almost all answers i could find on SO and on google, it still doesn't work.
i tried to make react native aware of the font by add
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
to the package.json and then running react-native link and also using the re-run commad. But still doesn't work.
Below is the code
app.js
import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';
export default function App() {
useEffect(() => {
async function loadFont() {
return await Font.loadAsync({
righteous: require('./assets/fonts/Righteous-Regular.ttf'),
});
}
loadFont();
}, []);
return (
<View style={styles.container}>
<Image style={styles.imager} source={imager} />
<Text
style={{
fontSize: 30,
fontWeight: 'bold',
paddingTop: 30,
fontFamily: 'righteous',
}}
>
Request Ride
</Text>
<Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
Request a ride and get picked up by a nearby community driver
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
imager: {
width: 200,
height: 200,
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowRadius: 10,
shadowOpacity: 1,
},
});
I have the font Righteous-Regular.ttf in ./assets/fonts but when i run this code, i get this error
fontFamily "righteous" is not a system font and has not been loaded through Font.loadAsync.
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Font.loadAsync.
I researched but still can't find the solution to this. Please what could be the issue and how do i go about it?
You are trying to use the font before the font is loaded. You need to do something like this.
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';
export default function App() {
// use state for font status.
const [isFontReady, setFontReady] = useState(false)
useEffect(() => {
async function loadFont() {
return await Font.loadAsync({
righteous: require('./assets/fonts/Righteous-Regular.ttf'),
});
}
// after the loading set the font status to true
loadFont().then(() => {
setFontReady(true)
});
}, []);
return (
<View style={styles.container}>
<Image style={styles.imager} source={imager} />
{/* render the text after loading */}
{isFontReady && <Text
style={{
fontSize: 30,
fontWeight: 'bold',
paddingTop: 30,
fontFamily: 'righteous',
}}
>
Request Ride
</Text>}
<Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
Request a ride and get picked up by a nearby community driver
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
imager: {
width: 200,
height: 200,
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowRadius: 10,
shadowOpacity: 1,
},
});
It is up to you to display the element after the font is installed or to display it with a different font before.
Are you using react-native greater than or equal to 0.60? What you have done has worked in my project, but my project is below react-native 0.60. Above 0.60, apparently you have to change react-native.config.js instead of changing package.json. Here is a link to a tutorial that goes over that difference. It is in steop 3 of the tutorial: https://medium.com/#mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
Ok guys, I've been trying to figure this out for the past 3 days and I can't find a solution, please keep in mind that I am self-taught and I've been studying react native for like 3 months now.
Anyways, I have a custom button with a defined style and everytime that I render my button it loads with the style presented in its file:
Botaozudo.js:
import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
export default class Botaozudo extends React.Component {
render() {
const { titulo, evento } = this.props;
return (
<TouchableOpacity
style={styles.button}
onPress={() => evento()}>
<Text style={styles.txtButton}>{titulo}</Text>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
btnAlinhar: {
alignItems: 'flex-end',
marginRight: 20,
paddingTop: 7
},
button: {
backgroundColor: '#a082c9',
width: 100,
height: 40,
borderRadius: 10
},
button2: {
backgroundColor: '#a082c9',
width: 300,
height: 90,
borderRadius: 10
},
txtButton: {
color: '#fff',
fontSize: 20,
textAlign: 'center',
paddingVertical: 5
}
});
Lets say that I want two different buttons on my App.js, one that looks like exactly as above and another one with different size and background color. In my mind I just have to do something like this (for the different one):
<Botaozudo
style={styles.newBtn}
titulo='I am a button'
event={() =>
console.log('yup I am a button')}/>
const styles = StyleSheet.create({
newBtn: {
backgroundColor: '#7c7070',
width: 200,
height: 100
}
});
But the thing is that my Botaozudo doesn't know what that style={} prop means. And what I can't figure out is HOW to make my custom component understand it.
Thanks in advance,
Install https://www.npmjs.com/package/prop-types
Then in Botaozudo.js:
import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
export default class Botaozudo extends React.Component {
static propTypes = {
// Custom style for Botaozudo. Requires object
componentStyle: PropTypes.object,
};
static defaultProps = {
componentStyle: styles,
};
render() {
const { titulo, event, componentStyle } = this.props;
return (
<TouchableOpacity style={componentStyle.newBtn} onPress={() => event()}>
<Text style={styles.txtButton}>{titulo}</Text>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
btnAlinhar: {
alignItems: 'flex-end',
marginRight: 20,
paddingTop: 7,
},
button: {
backgroundColor: '#a082c9',
width: 100,
height: 40,
borderRadius: 10,
},
button2: {
backgroundColor: '#a082c9',
width: 300,
height: 90,
borderRadius: 10,
},
txtButton: {
color: '#fff',
fontSize: 20,
textAlign: 'center',
paddingVertical: 5,
},
});
and in App.js:
<Botaozudo
componentStyle={styles}
titulo='I am a button'
event={() =>
console.log('yup I am a button')}/>
const styles = StyleSheet.create({
newBtn: {
backgroundColor: '#7c7070',
width: 200,
height: 100
}
});
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().