I just started learning React Native iOS recently and I am following raywenderlich tutorial
https://www.raywenderlich.com/485-react-native-tutorial-building-ios-apps-with-javascript#toc-anchor-001
I am using following versions:
react-native-cli: 2.0.1
react-native: 0.60.5
In the Adding Navigation Section, I am following the exact same steps but getting following errors
"you likely forgot to export your component from the file it's defined in and you might have mixed up with default and named imports"
Here is my App.js file code
'use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, NavigatorIOS, View } from 'react-native';
class SearchPage extends Component<{}> {
render() {
return <Text style={styles.description}>Search for houses to buy!
</Text>;
}
}
class App extends Component<{}> {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Property Finder',
component: SearchPage,
}}/>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
export default App;
Index.js file code:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Please tell me what am I doing wrong? Thanks in advance!!!!
Try t ocheck import for registerComponent
import { AppRegistry } from 'react-native';
import App from './App'; // <--- check here
AppRegistry.registerComponent('PropertyFinder', () => App);
Related
I am quiet new to react and I know this is something stupid but I really cant see it.
I get the following error : Unable to resolve "./app/components/Apptext" from "App.js"
import React, { Component } from 'react';
import { Text,StyleSheet,Platform } from 'react-native';
function AppText ({children})
{
return <Text style = {styles.text}>{children}</Text>
}
const styles = StyleSheet.create({
text:{
color:"tomato",
...Platform.select({
ios:{
fontSize:20,
fontFamily:"Avenir"
},
android:{
fontSize:18,
fontFamily:"Roboto"
}
})
},
})
export default AppText;
The above is my AppText script
this is the app.js
import { StatusBar } from 'expo-status-bar';
import React, { Fragment } from 'react';
import {Dimensions ,SafeAreaView, StyleSheet,TouchableWithoutFeedback,Alert, Text, View ,Image, Button,Platform, BackHandler} from 'react-native';
import{ useDimensions,useDeviceOrientation } from '#react-native-community/hooks';
import WelcomeScreen from './app/screens/WelcomeScreen';
import AppText from './app/components/Apptext';
export default function App() {
return (
<View style ={{flex:1,justifyContent:"center",alignItems:"center",}}>
<AppText>I like react</AppText>
</View>
);
}
Please check the folder order from the app.js file/
No idea why but react had a issue with how i implmented this script, I changed it to the way below and it seems to be working fine.
import React from "react";
import { Text, StyleSheet, Platform } from "react-native";
function AppText({ children, style }) {
return <Text style={[styles.text, style]}>{children}</Text>;
}
const styles = StyleSheet.create({
text: {
fontSize: 18,
fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
},
});
export default AppText;
Better check the files of screens must be inside in the core project folder.. I made a mistake now I sort it out
I am learning ReactNative, and now I'm looking into how to organize the files (for now I am going to create a folder for each page, each with an index, functions and styles file). For some reason, though, I am not being able to import information to index.js, can't use the styles or functions, when I open the page, it doesn't return the func method.
I am wondering whether I am using import wrong. Using import { MenuFunctions} from './Menu' has resulted in an error saying nothing was imported, this error no longer appears, but nothing is being returned still.
This is my code, index, Menu and styles are all in the same folder.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
render(){
return(
<View>
<Text> Text: {MenuFunctions.func} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component{
constructor(props){
super(props);
}
func = () => {return "Hello, World!"};
}
styles.js
import React from 'react';
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component{
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
Menu.js and styles.js shouldn't be React.Component and you forgot to call to Func method, () is missing.
React.Component is a UI component only which include a render method that returns JSX element.
Your code should look like that:
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles';
import {Text, View} from 'react-native';
export default class MenuPage extends React.Component {
render() {
return (
<View>
<Text> Text: {MenuFunctions.func()} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
class MenuFunctions {
func = () => {
return 'Hello, World!';
};
}
export default new MenuFunctions();
styles.js
import {StyleSheet} from 'react-native';
export default styles = StyleSheet.create({
text: {
color: Colors.red30,
}
});
The problem is that you are trying to import Menu.js using import MenuFunctions from './Menu' when you had to specify the file itself:'./Menu/Menu.js'. (remember to call the function using parentheses class.function())
Also, whenever you export as default you don't have to use curly braces {}
If you are wondering about your project structure, you can use the following as a common structure to create projects. Let's say you have the following
- index.js
- src
- assets
- screens
- MenuScreen
- components
- services
- menu
- index.js //this is Menu.js
- android
- ios
NOTE
Do not extend React.Component if you are not exporting a component.
You need an object to perform the function of the class you created.
Then declare and use the constructor.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
constructor(props){
super(props);
this.menu = new MenuFunctions()
MemuStyle = new MenuStyles()
}
render(){
return(
<View>
<Text style={MemuStyle.styles.text}> Text: {this.menu.func()}</Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component {
func(){
return 'Hello, World!';
}
}
styles.js
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component {
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
NOTE: The features you intend to use do not necessarily have to inherit React.
So I am learning React-Native and I have created a Drawer which has already worked before. But after a few modifications not involving the Drawer it keeps giving this error Can't find variable: Contact even if I am not importing a variable called Contact.
drawer.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import ButtonScreen from '../screens/ButtonScreen';
import Contacts from '../screens/Contacts';
import Information from '../screens/Information';
import Preferences from '../screens/Preferences';
const Drawer = new DrawerNavigator({
Home: {
screen: ButtonScreen,
navigationOptions: {
drawerLabel: 'Button'
},
},
Contacts: {
screen: Contacts,
},
Preferences: {
screen: Preferences,
},
Info: {
screen: Information,
}
}, {
contentComponent: (props) => (
<View>
<Text>Custom Header</Text>
<DrawerItems {...props}/>
<Text>Custom Footer</Text>
</View>
)
});
export default Drawer;
Contacts.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text } from 'react-native';
class Contacts extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Text>
Contact Component
</Text>
</View>
);
}
}
const mapStateToProps = (state) => {
const { isDrawerOpened } = state;
return { isDrawerOpened };
}
export default connect(mapStateToProps)(Contacts);
By the stacktrace the error is comming from drawer.js line 6, where I import Contacts and not Contact. I already runned npm start -- --reset-cache to see if it would solve it but no. I am very confuse about why this is happening.
I'm using react-native build android project, and use 'Navigator'. when I look at version > react#44.0 should be used:
import { Navigator } from 'react-native-deprecated-custom-components';
App.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Image,
Text,
View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import {
Navigator
} from 'react-native-deprecated-custom-components';
import PropTypes from 'prop-types';
import Boy from './boy';
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',
});
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
selectedTab: 'tab_polular'
}
}
render() {
return (
<View style={styles.container}>
<Navigator
initialRoute = {
{component: Boy}
}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component navigator={navigator} {...route.params}/>
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
get this error:
and I see this question with similar about me enter link description here
add this code in app.js:
import PropTypes from 'prop-types
but error also has here!
how to resolve the error!
You can find some info about this issue here, but i will try gather the info nicely for you
But basically, if your version of react > 16, you must run npm i --save prop-types and then in your code include import PropTypes from 'prop-types'
if your version of react < 16, you must import PropTypes from React like so import React, { Component, PropTypes } from 'react';
You can check your version of React by going to the project directory, opening up your package.json file, and it should be there. Should look something like this:
"react": "16.0.0-alpha.6",
npm install react-native-deprecated-custom-components --save
change the Navigator.js file to the latest version(come from facebook)
ok， i'm find the error reason:
because react version too height.
my project react version==='16.0.0'
react: 16.0.0
if resolve the error, react version must be:
"react": "^16.0.0-alpha.12"
then:
react-native run ios
I'm trying to practice with different screens on a React Native project. Here's my code from App.js file.
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: "welcome",
};
render() {
return <Text style={{ color: 'black '}}>Hello, Navigation!</Text>;
}
}
const navigation = StackNavigator({
Home: { screen: HomeScreen },
});
export default class App extends Component<{}> {
render() {
return <navigation/>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
});
When I run react-native run-android I get an Invariant Violation which tells me "to view config not found or name navigation". And then all the sites where this violation happens.
Help please thanks.
The name of any component must be capitalized. In your name, the component "navigation" is not capitalized. It should be "Navigation".
In react native the component's name should begin with capital letter, so it will be:
const Navigation = StackNavigator({
Home: { screen: HomeScreen },
});
and call it with capital:
export default class App extends Component<{}> {
render() {
return <Navigation/>;
}
}