We Keep Coding

How to solve "Can't find variable: App" in React Native?

I am new to React Native and I don't understand how to solve this problem. I already installed react-native-gesture-handler.
I am getting this error in the command:
Accessing view manager configs directly off UIManager via UIManager['getConstants'] is no longer supported. Use UIManager.getViewManagerConfig('getConstants') instead.
This is a part of the code:
import { createAppContainer, DrawerNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from "./src/screens/Home.js";
import first from "./src/screens/first.js";
import React from 'react';
class App extends React.Component{
render(){
return(
<RootStack/>
)
}
}
const RootStack = createStackNavigator ({
Home:{screen:Home,
navigationOptions: {
header: null
}},
first:{screen:first,
navigationOptions: {
header: null
}}
});
//const App = createAppContainer(RootStack);
export default App;

I think this way is better:
const AppNavigator = createSwitchNavigator({
Auth: {
screen: Auth
},
Root: {
screen: BottomTabNavigator
}
})
const AppContainer = createAppContainer(AppNavigator)
const App = () => {
return (
<AppContainer />
)
}
export default App
OR
if it didn't work then you better check your index.js file whether you imported App Component (Root component) correctly or not?

React Native Navigation: Undefined is not a function

I've recently ran into an issue with React Native Navigation that I cannot seem to solve.
I'm trying to organize my stacks by placing different stacks for different components in different files and then bringing them all together in the router.js file that I have created in config/router.js.
I keep getting this error
undefined is not a function (near '...(0, _reactNativeNavigation.createStackManager)...')
My router.js looks like this
import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import { MapStack } from '../components/MapStack';
export const HomeViewTabs = createBottomTabNavigator({
Map: {
screen: MapStack,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Icon name="ios-navigate" size={24} color={tintColor}/>
)
}},
}, {
initialRouteName: 'Map',
});
and my imported MapStack.js
import { createStackNavigator } from 'react-native-navigation';
import Map from '../screens/Map';
import BoxOverview from '../screens/BoxOverview';
export const MapStack = createStackNavigator({
Map: { screen: Map },
BoxOverview: { screen: BoxOverview},
});
My index.js
import React, { Component } from 'react';
import { HomeViewTabs } from './config/router';
class App extends Component {
render() {
return <HomeViewTabs />;
}
}
export default App;
Any help would be appreciated and any tips on my styling is also appreciated!
Edit:
Added photo of error for clarity
File Structure
app/
+--components/
+----MapStack.js
+--config/
+----router.js
+--screens/
+----Box.js
+----BoxOverview.js
Solution:
I was importing the wrong React Navigation module in my MapStack.js file. It was supposed to be import { createStackNavigation } from 'react-navigation' and I had the module set as 'react-native-navigation'...

In MapStack.js change this
import { createStackNavigator } from 'react-native-navigation';
To this
import { createStackNavigator } from 'react-navigation';
Found this solution after my friend pointed out that my imported module name was incorrect...

Looks like you're not importing the proper navigator in your router:
import { createStackNavigator } from 'react-navigation';
should be: import { createBottomTabNavigator } from 'react-navigation';

React native expected a string or class function but got undefined

I am getting this error:
builded with expo
Trouble in import containers to main file app.js
SignIn code
import React, { Component } from 'react';
import LoginForm from '../components/LoginForm';
export default class SignIn extends Component {
render() {
return (
<View>
<Text>
</Text>
</View>
);
}
}
App.js code
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
import SignIn from './app/containers';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.instructions}>
Ma App
</Text>
<SignIn />
</View>
);
}
}
if I remove signIn it's work!
Error on screen

Most likely the path to your SignIn component is incorrect, or you are missing the index.js export. You can test this theory by console logging the component SignIn; you will find it prints undefined.
The reason is you are attempting to import a default module SignIn from path ./app/containers. Assuming that is a valid path, you are attempting to import the default export from ./app/containers/index.js. This is unlikely to be correct as the index.js (AKA barrel) purpose is to export multiple public modules from an app directory.
Assuming your index.js is defined correctly, and includes the following or similar.
export { default as SignIn } from './SignIn.js';
Then you should update your import of SignIn to import a named module instead of the default module; as follows.
import { SignIn} from './app/containers';
Alternatively, you could import the default module direct from the component's source file.
import SignIn from './app/containers/SignIn';
Hope this helps!

Prefer default export eslint error

I am getting this eslint error:
Prefer default export
import React, { Component } from 'react';
class HomePage extends Component {
render() {
return (
<div className="Section">HomePage</div>
);
}
}
export { HomePage };
I have tried doing:
export { default as Homepage };
and then I get a fatal parsing error.
Then I changed it to:
export default HomePage;
Which clears the eslint error.
But then throws:
'./HomePage' does not contain an export named 'HomePage'.
Because I am calling HomePage like this:
import { HomePage } from './HomePage';
If I remove the brackets then I get this error:
"export 'default' (imported as 'HomePage') was not found in
'./HomePage'
import HomePage from './HomePage';
<PrivateRoute exact path="/" component={HomePage} />
What would be the proper way of changing this to the preferred default export?

From eslint-plugin-import
When there is only a single export from a module, prefer using default export over named export.
class HomePage extends Component {
//....
}
export default HomePage
In another file :
import HomePage from './Hello';
Check here codesandbox

Here's an example using functions:
function HomePage() {
function aHelperMethod() {
//
}
return {
aHelperMethod,
}
}
Now to import it in another file
import HomePage from './Hello';
And to use it you'll have to instantiate it
const homePage = HomePage()
homePage.aHelperFunction()

In some cases there should be more than one named export in the module.
export const foo = 'foo';
export const bar = 'bar';

Error : Forgot to export your Listview item component

This is the error i'm getting.
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in. Check your code at
BookingPage.js:19.
I have a Listview and item component is imported properly. When i'm changing export of Listview item from
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
to
export {BookingCard};
it's working. but i want to use redux for Listview item component. how to export class correctly. This is my BookingCard (Listview item component)
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import { connect } from 'react-redux';
import {Icon, Button} from 'native-base';
import {callCancel, setBookingstatus} from '../actions';
class BookingCard extends React.Component {
render() {
return (
<View style={styles.container}>
.....
......
</View>
);
}
}
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
// export {BookingCard};
BookingPage( Component including Listview )
import React from 'react';
import {ListView, View} from 'react-native';
import { connect } from 'react-redux';
import {Spinner} from './common';
import {BookingCard} from './BookingCard';
import {fetchBooking} from '../actions';
class BookingPage extends React.Component {
componentWillMount() {
this.props.fetchBooking();
}
ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
renderRow(booking) {
return <BookingCard booking={booking} />;
}
renderButton() {
if (this.props.loading) {
return <Spinner size="large" />;
}
return (
<ListView
dataSource={this.ds.cloneWithRows(this.props.bookings)}
enableEmptySections
renderRow={this.renderRow}
/>
);
}
render() {
console.log('onRender BookingPage');
return (
<View>
{this.renderButton()}
</View>
);
}
}
const mapStateToProps = ({ booking }) => {
const { bookings, loading } = booking;
return { bookings, loading };
};
export default connect(mapStateToProps, {fetchBooking})(BookingPage);

Since you're exporting your component default like this:
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
The line below fails because it expects a named export.
import {BookingCard} from './BookingCard';
You should either fix your import like this:
import BookingCard from './BookingCard';
or export it like
export const MyConnectedComponent = connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
You can find out more at MDN's website.