When I tried to use useState I get this error:
Component Exception
(0,_reactNative.useState) is not a function.(In'(0,_reactNative.useState)(false)','(0,reactNative.useState)' is undefined)
Source
var children = Component(props, secondArg);
Please help me. I dont understand why I cannot use useState:(
Here is my code:
`
import React from 'react';
import {StyleSheet,View,Text, Modal,useState} from 'react-native';
import { createAppContainer,NavigationContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './android/screens/HomeScreen/index';
import LoginScreen from './android/screens/Login/index'
const AppNavigator = createStackNavigator(
{
Home: {screen: HomeScreen},
Login: {screen: LoginScreen},
},
{
initialRouteName:'Login'
}
);
const AppContainer= createAppContainer(AppNavigator);
export default function App () {
const [modalVisible, setModalVisible] = useState(false);
return (
<AppContainer/>
)
}
As pointed out by Nicholas, import useState from react and not from react-native,
import React, {useState} from 'react';
import {StyleSheet,View,Text, Modal} from 'react-native';
Related
I am coding a React app and I'm trying to use a ScrollToTop component in order to scroll down in the app. But the problem is that for some reason it is not working at all.
Please help I'm really struggling with this one...
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo({ top: 0, left: 0, behavior: "auto" });
}, [pathname]);
return null;
}
And I import this component in App.js
import React from 'react'
import { HashRouter } from "react-router-dom";
// import * as serviceWorker from './serviceWorker';
// core styles
import "./scss/volt.scss";
// vendor styles
import "#fortawesome/fontawesome-free/css/all.css";
import "react-datetime/css/react-datetime.css";
import HomePage from "./pages/HomePage";
import ScrollToTop from "./ScrollToTop";
function App() {
return (
<HashRouter>
<ScrollToTop/>
<HomePage />
</HashRouter>
)
}
export default App
Can anybody help me?
Please try with this.
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0,0);
}, [pathname]);
return null;
}
I am trying to do react context on a function. Initially, I created react context in the same file as the provider, but then I got a warning on the console saying that I should put context in a separate file, but when I do that, for some bizarre reason, I get an error, even though I am pretty much doing the exact same thing, what am I doing wrong? I am only showing the relevant bits of the code.
The following code below works fine
import * as React from 'react';
import {
BrowserRouter as Router,
NavLink,
Switch,
Route,
} from 'react-router-dom';
import Header from './header.js';
import './OldApp.css';
import { useState, useEffect } from 'react';
//Context import commented
//import UserObjAndDbProvider from './dbAndUserObjContext';
import routes from './routes';
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
const Context = React.createContext();
export const UserObjAndDbProvider = Context.Provider;
export const UserObjAndDbConsumer = Context.Consumer;
const App = ({ user, database }) => {
var [membership, setMembership] = useState(false);
const docRef = database.collection("userCollection").doc(`${user.uid}`)
//get data
const FindOutMembership = async () => {
var booleanVal = null;
docRef.get().then(function(doc) {
if (doc.exists) {
const booleanVal = doc.data().membership;
setMembership(membership = booleanVal);
} else {
console.log("Error: no such document exists")
}
})
}
useEffect(() => {
FindOutMembership();
})
return (
<UserObjAndDbProvider value={'i am sexy and i like it'}>
<Router>
//some routing stuff done here
</Router>
</UserObjAndDbProvider>
);
};
export default App;
but when i take context stuff out, and put in in another file(which is in the same folder) and import it i get a weird error titled "TypeError: render is not a function"
import * as React from 'react';
import {
BrowserRouter as Router,
NavLink,
Switch,
Route,
} from 'react-router-dom';
import Header from './header.js';
import './OldApp.css';
import { useState, useEffect } from 'react';
//Context import now uncomment
import UserObjAndDbProvider from './dbAndUserObjContext';
import routes from './routes';
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { useContext, createContext } from 'react';
const App = ({ user, database }) => {
var [membership, setMembership] = useState(false);
const docRef = database.collection("userCollection").doc(`${user.uid}`)
const FindOutMembership = async () => {
var booleanVal = null;
docRef.get().then(function(doc) {
if (doc.exists) {
const booleanVal = doc.data().membership;
setMembership(membership = booleanVal);
} else {
console.log("Error: no such document exists")
}
})
}
useEffect(() => {
FindOutMembership();
})
//console.log(membership);
return (
<UserObjAndDbProvider value={'i am sexy and i like it'}>
<Router>
//some routing stuff done here
</Router>
</UserObjAndDbProvider>
);
};
export default App;
my context file is called dbAndUserObjContext.js and looks like this
import React from 'react'
import { createContext } from 'react';
const Context = React.createContext();
export const UserObjAndDbProvider = Context.Provider;
export const UserObjAndDbConsumer = Context.Consumer;
export default Context;
I am using React Navigation Version 4 and after setting my navigations and all screens and run the code I am facing the following issue:
TypeError: (0, _reactNavigation.default) is not a function.
My Routes.Js is -
import React from 'react';
import createAppContainer from 'react-navigation';
import { createStackNavigator, HeaderBackButton } from 'react-navigation-stack';
import { Drawer } from './Drawer';
import LoginScreen from '../screens/LoginScreen';
import InitialScreen from '../screens/InitialScreen';
import LogoutScreen from '../screens/LogoutScreen';
const RootStack = createStackNavigator(
{
Drawer: {
screen: Drawer
},
LoginScreen: {
screen: LoginScreen
},
LogoutScreen: {
screen: LogoutScreen
}
InitialScreen: {
screen: InitialScreen
}
},
{
initialRouteName: 'InitialScreen',
headerMode: "none"
}
)
const App = createAppContainer(RootStack);
export default App;
and Index.js is -
import React, { Component } from 'react';
import { StyleSheet, AsyncStorage } from 'react-native';
import { Button, Text, Drawer } from 'native-base';
import App from './config/Routes';
import AppHeader from './components/Header/Header';
export default class Index extends Component {
render() {
const { globalContainer } = styles;
return (
<App
style={ globalContainer }
navigation={this.props.navigation}>
</App>
)
}
}
Any help??
It appears from the documentation that it should be a named import, not a default.
import { createAppContainer } from 'react-navigation';
Please read the docs. It's also a good first place to look when debugging.
How do I wrap the below code into an app-container please? I am trying to update from an older version of native.
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import SplashScreen from './screens/splash.screen';
const Splash = {
screen: SplashScreen,
defaultNavigationOptions: {
header: null
}
}
const RouteConfig = {
initialRoute: 'Splash'
}
const AppNavigator = createDrawerNavigator({
Splash: Splash
},RouteConfig)
export default AppNavigator;
export default createAppContainer(AppNavigator);
The component for route 'Feed' must be a React component.
I've checked most of the other similar questions here but the majority of them are due to basic syntax (which maybe I have too but am blind to!). I've removed chunks of code that aren't relevant to this issue (navigationOptions and other screens) and can still reproduce the error with just the below:
./navigators/AppNavigator.js
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import { FeedScreen } from '../screens/FeedScreen';
const FeedStack = createStackNavigator({
Feed: FeedScreen,
});
const DashboardTabNavigator = createBottomTabNavigator(
{
FeedStack
}
);
const DashboardStackNavigator = createStackNavigator(
{
DashboardTabNavigator: DashboardTabNavigator
}
);
const AppContainer = createAppContainer(DashboardStackNavigator);
export default AppContainer;
./screens/DashboardScreen.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import AppContainer from '../navigators/AppNavigator';
class DashboardScreen extends Component {
render() {
return (
<AppContainer />
);
}
}
export default DashboardScreen;
./screens/FeedScreen.js
import React from 'react';
import { View } from 'react-native';
export default class FeedScreen extends React.Component {
render() {
return (
<View>
</View>);
}
}
Any idea what I've done wrong here?
You have a default export for FeedScreen ... not a named export:
Try this:
import FeedScreen from '../screens/FeedScreen';
import { FeedScreen } from '../screens/FeedScreen'
You cannot importe like this if you re exporting by default.
Remove your default export or do replace your importe like this :
import FeedScreen from '../screens/FeedScreen'
You are using export default statement, that means you can´t import like that, you should provide a variable to store the component.
import Component from 'defaultexport'