There is my code & the error below. I made some changes in the App.js file, & since then this issue has shown up. I had my router setup in this file originally, but then decided to move. I've tried other styles & it doesn't work either.
App.js
import React from 'react';
import { StyleSheet, Text, View, Navigator } from 'react-native';
import { Fonts } from './src/utils/Fonts';
import Menu from './app/components/Menu';
import Page from './app/components/Page';
import Router from './app/components/Router';
export default class App extends React.Component {
render() {
return (
<View style={styles.fonts}>
<Menu />
</View>
);
}
}
const styles = StyleSheet.create({
fonts: {
fontSize: 30,
fontWeight: 12,
fontFamily: Fonts.Baloo
},
});
Error
I had different styles & code on the Menu component before this issue & it worked fine, but now even when I make changes it doesn't go back to the original, just shows this same error.
Menu.js
import React from 'react';
import {
StyleSheet,
Text,
Image,
MenuItem,
Font,
View,
TextInput,
TouchableOpacity
} from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class Menu extends React.Component {
render() {
return (
<View style={styles.container}>
<Text
style={styles.fonts}
onPress={() => Actions.page()}>
Navvi
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
});
I already commented it, but this is how your code should look like (in Menu.js):
export default class Menu extends React.Component {
render() {
return (
<View style={styles.container}>
<Text
style={styles.fonts}
onPress={() => Actions.page()}
>
{"Navvi"}
</Text>
</View>
);
}
}
Related
I am trying to get a floating action button to display over other components in the bottom right of my app. In the case now it needs to display over a list and be static as the list moves. Currently the button does
I have tried putting the button style in the view tag and the button and neither displays anything on my screen
This is my button component:
import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { FontAwesome } from '#expo/vector-icons';
const FloatingPlusButton = () => {
return (
<View style={styles.buttonStyle}>
<Button>
<FontAwesome
name='plus'
size={32}
/>
</Button>
</View>
);
};
const styles = StyleSheet.create({
buttonStyle: {
position: 'absolute',
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
right: 30,
bottom: 30,
backgroundColor: '#82ff9e',
}
});
export default FloatingPlusButton;
This is the screen where I want to show the button:
import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';
import { FloatingPlusButton } from '../components/FloatingPlusButton';
const HEIGHT = Dimensions.get('window').height;
class HomeScreen extends Component {
componentDidMount() {
registerForPushNotificationsAsync();
}
render() {
return (
<View style={{ flex: 1, height: HEIGHT }}>
<Header navigation={this.props.navigation} />
<TodayIncludes />
<MainTodo />
{FloatingPlusButton}
</View>
);
}
}
export default HomeScreen;
I am unsure if I am calling the component wrong in the import? I thought it was supposed to be with no brackets and call it like a normal component but this gave me an invariant violation.
You are using the component wrong in your code, in jxs { } curly brackets are used to executed tradition js code like you might want to loop over an array etc.
import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';
// Since you are exporting the component as default there is no need to
// do it by using selective import
import FloatingPlusButton from '../components/FloatingPlusButton';
const HEIGHT = Dimensions.get('window').height;
class HomeScreen extends Component {
componentDidMount() {
registerForPushNotificationsAsync();
}
render() {
return (
<View style={{ flex: 1, position: "relative", height: HEIGHT }}>
<Header navigation={this.props.navigation} />
<TodayIncludes />
<MainTodo />
{/* Here is how you execute js code */}
<FloatingPlusButton />
</View>
);
}
}
export default HomeScreen;
My goal is to render my homescreen from an external .js file called home.js. This .js file is located in a directory below root project directory in a a folder called "screens". I am having trouble rendering the contents in that home.js file. If I move the code from my home.js file back into the app.js file it works perfectly fine. I am trying to take a modular approach since this is best practice and would rather not stuff everything into the app.js file. I plan on creating more screens in the near future but am trying to wrap my mind around the basics first.
My current code in the app.js file
// In App.js in a new project
import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import HomeScreen from './screens/home.js';
/*
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
</View>
);
}
}
*/
export default createAppContainer(AppNavigator);
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
//Details: DetailsScreen
},
{
initialRouteName: "Home"
}
);
The code in my home.js file is
import React from "react";
import { View, Text } from "react-native";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
Edit 1:
My current error is
undefined is not an object (evaluating 'Component.router')
createNavigationContainer
C:\Repos\demoProject\node_modules#react-navigation\native\src\createAppContainer.js:88:30
<unknown>
C:\Repos\demoProject\App.js:24:34
loadModuleImplementation
C:\Repos\demoProject\node_modules\metro\src\lib\polyfills\require.js:331:6
<unknown>
C:\Repos\demoProject\node_modules\expo\AppEntry.js:4
loadModuleImplementation
C:\Repos\demoProject\node_modules\metro\src\lib\polyfills\require.js:331:6
guardedLoadModule
C:\Repos\demoProject\node_modules\metro\src\lib\polyfills\require.js:197:45
global code
<unknown file>:0
You're not exporting your HomeScreen component, you can do this by adding an export default infront of the class definition, or underneath.
export default class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
Or
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
export default HomeScreen
You're also attempting to export AppNavigator before it is instantiated. You need to move the export below.
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
//Details: DetailsScreen
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(AppNavigator);
Whenever I try to run my iOS simulator, I'm getting that error. All modules are installed, file path to my picture is correct, no errors being thrown within my IDE except for the one that's appearing in my simulator. Picture below of error.
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
onButtonPress() {
this.props.navigator.push({
id: 'CreateAccount'
});
}
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onButtonPress.bind(this)}>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20 // Length of text input boxes.
},
input: {
backgroundColor: '#DAE5FF',
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<View>
<Text style={styles.title}>My App</Text>
</View>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
title: {
fontSize: 34,
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
fontFamily: 'Bodoni 72'
}
// movementTitle: {
// paddingBottom: 34
// }
});
export default BackGround;
Here's CreateAccount.js:
import React, {Component} from 'react';
import {Text} from 'react-native';
class CreateAccount extends Component {
render() {
return(
<Text>Must get to this page</Text>
);
}
}
export default CreateAccount;
Here's index.ios.js:
import React, {Component} from 'react';
import {View, StyleSheet, AppRegistry} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
import BackGround from './components/BackGround';
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
<Navigator
initialRoute={{id: 'Login'}}
renderScene={this.navigatorRenderScene}
/>
</View>
);
}
navigatorRenderScene() {
_navigator = navigator;
switch(route.id) {
case 'Login':
return (<Login navigator={navigator} title="Login"/>);
case 'CreateAccount':
return (<CreateAccount navigator={navigator} title="Create Account" />);
}
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
AppRegistry.registerComponent('dendroApp', () => dendroApp);
React recently removed PropTypes from their core library as of React 15.5.
Add the line
import PropTypes from 'prop-types';
And call your proptypes directly from that.
It seems PropTypes is undefined. I don't see it declared anywhere in your code. You have to import it via a separate module as shown in the documents: PropTypes.
Update:
Perhaps a library you are using is using the now deprecated/non-supported React.PropTypes. I recommend using a more up to date library or actually going into the library and updating the package so it uses the new PropTypes from the separate package instead of React.PropTypes. This should fix your problem
Yes definitely, if you upgrade react: 15 or higher then you have to add import PropTypes from 'prop-types';
But recently I faced the same issue in "react": "16.0.0-beta.5" after I changed
"dependencies": {
"react": "16.0.0-alpha.12"
},
"devDependencies": {
"react-test-renderer": "16.0.0-alpha.12"
}
Then it found working fine. Hope it helps!
At first, I was using Expo to run my projects on my physical device which means that it doesn't come with an index.ios.js and index.android.js files upon creating a project (All you get is an App.js file which is equivalent to the aforementioned files).
I then copy and pasted my files/code into a normal React Native project (not Expo) which means now I do have index.ios.js and index.android.js files. Specifically, I copy & pasted whatever's in App.js into index.ios.js hoping it carries out the same functionality.
I have no idea why it's throwing this me error upon hitting Run to see what will show up on my iOS simulator.
Picture of error included below.
Transform Error
Here's index.ios.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
import BackGround from './components/BackGround';
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
<Navigator
initialRoute={{id: 'Login'}}
renderScene={this.navigatorRenderScene}
/>
</View>
);
}
navigatorRenderScene() {
_navigator = _navigator;
switch(route.id) {
case 'Login':
return (<Login navigator={navigator} title="Login"/>);
case 'CreateAccount':
return (<CreateAccount navigator={navigator} title="Create Account" />);
}
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<View style={styles.movementTitle}>
<Text style={styles.title}>Dendro</Text>
</View>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
title: {
fontSize: 34,
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
fontFamily: 'Bodoni 72'
}
// movementTitle: {
// paddingBottom: 34
// }
});
export default BackGround;
Here's CreateAccount.js:
import React, {Component} from 'react';
import {Text} from 'react-native';
class CreateAccount extends Component {
render() {
return(
<Text>Must get to this page</Text>
);
}
}
export default CreateAccount;
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
onButtonPress() {
this.props.navigator.push({
id: 'Create Account'
});
}
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onButtonPress.bind(this)}>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20 // Length of text input boxes.
},
input: {
backgroundColor: '#DAE5FF',
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
When you use standard React-Native you need to register your app with
AppRegistry.
If you create a new project react-native-init test and view the index.ios.js or index.android.js files, you will see the below code at the bottom of the file.
AppRegistry.registerComponent('test', () => test);
I want to break things down into components. Inside my App.js file, I would like to see the text input box that would come about from the <CreateAccount/> component. The problem is that it's giving me an error. As soon as I include <View></View>, my background disappears (just have a white screen) and I see Email (from placeholder) on the top left corner of my physical device.
I want to have the text input box directly underneath the title My App. This whole React Native thing is so different from regular HTML & CSS so I'm wondering why this is happening in my case and what can I do to fix it?
Here's App.js file:
import React, {Component} from 'react';
import {View} from 'react-native';
import BackGround from './components/BackGround';
import CreateAccount from './components/CreateAccount';
export default class App extends Component {
render() {
return(
<View>
<BackGround/>
<CreateAccount/>
</View>
);
}
}
Here's BackGround.js file:
import React, {Component} from 'react';
import {StyleSheet, Image, Text} from 'react-native';
export default class BackGround extends Component {
render() {
return(
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<Text style={styles.title}>My App</Text>
</Image>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
title: {
paddingBottom: 390,
fontSize: 50
}
});
Here's CreateAccount file:
import React, {Component} from 'react';
import {TextInput} from 'react-native';
export default class CreateAccount extends Component {
render() {
return(
<TextInput
placeholder={"Email"}
placeholderTextColor={"#f44242"}
/>
);
}
}