So i am stuck in there. I just want to add a but it never renders it.
It renders the "Registered project page".
index.ios.js
import native from './src';
native();
./src/index.js
import { AppRegistry, Text } from 'react-native';
import React, { Component } from 'react';
export default function index() {
class Root extends Component {
render() {
return (
<Text>
Welcome to React Native!
</Text>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => Root);
}
So it all works great. I can even debug and see that the App component is called etc. But why i never get to render anything except that window ?
Related
I have a folder called "app" which contains a "views" folder. Inside views I have a "Home.js" file in which I've defined a class component "Home". I want to use the Home class in another file "App.js".
The following code is what's in the Home.js file.
import React from 'react';
import {View, Text} from 'react-native';
export class Home extends React.Component {
render () {
return (
<View>
<Text> Some text </Text>
<Text> Some other random text </Text>
</View>
);
}
}
And this is what's in the App.js file.
import React from 'react';
import { Home } from '.app/views/Home.js';
export default class App extends React.Component {
render () {
return (
<Home />
);
}
}
When I try and run it with expo, I get an error "Error: undefined Unable to resolve module '.app/views/Home.js'"
No matter the path I try to bring Home from, I get the same error, even if I copy and paste the path directly from the Home.js file. I'm curious, I wanna know if this is a code error, or maybe the way I'm bringing up the path is wrong? Any ideas as to how to solve this? Thanks a lot.
You need to get in your folder like this:
'./app/views/Home.js';
I am new in react native. I have used Wix react-native-navigation library for navigate between pages. I want to write a separate class for navigation like bellow and call it in everywhere that I need it in my project. But I get error for "this.props.componentId". Here is my function for navigation:
ScreenNavigation.js
import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";
class ScreenNavigation extends Component{
constructor(props){
super(props)
}
goToScreen = (screenName) =>{
Navigation.push(this.props.componentId , {
component : {
name : screenName
}
});
}
}
const NextPage = new ScreenNavigation();
export default NextPage;
and here is my Login page (where I want to call the function):
Login.js
import React, {Component} from 'react';
import {View, Button, Text} from 'react-native';
import NextPage from "../../my_classes/ScreenNavigation"
export default class Login extends Component {
render() {
return (
<View>
<Text>Anna</Text>
<Button title={"Enter"} onPress=
{()=>NextPage.goToScreen('myRegister')}> </Button>
</View>
);
}
}
Please help me to solve my problem.
this is my index.js file:
import {Navigation} from 'react-native-navigation';
import Login from './my_screens/login®ister/Login';
Navigation.registerComponent('myLogin',()=>Login);
Navigation.events().registerAppLaunchedListener(()=>{
Navigation.setRoot({
root : {
stack : {
id:'AppStack',
children : [
{
component : {
name : 'myLogin' ,
options : {
topBar : {
title : {
text : 'Login'
}
}
}
},
}
]
}
}
}
)
});
Please follow the official documentation first. According to documentation you must register component screen first. Otherwise you cannot navigate to that screen. Secondly you are not passing any props. So its actually undefined.
If you want to execute a function of a component into another component there is two ways to todo that.
By passing prop into your child component like
<RootcComponent
<Login gotoScreen={this. goToScreen} />
/>
and then you need to call that function in you login component
this.props.goToScreen()
But if this component is not your child component then you need to pass this is in your navigation params like this
this.props.navigation.navigate('RouteName', {goTo: this.goToScreen})
and then in your component where you want to execute this function
this.props.navigation.state.params.goToScreen()
I have a react-native app where I have developed a scanner feature using react-native-qrcode-scanner.However, when I try to scan the data, I get the below error-
error: can't find variable navigation
I see this error in onSuccess method at line authorizationToken.
My code-
import React, { Component } from 'react';
import {
Text,
View,
Image,
TouchableOpacity,
Linking
} from 'react-native';
import styles from '../assets/style';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class ScanScreen extends Component {
onSuccess(scanEvent) {
this.props.navigation.navigate("Result", {
'accessKey': scanEvent.data,
'authorizationToken':navigation.getParam('authorizationToken', undefined),
"userData": navigation.getParam('userData', undefined),
"methodName": "fetchData"
});
}
render() {
return (
<View style={styles.container}>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
Any idea what I m missing here. Any help is much appreciated.Thanks in advance.
Make sure that Your Screen is registered in react-navigation config (follow this guide: can't find variable navigation).
Or pass navigation prop to it with HOC withNavigation: https://reactnavigation.org/docs/en/with-navigation.html. Instead export default class ScanScreen extends Component do class ScanScreen extends Component and at end of file do
export default withNavigation(ScanScreen);
Don't forget about importing Higher Order Component: import { withNavigation } from 'react-navigation';
Also be sure that all native parts are properly linked. For example react-native-gesture-handle (https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#linking).
navigation has to be part of props so accessing navigation using this.props.navigation solves this issue.
I am trying to create a counter with react-native and redux, but i'm getting the error Expected a component class, got [object Object].
This is my index.android.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Root from './src/containers/Root';
import configureStore from './configureStore';
export default class CounterReactNativeRedux extends Component {
render() {
return (<Root store={configureStore()} />)
}
}
AppRegistry.registerComponent('CounterReactNativeRedux', () => CounterReactNativeRedux);
My code can be found here.
Found answers about this saying that it might be because of the class name not being capitalize but this is not the case.
Anyone any idea?
Look inside of your Counter.js. You have used div tags there which do not exist in React Native.
So import View tag from React Native and use that.
import {View} from 'react-native'
const Counter = ({ value }) => (
<View>{value}</View>
);
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Login from './js/components/Login';
import userReducers from './js/reducers/user';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
let store = createStore(combineReducers({userReducers}));
class App extends Component {
render() {
return (
<Login />
);
}
}
export default class Testextends Component {
render() {
return (
<Provider store = {store}>
<App />
</Provider>
// <View>
// <Text>jhdgf</Text>
// </View>
);
}
}
AppRegistry.registerComponent('Test', () => Test);
It gives me following error:
I'm trying one basic example of react-native with redux. If I remove TouchableHighlight also , the error still persists. Any ideas what is wrong here?
Its doesn't seems you're doing something wrong, on the code pasted, are you sure the error came from this part of your code ?
Maybe try to put between () your TouchableHighlight component, but I don't think that's going to change something...
Or try a ternary rather than a binary operation.
Also be sure that you import TouchableHighlight and Text from react-native.
Try to delete all not necessary white space
<View>{ !this.props.user.loggedIn &&
<TouchableHighlight onPress={this.onLoginButtonPress}>
<Text>Login</Text>
</TouchableHighlight>
}</View>
Because in the following example
<View> {...}</View>
you have two children: first white space and second all in curved brackets.
Had the same issue with the following React Native code:
import {Link} from 'react-router-native'
<Link to={props.url}>{props.title}</Link>
Spend few hours trying to understand why the similar code works in WEB but not in native view. There is no viable error messaging or hints from the React Native runtime on which component causes this failure, so it's insanely hard to identify the issue.
Managed to fix this crash by doing the following:
import {Link} from 'react-router-native'
import {Text} from "react-native";
<Link to={props.url}><Text>{props.title}</Text></Link>
Looks like the title text was treated as multiple elements, so we ended up with such an error.
This is not a solution for the subject. But, because there are so many ways to fail with this error in React Native, it may be useful to put this another example of such a crash for those who Googled and ended here.
First off, "export default class Testextends Component" should actually be "export default class Test extends Component"
the reason why that error is thrown is because the Provider component takes only one element.
for Example:
wrong:
<provider store = {store}>
<div/>
<div/>
<provider>
correct:
<provider store = {store}>
<App/>
<provider>
which you did correctly, if you commented the component. Try the class error and see if it works.