I have created a MenuButton as well as 2 other pages one of them being the settingScreen, where I have imported the MenuButton within both files and they seem to be working fine. But when I import the setting Screen on the DrawerNavigator file it doesn't recognize MenuButton
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module `./Menu/MenuButton` from `/Users/camillebasbous/Project/Menu/SettingScreen.js`: The module `./Menu/MenuButton` could not be found from `/Users/camillebasbous/Project/Menu/SettingScreen.js`. Indeed, none of these files exist:
* `/Users/camillebasbous/Project/Menu/Menu/MenuButton(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`
* `/Users/camillebasbous/Project/Menu/Menu/MenuButton/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)` (null))
__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.228
RCTCxxBridge.mm:414
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
__NSOQSchedule_f
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread2
_pthread_wqthread
start_wqthread
I have tried testing ou the other page and after a few tests I realized that the presence of the imported MenuButton within these pages is what is forcing an error Is there a way to import a file that has imported another to be displayed or do I have to import both of them within drawerNavigation and if so how to structure the code. Thanks
Drawer Navigation code:
import * as React from 'react';
import { Text, View, Image, ScrollView, StyleSheet } from 'react-native';
import {
createDrawerNavigator,
createAppContainer,
DrawerItems,
SafeAreaView,
} from 'react-navigation';
import SettingScreen from './Menu/SettingScreen'
class Home extends React.Component {
static navigationOptions = {
title: 'Home',
};
render() {
return (
<View style={styles.container}>
<SettingScreen/>
</View>
);
}
}
const Navigator = createDrawerNavigator(
{
Home,
},
{
//drawerType: 'back',
// drawerPosition: 'right',
// drawerWidth: 200,
drawerBackgroundColor: '#262A2C',
// contentComponent: CustomDrawerContentComponent
}
);
export default createAppContainer(Navigator);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});
SettingScreen code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from './Menu/MenuButton'
export default class SettingScreen extends React.Component{
render(){
return(
<View style={styles.container}>
<MenuButton/>
<Text style={styles.text}>Settings</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(215,215,215,1)',
alignItems: 'center',
justifyContent: 'center',
},
text:{
fontSize: 30,
}
});
MenuButton code:
import React from 'react';
import {AppRegistry, StyleSheet, View} from "react-native" ;
import Icon from 'react-native-vector-icons/Ionicons'
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
export default class MenuButton extends React.Component {
render() {
return(
<View >
<Icon name= "ios-menu" size={wp('12%')} color='#9B9B9B' style={{position: 'absolute', top: wp('-82.5%'), left: wp('-46%'), }}></Icon>
</View>
)
}
}
AppRegistry.registerComponent('Menu', () => FixedDimensionsBasics);
The path you are using on import is relative to your file. So, as everything is on the same folder, you must correct the import path like that:
On Drawer Navigator code
import SettingScreen from './SettingScreen'
On SettingScreen code
import MenuButton from './MenuButton'
Related
I'm having an issue with my react-navigation-stack, I believe it could be a problem with dependencies, but I'm not sure if that's it. I am simply trying to have some text redirect to another page. If there is code that is irrelevant to the issue, such as a button, I apologize as I am trying to learn react native. The problem is being pointed at homeStack.js at the first import, "import { createStackNavigator } from '#react-navigation/stack';" , but previously I just used react-navigation-stack there, which I believe was a part of old dependencies, but it gave me a module not found error at first, which changed to what I have now when I put #react-navigation/stack instead. I was learning from a video tutorial, but the code from the tutorial was not compiling. I redownloaded react navigation multiple times and have tried some thing that did not work. I will post my code below and would really appreciate help and input as to what can help my problem. Thanks you!
Picture of error
homeStack.js
import { createStackNavigator } from '#react-navigation/stack';
//import { createAppContainer } from '#react-navigation/native';
//import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
const screens = {
Home: {
screen: Home,
},
ReviewDetails: {
screen: ReviewDetails,
},
};
// home stack navigator screens
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
home.js
import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Home() {
return (
<View style={globalStyles.container}>
<Text style={globalStyles.titleText}>Home Screen</Text>
</View>
);
}
App.js
//import React from 'react';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Buttonwithbackground from './src/Buttonwithbackground';
import { StackNavigator } from 'react-navigation';
//import Expo from 'expo';
//import Screen from 'screen2';
import { AppLoading } from 'expo';
import Navigator from './routes/homeStack';
import { render } from 'react-dom';
//
//import {Link} from 'react-router-dom';
class HomeScreen extends React.Component{
static NavigationOptions = {
title: 'Home',
};
render(){
const { navigate} = this.props.navigation;
return(
<View style={styles.container}>
<Text
onPress= { ()=> navigate('Home') }>Navigate to Profile
</Text>
</View>
);
}
}
class ProfileScreen extends React.Component{
static NavigationOptions = {
title: 'Profile',
};
render(){
const { navigate} = this.props.navigation;
return(
<View style={styles.container}>
<Text
onPress= { ()=> navigate('Profile') }>Navigate to Profile
</Text>
</View>
);
}
}
//export default function App() {
export default class App extends Component {
editUser = () => {
this.props.navigation.navigate("Screen");
// this.navigation.navigate("screen2");
// window.location.href = 'screen2';
};
editUser2 = () => {
//if the second button is clicked, it will redirect to yahoo.com
window.location.href="http://yahoo.com"
};
render(){
return (
<View style={styles.container}>
<Image
style={{width: 350, height: 200}}
source = {require('./assets/dolanduckjoker.jpg')}
/>
<Navigator />
<Buttonwithbackground text='Login' color='black' onPress={this.editUser2}/>
<p><br/></p>
<Button title='Login' color='black' onPress={this.editUser2}/>
<Button title='Login' color='black' onPress={() => navigation.navigate('screen2.js')}/>
<p><br/></p>
<Button
style={styles.cancelButton}
onPress={this.editUser}
title="Register"
color="#343434"
accessibilityLabel="Register a User."/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 32,
textAlign: 'center',
margin: 10,
},
});
The error says what's wrong -
Object(...) is not a function
createStackNavigator expects a function and you are passing an object to it as a parameter. According to docs
Your code should look like -
import { createStackNavigator } from '#react-navigation/stack';
//import { createAppContainer } from '#react-navigation/native';
//import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="ReviewDetails" component={ReviewDetails} />
</Stack.Navigator>
);
}
export default MyStack; //you need to render this
Now in your root file, It should be something like this (excluding your additional code) -
import { createStackNavigator } from '#react-navigation/stack';
import MyStack from "yourPath";
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
I am new to react native and I have been trying to create a header and pull out menu using createDrawerNavigator.
When running my code I get the following error.
Error: The component for route 'Home' must be a React component. For example:
import MyScreen from './MyScreen';
Home: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
Home: MyNavigator,
}
Here is my app.js file:
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import MyDrawerNavigator from './components/MyDrawerNavigator';
const MyApp = createAppContainer(MyDrawerNavigator);
export default class App extends React.Component {
render() {
return <MyApp />;
}
}
My HomeScreen.js file
import React from 'react';
import { Text, Button } from 'react-native';
import LogoTitle from './LogoTitle';
class MyHomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerLeft: (
<Button
onPress={() => this.props.navigation.navigate('DrawerToggle')}
title={'Menu'}
/>
),
};
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
export default MyHomeScreen;
My MyDrawerNavigator.js file
import React from 'react';
import { Button, Platform, Image, View, Text } from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import MyHomeScreen from './HomeScreen';
import DetailsScreen from './DetailScreen';
const MyDrawerNavigator = createDrawerNavigator(
{
Home: MyHomeScreen,
Details: DetailsScreen,
}, {
drawerPosition: 'right',
contentOptions: {
activeTintColor: '#000',
},
});
export default MyDrawerNavigator
The are 2 problems here:
1) You are not exporting your MyDrawerNavigator just add:
export default MyDrawerNavigator
to your MyDrawerNavigator.js file
2) You are not exporting your HomeScreen. You'll have to create a separate file for it, like you did with DetailsScreen.
The HomeScreen.js file would look like:
class MyHomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerLeft: (
<Button
onPress={() => this.props.navigation.navigate('DrawerToggle')}
title={'Menu'}
/>
),
};
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
You NEED to add a render inside of your screens
Am trying to start playing with React Native now. And I come from web development field.
Since start, am trying to organize my folder structure so that it would be easy for me to understand and make modifications later.
Right now the folder structure is as follows:
/screens
HomeScreen.js
ProfileScreen.js
/navigation
MainNavigation.js
App.js
... etc
Am using Expo CLI as this is my first time working on React Native.
/navigation/MainNavigation.js
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Profile: ProfileScreen,
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
export default class Navigation extends React.Component {
render() {
return (
<AppContainer />
);
}
}
/screens/HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
export default function HomeScreen() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.blue_btn} onPress={() => this.props.navigation.navigate('Profile')}>
<Text style={styles.white_text}>Profile</Text>
</TouchableOpacity>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
HomeScreen.navigationOptions = {
header: null,
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
blue_btn: {
backgroundColor: '#13baa8',
padding: 10,
},
white_text: {
color: 'white',
}
});
/screens/ProfileScreen.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function ProfileScreen() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
ProfileScreen.navigationOptions = {
title: 'Profile',
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
App.js
import React from 'react';
import Navigation from './navigation/MainNavigation';
export default class App extends React.Component {
render() {
return (
<Navigation />
);
}
}
When I click on the Profile button in the HOME Screen, it is showing this message:
undefined is not an object(evaluating '_this.props.navigation')
Thank you
import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';
const NavStack = createStackNavigator({
ScreenOne: {
screen: ScreenOne,
},
ScreenTwo: {
screen: ScreenTwo,
},
});
const App = createAppContainer(NavStack);
export default App;
I have been trying to display a MenuButton and SideBar that works well when tested individually on a blank page called SettingScreen. based on some situations either the SideBar shows or nothing, only if implemented alone will the MenuButton show.
After a few trials, I realized that the alignItems prop allows the MenuButton to be displayed if implemented without the SideBar but eliminated the SideBar, and if both are implemented without the presence of alignItems then only the SideBar shows. I am new to this and I have been wondering how can I make sure that only the MenuButton is aligned and that the presence of the SideBar doesn't affect the MeuButton position or presence. And if there are better ways please do tell, thank you.
Menu Button:
import React from 'react';
import {AppRegistry, StyleSheet, View} from "react-native" ;
import Icon from 'react-native-vector-icons/Ionicons'
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
export default class MenuButton extends React.Component {
render() {
return(
<View >
<Icon name= "ios-menu" size={wp('12%')}
color='#9B9B9B'
style={{position: 'absolute', top: wp('-82.5%'), left: wp('-46%'), }}
onPress={() => this.props.navigation.openDrawer()} >
</Icon>
</View>
)
}
}
AppRegistry.registerComponent('Menu', () => FixedDimensionsBasics);
SideBar:
import React from 'react';
import {AppRegistry, StyleSheet, View} from "react-native" ;
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
export default class MenuButton extends React.Component {
render() {
return(
<View style={styles.container}>
</View>
)
}
}
const styles= StyleSheet.create({
container:{
flex: 1,
backgroundColor: '#FFFF',
left: wp('75%'),
width: 100,
}})
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from './Menu/MenuButton'
import SideBar from './Menu/SideBar'
export default class SettingScreen extends React.Component{
render(){
return(
<View style={styles.container}>
<MenuButton navigation= {this.props.navigation}/>
<SideBar/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#0000',
alignItems: 'center',
justifyContent: 'center',
}
});
with this code the result is a blank page
I'm new to react-native/expo, and I'm currently trying to test my code and make sure that I set up react-navigation properly. When I try to run on expo on my smartphone, I get back this:
Unable to resolve module './screens/RegistrationScreen' from
'C:\Users[username]\Desktop\JDA\Smartbox\screens\HomeScreen.js': The
module './screens/RegistrationScreen could not be found from
'C:\Users[username]\Desktop\JDA\Smartbox\screens\HomeScreen.js'.
Indeed, none of these files exist...
I'm not exactly sure if I'm writing the directory wrong or not, but I can't seem to find many other situations where this is happening and find a proper solution.
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
StatusBar,
Text,
Button,
TouchableOpacity,
View,
} from 'react-native';
import { WebBrowser } from 'expo';
import { MonoText } from '../components/StyledText';
import {createStackNavigator} from 'react-navigation';
import RegistrationScreen from './screens/RegistrationScreen';
export default class HomeScreen extends React.Component {
static navigationOptions = {
header: null,
};
onPress = () => {
this.props.navigation.navigate('Home')
};
render() {
return (
<View style={{flex: 1}}>
<View style={[{flex: 1}, styles.container]}>
<Text style={styles.getStartedText}>Manage my locks</Text>
</View>
<View style={{flex: 2}}/>
<Button style={{flex: 1}}title="Registration Test" onPress={this.onPress}>
</Button>
<Button style={{flex: 1}} title="Add new lock">
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
...Platform.select({
android: {
marginTop: StatusBar.currentHeight + 15
}
})
},
developmentModeText: {
marginBottom: 20,
color: 'rgba(0,0,0,0.4)',
fontSize: 14,
lineHeight: 19,
textAlign: 'center',
},
contentContainer: {
paddingTop: 30,
}
});
createStackNavigator({
Register: {
screen: RegistrationScreen
},
Home: {
screen: HomeScreen
}
});
The header from RegistrationScreen is like so:
import React from 'react';
import {
AppRegistry,
Button,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from 'react-native';
import {createStackNavigator} from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
The HomeScreen and Registration Screen are in the same directory. I'm just doing this for testing, but I want to be sure that I can navigate from this screen to registration once I press the button.
Since your HomeScreen and RegistrationScreen are in same directory your import of HomeScreen should be
import HomeScreen from './HomeScreen';
instead of
import HomeScreen from './screens/HomeScreen';
and of RegistrationScreen should be
import RegistrationScreen from './RegistrationScreen';
instead of
import RegistrationScreen from './screens/RegistrationScreen';