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

React Native TypeError: undefined is not an object (evaluating '_ref.item')

I'm trying to do an Instagram clone, but when using a FlatList I'm getting this error:
Error: TypeError: undefined is not an object (evaluating '_ref.item')
I followed this tutorial on youtube and my code is basically the same to the one on the video, I believe that probably the docs have changed due to the video was uploaded 1 year ago.
Using React Native Cli & android studio
import React, {Component} from "react";
import {FlatList} from "react-native";
import Post from "../presentation";
class PostFeed extends Component{
_renderPost({ item }) {
return <Post />;
}
_returnKey(item) {
return item.toString();
}
render() {
return (
<FlatList
data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
keyExtractor={this._returnKey}
renderItem={this._renderPost()}
/>
);
}
}
export default PostFeed;
Here's the InstaClone.js
import React, {Component} from "react";
import { View, Text, StyleSheet, Image, Dimensions, TouchableOpacity } from "react-native";
import config from "./config";
import { PostFeed } from './components/container';
class InstaClone extends Component {
render() {
return (
<View style={{ flex: 1, width: 100+"%", height: 100+"%"}}>
<View style={styles.tempNav}>
<Text>Instagram</Text>
</View>
<PostFeed/>
</View>
);
}
}
export default InstaClone;
const styles = StyleSheet.create({
tempNav: {
width:100+"%",
height: 56,
backgroundColor:"rgb(250,250,250)",
borderBottomColor:"rgb(233,233,233)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
userBar: {
width:100+"%",
height: config.styleConstants.rowHeight,
backgroundColor: "#fff",
flexDirection: "row",
paddingHorizontal: 10,
justifyContent: "space-between"
},
userPic: {
height:40,
width:40,
borderRadius:20
},
iconBar: {
height: config.styleConstants.rowHeight,
width: 100 + "%",
borderColor:"rgb(233,233,233)",
borderTopWidth: StyleSheet.hairlineWidth,
borderBottomWidth: StyleSheet.hairlineWidth,
flexDirection: "row"
},
icon: {
marginHorizontal: 5
},
})

You’re trying to destructure an “item” in the argument to _renderPost. There is no object passed in so it is complaining.

Just replace your code with this and I think it will solve the issue
<FlatList
data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
keyExtractor={this._returnKey}
renderItem={({ item }) => <View> {item} </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>
);
}

React Native Render Issue

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().

Trigger a function when an animation is completed in React Native?

I'm implementing a Splash Screen using React Native and i'm simply using a StackNavigator to change the route to the Main activity when the animations in Splash Screen are completed. To do this, I'm trying to find a way for triggering the this.props.navigation.navigate('Main') function.
The question is that how i can implement the onComplete function in my animation class?
Here is my animation code:
import React from 'react';
import { Animated, Text, View } from 'react-native';
class FadeInView extends React.Component {
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
}
componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 1000, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<Animated.View // Special animatable View
style={{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{this.props.children}
</Animated.View>
);
}
}
export default FadeInView
and my SplashScreen:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
import FadeInView from '../Animations/FadeInAnimation';
import { StackNavigator } from 'react-navigation';
import RanjoorMain from './RanjoorMain';
class SplashScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={{flex:1}}></View>
<FadeInView style={{width: 230, height: 230, backgroundColor: 'transparent'}}>
<Image style={styles.introLogo}
source={require('../Images/Logo/Ranjoor.png')}
/>
</FadeInView>
<View style={{flex:1}}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#3863cc',
},
welcome: {
fontSize: 45,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#242329',
marginBottom: 5,
},
introLogo: {
width: 230,
height: 230
}
});
/* This StackNavigator will change the route to the RanjoorMain.js after a couple of ms */
const GoToRanjoorMain = StackNavigator({
Splash: { screen: Splas },
Main: { screen: RanjoorMain }
})
GoToRanjoorMain.navigationOptions = {
title: 'Ranjoor',
};
export default SplashScreen

You can provide a completion handler to that start method of an animation.
Animated.timing(
this.state.fadeAnim,
{
toValue: 1,
duration: 1000,
}
).start(() => nav.goToSomeScreen());