Develop Reference

When importing page to App.js it shows up blank

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'
},

Unable to create round shape button in react native

I want to create round shape button for my app which is build upon react native. I had tried the code below but both of them didn't work out for me.
Code snippet 1: <Button title="+" rounded="true"/>
Code snippet 2: addButton: {
width: 20,
height: 20,
borderRadius: 40
}

Basically, you have to style up Views and Touchables to look like the button you want. Here's an example of a circular button component:
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
export default ({ title, onPress }) => <TouchableOpacity onPress={onPress} style={styles.button}>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
const styles = StyleSheet.create({
button: {
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
},
title: {
color: 'white',
}
})

Adding Custom font family to react native Text not working

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

Adding styles to a custom component through App.js in React Native

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
}
});

react native white screen

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.