createDrawerNavigation() has been moved to react-navigation-drawer. See https://reactnavigation.org/docs/4.x/drawer-navigator.html for more details
It seems like you're trying to import createDrawerNavigator() from the react-navigation library. However, this function has since moved to react-navigation-drawer. The error already tells you exactly what's happening. If you take a look at the documentation this error links you, you'll find what to import:
import { createDrawerNavigator } from 'react-navigation-drawer';
For starters>
For App.js imports in project or src, remove {createDrawerNavigator} from import from "react-navigation" to 'react-navigation-drawer'
ex:
From => import {createDrawerNavigator, createStackNavigator, createAppContainer} from "react-navigation";
Remove => import {createStackNavigator, createAppContainer} from "react-navigation";
To => import {createDrawerNavigator} from 'react-navigation-drawer';
Related
My app gets closed as soon as I click on my speedtest screen.This is my code. It runs well in debugging mode. But the screen does not open in the release version(apk). These are the packages I am using for this component.
import React, {useState, useEffect} from 'react';
import {
Text,
Image,
View,
ScrollView,
TouchableOpacity,
SafeAreaView,
StatusBar,
ImageBackground,
Dimensions,
Modal,
TouchableWithoutFeedback,
} from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
import {NetworkInfo} from 'react-native-network-info';
import Ping from 'react-native-ping';
import Icon from 'react-native-vector-icons/Ionicons';
import RNSpeedometer from 'react-native-speedometer';
import {measureConnectionSpeed} from 'react-native-network-bandwith-speed';
import Speedometer from 'react-native-cool-speedometer';
import {AppFont, Color} from '../components/Constatnts';
import {PermissionsAndroid} from 'react-native';
import WifiManager from 'react-native-wifi-reborn';
import {AUTH, LOGIN_URL} from '../components/APIs';
import axios from 'react-native-axios';
import {Detail} from '../components/Token';
import {UserId, Token} from '../components/Token';
import LinearGradient from 'react-native-linear-gradient';
import StyleSheet from 'react-native-media-query';
import AsyncStorage from '#react-native-async-storage/async-storage';
i guess maybe module import from 'react-native-gesture-handler',
ex: import FlatList from 'react-native-gesture-handler'. it work on debug but die with release in some case. or try import 'react-native-gesture-handler' in App.js or index.js .
For the most accurate, you need to open android studio, select build variant chosse release, select error log and filter with pakage name
When running a create-react-app app with react-bootstrap installed, I am getting this error below when trying to add a Button
My imports are like this:
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import PropTypes from "prop-types";
import { Button } from "bootstrap";
import { PureComponent } from "react";
and the render code:
render() {
return (
<div className="App">
<header />
<Button>Test</Button>
...
I have looked into lots of other questions talking about Babel, Webpack, and a compiler config. But I am not seeing all these configurations inside my create-react-app.
So, I found the problem. After 1 hour lost.
The mistake was on the suggested import that I've added.
Wrong:
import { Button } from "bootstrap";
Right:
import { Button } from "react-bootstrap";
I am getting the error in metro bundler as mentioned in Title but I am not using Async anywhere or I did not import Async from anywhere (not even from react native core).
Below are my imports
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import firebase from 'firebase';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import * as Animatable from 'react-native-animatable';
Screen Shot of error
I have checked this issue already but as I have not used the Async directly in my code so this does not completely solves the error
When running my IOS app in a simulator I'm getting this error.
Here is my relevant code.
import {createSwitchNavigator, createAppContainer} from "react-navigation"
import SideBar from "../App/Components/SideBar"
import createDrawerNavigator from "react-navigation-drawer";
//Components
import Login from "../App/Views/Login"
import Categories from "../App/Views/Categories"
import UserProfile from "../App/Views/UserProfile"
const BataDrawerNagivator = createDrawerNavigator({
Dashboard: {screen: SideBar }
});
const BataNavigator = createSwitchNavigator({
LoginScreen: Login,
CategoriesScreen: Categories,
UserProfileScreen: UserProfile,
Dashboard:{ screen: BataDrawerNagivator}
});
export default createAppContainer(BataNavigator);
I've read through multiple resources online that have this same error but all of the answers seem to be referring to a deprecated dependency which I don't think is the case here.
What's interesting is each navigation works fine individually but as soon as I try to nest them it throws this err.
You are getting this error because you are importing createDrawerNavigator wrongly
change
import createDrawerNavigator from "react-navigation-drawer";
to
import {createDrawerNavigator} from "react-navigation-drawer";
Hope this helps!
I'm new to React Native and I am currently trying to create a custom component called OpButton. It's just a button so that I can try to import and export components. However everytime I try to import it, I keep getting errors like "Imvariant Violation" and I have no idea how to fix it.
import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
export default class OpButton extends Component {
render() {
return (
<Button
onPress={() => Alert.alert("Hello World")}
title= "Hello World"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
);
}
}
My button.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { OpButton } from "./src/components/button";
export default class App extends Component {
render() {
return (
<OpButton></OpButton>
);
}
}
My App.js
Try import OpButton from "./src/components/button"
Curly braces are used on an import when the file you're importing from is exporting the variable as a const (export const OpButton . . .) but when you export default OpButton, then when you import from that file without curly braces, you always import the default thing, no matter what you call it in your import. So you could do import AnyNameYouWant from "./src/components/button" and then use <AnyNameYouWant /> in your App.js
Though the answer was already accepted. I want to make you clear on few things. You need to understand two things here
export default class
export class
When you use export default class which means that component is exported by default and you can import that like below
import component from ‘./Component’;
When you use export class without default, you can import that like below
import {component, component1} from ‘./Component’;