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

ImageBackground don't show local image in react native + expo

I want to set an background image to my app. When I run expo start the image dosen't show.
this its my component:
import React from "react";
import { StyleSheet, Text, View, ImageBackground } from "react-native";
import { Asset } from "expo-asset";
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={{
uri: Asset.fromModule(require("./images/background.png")).uri,
}}
style={styles.image}
></ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center",
},
});
what I missed? I appreciate any help

According to the react native documentation:
"Note that you must specify some width and height style attributes."
https://reactnative.dev/docs/imagebackground

My simple react native project won't render, any suggestions?

I'm using the expo application on my phone to build a simple react native application, but I'm unable to render simple text. Is there something I'm doing wrong?
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import bball from './assets/bball.jpeg'
export default class App extends Component {
render() {
let pic = {
uri: bball
}
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={{pic}} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Have you tried this way?
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={require('./assets/bball.jpeg')} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

#Myers Nii-Ansah, try to import image like
const image = require('./my-icon.png');

just use directly bbal in the source of image.
<Image source={bbal} />
if you have url of any image use like this.
<Image source={{uri: "https://example.com/image.png"}} />
so you can do this way if any how you can have image url from your component state.
render() {
let pic = this.state.url ? { uri: this.state.url } : bbal
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={pic} />
</View>
)
}

How to fix the imported .js files in react-native?

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

Why won't my placeholder show up in TextInput

I can't see why the placeholder won't show up on both of the <TextInput>'s. Also, when the user types something, nothing shows up in those <TextInput> boxes. I would like to know why this is happening.
Here is App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here is Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity} from 'react-native';
class Login extends Component {
render() {
return(
<View>
<TextInput
placeholder={"Email"}
placeholderTextColor={"#E365F4"}
style={styles.input}
/>
<TextInput
placeholder={"Password"}
placeholderTextColor={"#f44242"}
style={styles.input}
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
backgroundColor: 'green',
paddingBottom: 20,
padding: 20,
paddingHorizontal: 150,
marginBottom: 10
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps'
}
});
export default Login;
Here is BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';
export default class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
resizeMode: 'cover'
// resizeMode: 'contain' // Shows image completely.
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
}
});`

Three issues here and it's all dealing with your styling.
By using paddingBottom: 20 and padding: 20, you are effectively reducing what can be shown in the TextInput into a sliver (if even that). To compensate for that, you need to adjust the height as well.
When you do adjust height, you may run into this double height issue. I don't know if that has since been fixed, but take a look at it if you are still seeing issues.
Lastly, paddingHorizontal: 150 pushes it too far horizontally making nothing appear. Reduce that to something much smaller like paddingHorizontal: 15.