"props should be defined" but how? - reactjs

I am new to react and react native.
I am trying to set up a simple app, using this tutorial
https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md
I have set up my app with this command
create-react-native-app my-project
I start the app and see it in expo on my phone.
Then
npm i react-native-router-flux --save
I replace the contents of App.js with all the code from that tutorial. I also create the required PageOne.js and PageTwo.js.
I then get an immediate error on my phone.
[react-native-router-flux] props should be defined
assert
c:\my path...\react-native-router-flux\src\Util.js#34:10
How do I define these props? What do I need to do to get this working?
Extras!
The code is exactly as in that tutorial,
App.js
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import PageOne from './PageOne';
import PageTwo from './PageTwo';
export default class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
</Scene>
</Router>
)
}
}
PageOne.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class PageOne extends Component {
render() {
return (
<View style={{margin: 128}}>
<Text onPress={Actions.pageTwo}>This is PageOne! </Text>
</View>
)
}
}
PageTwo.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class PageTwo extends Component {
render() {
return (
<View style={{margin: 128}}>
<Text onPress={Actions.pageOne}>This is PageTwo!</Text>
</View>
)
}
}

I don't really have a conclusive answer. Perhaps just being new to a lot of different moving parts had caused something to get out of line.
I updated some magic numbers in package.json and app.json according to the upgrade table on this page
https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
and things started to work again.
I suppose that some of my thrashing around installing various react things had gotten the installed versions out of step. Perhaps if I really understood the ecosystem it would seem clear to me but it feels like a bunch of string and bailing wire at the moment!

Related

How to use react component (#material-ui/core) in React native

I would like to ask is there any way I can use react component (#material-ui/core) in React Native?
When I use #material-ui/core components in React Native project, the App keep crashed because it cannot find the elements like div, p and span.
Thank you
in index.js
import {AppRegistry} from 'react-native';
import Demo from './Demo';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Demo);
in Demo.js
import React from 'react';
import {View} from 'react-native';
import Card from '#material-ui/core/Card';
export default function Demo() {
return (
<View>
<Card>
</Card>
</View>
);
}
error message
React native uses react-native-material-ui whereas ReactJs uses #material-ui/core
npm i react-native-material-ui
import React from 'react';
import {View} from 'react-native';
import { Card } from 'react-native-material-ui';
export default function Demo() {
return (
<View>
<Card>
</Card>
</View>
);
}
react-native-material-ui Docs
Material UI is meant for ReactJS(web apps), so it won't work in the React Native framework.

how to fix currentlyFocusedField is deprecated and will be removed in a future release. Use currentlyFocusedInput

I use react native, and react-native-router-flux for navigation
when I want to move screen, an error appears "currentlyFocusedField is deprecated and will be removed in a future release. Use currentlyFocusedInput"
but the screen still moved with the error
how do i fix it
this is my router
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
Router,
Scene,
Stack,
} from 'react-native-router-flux';
import Loading from '../screens/Loading';
import Welcome from '../screens/Welcome';
import Register from '../screens/Auth/Register';
export default class RouterLinked extends Component {
render() {
return (
<Router>
<Stack key="root" type="replace">
<Scene key="Welcome" component={Welcome} initial={true} hideNavBar={true}/>
<Scene key="Register" component={Register} title="Register" />
<Scene key="Loading" component={Loading} />
</Stack>
</Router>
);
}
}
and this is my home page
import React, { Component } from 'react';
import { View, Button, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class Welcome extends Component {
render() {
return(
<View>
<Text>Welcome</Text>
<Button
title="Click"
onPress={() => Actions.push('Register')}
/>
</View>
);
}
}
I have the same issue. I fixed this issue by the following steps.
First find this file form the #react-navigation package form the node_modules folder.
Replace all currentlyFocusedField() with currentlyFocusedInput().
Reload your application.
That's all.
Thanks.
This is a issue related to react-navigation package
The fix might just require find & replace all instances of currentlyFocusedField with currentlyFocusedInput
Probably this was fixed through this commit:
Github commit
although I still get the error at my end.
i added following plugin and fixed it.
"#react-navigation/core": "^5.13.1",
"#react-navigation/native": "^5.8.1",
"#react-navigation/stack": "^5.11.0",
We can use patch-package to update node_modules/#react-navigation/native
Edit "node_modules/#react-navigation/native/src/createKeyboardAwareNavigator.js":
Find matches for this code: TextInput.State.currentlyFocusedField();
And replace for this: TextInput.State.currentlyFocusedInput ? TextInput.State.currentlyFocusedInput() : TextInput.State.currentlyFocusedField();
Run npx patch-package
Run npm i patch-package
Add to your package.json scripts:
"scripts": {
"postinstall": "patch-package"
}
Consider discarding this patch after upgrading to react-navigation#4.4.1 https://github.com/react-navigation/react-navigation/issues/8457#issuecomment-698464510

How to solve this error in react native project with Mobx and react-nativation?

Now I am trying to make an app with react native, Mobx, and Expo.
However, after I have installed Mobx and make Store with observable from Mobx, I got an error like below.
In addition to this information I mentioned, I am using some decorator like #observer and #inject, Provider.
Add my code of component with Provider.
import React from "react";
import { View, StyleSheet } from "react-native";
import { Provider } from "mobx-react/native";
import HomeHeader from "../Elements/Home/HomeHeader";
import HomeShopList from "../Elements/Home/HomeShopList";
import HomeAllCouponListButton from "../Elements/Home/HomeAllCouponListButton";
import HomeAllShopListButton from "../Elements/Home/HomeAllShopListButton";
import RestaurantStore from "../Stores/EachStores/RestaurantStore";
class Home extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.container}>
<HomeHeader />
<Provider restaurantStore={RestaurantStore}>
<HomeShopList navigation={navigation} />
</Provider>
<HomeAllCouponListButton />
<HomeAllShopListButton />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
Your Provider store should have to configured properly:
It should have to be like.
<Provider restaurantStore={RestaurantStore}>
And not like below:
<Provider store={RestaurantStore}>
Please refer here
Also, try by changing the import statement from
import RestaurantStore from "../Stores/EachStores/RestaurantStore";
To :
import { RestaurantStore} from "../Stores/EachStores/RestaurantStore";

Importing and exporting file in React native

THE ERROR MESSAGE I AM GETTING ON MY DEVICEIam working on React Native.As I import my other react native file(i.e component1.js) into the index.android.js file.
It's giving an error
"Expected a component class,got[object Object]".
component1.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
export default class component1 extends Component {
render() {
return(
<View>
<Text>This is component1</Text>
</View>
);
}
}
AppRegistry.registerComponent('component1', () => component1);
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import component1 from'./app/Components/component_a/component1'
export default class myapp extends Component {
render() {
return (
<View>
<component1 />
</View>
);
}
}
AppRegistry.registerComponent('myapp', () => myapp);
The problem is you define multiple AppRegistry in child and parent file. Remove AppRegistry.registerComponent('component1', () => component1); in component1.js, you don't need it . Just declare in the root component.
From RN docs.
AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are required.

Native Base toolbar not working

Im attempting to follow the Native Base tutorial found in the docs.
https://nativebase.io/docs/v0.1.0/components
As soon as I try to add the toolbar I get the below error. The toolbar component does not seem to be in the package. Does anyone know if the documentation for Native Base is good?
import React, { Component } from 'react'
import { Container, Toolbar, Button, Text, Content, View } from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<Container>
<Toolbar></Toolbar>
<Content>
<View>
<Text>Works! And some</Text>
</View>
</Content>
</Container>
)
}
}

Resources