I am quite new to react-native. I am currently attempting to add a custom button. Whenever I try to import the file I have created (or any file that I myself have created) I keep getting this error I am unable to resolve. I have looked far and wide but I have not found any solution that works.
Relevant information:
Npm Version: 6.14.13,
React-Native version: 0.63.2,
Expo Version: 4.5.2.
Project structure:
https://imgur.com/a/zqtplbQ
The error I get:
Unable to resolve module ./components/custombutton.js from C:\Users\levik\Desktop\App\App\App.js:
None of these files exist:
* components\custombutton.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* components\custombutton.js\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
Code in App.js
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Dimensions } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import * as ScreenOrientation from 'expo-screen-orientation';
import { CustomButton } from "./components/custombutton.js";
const Stack = createStackNavigator();
export default function App() {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
return (
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerStyle: {
backgroundColor: '#1e1e1e',
},
headerTintColor: '#fff',
}}
/>
<Stack.Screen
name="Thing"
component={Thing}
options={{
headerStyle: {
backgroundColor: '#1e1e1e',
},
headerTintColor: '#fff',
}}
/>
<Stack.Screen
name="About"
component={About}
options={{
headerStyle: {
backgroundColor: '#1e1e1e',
},
headerTintColor: '#fff',
}}
/>
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
const HomeScreen = ({ navigation }) => { //the homescreen
navigation.addListener('focus', () => { //issue solver
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
});
return (
<View style={styles.container}>
<Button title="Poker" onPress={() => navigation.navigate('Thing')} />
<Button title="About" onPress={() => navigation.navigate('About')} />
</View>
);
}
const Thing = ({ navigation }) => { //looks like i have to use expo's API for setting it to landscape mode
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); //works
return (
<View style={styles.container}>
<Button title="Home" onPress={() => navigation.navigate('Home')} />
<Button title="About" onPress={() => navigation.navigate('About')} />
</View>
);
}
const About = ({ navigation }) => { //the
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT); //works
return (
<View style={styles.container}>
<Button title="Home" onPress={() => navigation.navigate('Home')} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#1e1e1e',
},
title: {
fontWeight: '700',
fontSize: 40,
color: 'white',
paddingTop: 40,
paddingLeft: 10,
}
});
Code in custombutton.js:
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Dimensions } from 'react-native';
export default function CustomButton() {
return(
<Text>this is text</Text>
);
}
Things I have tried:
Take custombutton out of the components folder and change the the import line in App.js to both "./custombutton.js" and "./custombutton"
change the import to "./components/custombutton"
Run both "expo start -c" and "npm start --reset-cache"
You are exporting the CustomButton component as a default export. But on App.js, you are importing it as a named import. So, you should either do:
export function CustomButton() on custombutton.js
OR
import CustomButton from "./components/custombutton.js"; on App.js
Related
When i try passing the params to my review screen it comes up undefined.
I'm using "#react-navigation/native": "^6.1.3" and "#react-navigation/stack": "^6.3.12"
App.js
import 'react-native-gesture-handler';
import { StyleSheet, Text, View, Button, TouchableOpacity, FlatList } from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import Stack from './routes/stack';
export default function App() {
return (
<NavigationContainer>
<Stack/>
</NavigationContainer>
);
}
Stack.js
import {createStackNavigator} from '#react-navigation/stack';
import ReviewScreen from '../screens/Reviews';
import HomeScreen from '../screens/Home';
import AboutScreen from '../screens/About';
const stack = createStackNavigator();
const Stack = () => {
return(
<stack.Navigator>
<stack.Screen name="Home" component={HomeScreen} />
<stack.Screen name="Review" component={ReviewScreen} />
</stack.Navigator>
)}
export default Stack;
HomeScreen
<View style={{width: 100, alignItems: "center"}}>
<TouchableOpacity style={{backgroundColor: "#333", padding: 10, borderRadius: 15, margin: 10}}
onPress={() => navigation.navigate("Review",
{title:"Title Name"}
)}
>
<Text style={{color: "white"}}>{item.title}</Text>
</TouchableOpacity>
</View>
Review.js
import {View, Text, Button} from 'react-native';
import React from 'react';
export default ReviewScreen = ({ navigation, route }) => {
console.log(route);
const { title } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Review Screen</Text>
<Button
title="Go to Home"
onPress={() => navigation.goBack()}
/>
</View>
);
};
When I send the object from the home page to the review screen the destructed title throws an undefined error and when I log the route object it shows that the params value is undefined.
console logged route object
{"key": "Review-xxx", "name": "Review", "params": undefined, "path": undefined}
How can I get the params to pass onto the review screen properly?
here is the working code see it!
App.js
import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details',{ title:"Full Stack Developer"})}
/>
</View>
);
}
function DetailsScreen({ navigation, route }) {
const { title } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{title}</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I had not properly installed the #react-navigation/native and #react-navigation/stack dependencies. Find them stated here and here respectively.
Hello guys so I wanted to add a navigation DRAWER inside my main screen and I did not know how to nest it with the already existing stack navigator ,
this is my navigation component :
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
import ProductDetails from "../screens/shop/ProductDetailScreen";
import { HeaderButtons,Item } from "react-navigation-header-buttons";
import HeaderButton from '../components/UI/HeaderButton'
import CartScreen from "../screens/shop/CartScreen";
import OrdersScreen from "../screens/shop/OrdersScreen";
const RootNavigation=()=> {
const Stack = createStackNavigator();
const NavigationDrawerStructure = (props)=> {
//Structure for the navigatin Drawer
const toggleDrawer = () => {
//Props to open/close the drawer
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={()=> toggleDrawer()}>
{/*Donute Button Image */}
<Image
source={{uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png'}}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
const screenOptions ={
headerShown:true,
headerStyle: {
backgroundColor: 'white',},
headerTintColor: 'aqua',
headerTitleStyle: {
fontWeight: 'bold',
},
};
return(
<NavigationContainer>
<Stack.Navigator initialRouteName='ProductsOverview' screenOptions={screenOptions}>
<Stack.Screen name='ProductsOverview' component={ProductsOverviewScreen} options={({navigation,route})=>({title:'All Products',headerTitleStyle:{fontFamily:'open-sans-bold'},
headerRight:()=>( <HeaderButtons HeaderButtonComponent={HeaderButton}><Item title ='Cart' iconName='md-cart' onPress={()=>{navigation.navigate('CartScreen')}}/></HeaderButtons>)})}/>
<Stack.Screen name='ProductsDetail' component={ProductDetails} options={({route})=>({title:route.params.productTitle,headerTitleStyle:{fontFamily:'open-sans-bold'}})} />
<Stack.Screen name='CartScreen' component={CartScreen} options={{title:'Cart Items', headerTitleStyle:{fontFamily:'open-sans-bold'}}} />
<Stack.Screen name='OrdersScreen' component={OrdersScreen} options={{title:'Orders '}}/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default RootNavigation;
and this is my app.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import {createStore , combineReducers} from 'redux';
import { Provider} from 'react-redux';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';
import productsReducer from './store/reducers/products';
import {composeWithDevTools} from 'redux-devtools-extension'
import RootNavigation from './navigation/ShopNavigation';
import cartReducer from './store/reducers/cart'
import { useState } from 'react';
import ordersReducer from './store/reducers/orders'
const rootReducer=combineReducers({
products: productsReducer,
cart: cartReducer,
orders:ordersReducer,
});
const store = createStore(rootReducer,composeWithDevTools());
const fetchFonts=()=>{
return Font.loadAsync({
'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf')
})
}
export default function App() {
const [fontLoaded,setfontLoaded]= useState(false);
if (!fontLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={()=>setfontLoaded(true)}
onError={console.warn}
/>
);
}
return (
<Provider store={store}>
<RootNavigation />
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
can you give me an idea how to nest them together I tried using the docs but still full of errors
and Thanks
Drawer Navigator must be a parent to both Stack and Tab navigators. With that knowledge, let we refactor our code as below:
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
import ProductDetails from "../screens/shop/ProductDetailScreen";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/UI/HeaderButton";
import CartScreen from "../screens/shop/CartScreen";
import OrdersScreen from "../screens/shop/OrdersScreen";
import { createDrawerNavigator } from "#react-navigation/drawer";
const RootNavigation = () => {
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const AppStack = () => (
<Stack.Navigator
initialRouteName="ProductsOverview"
screenOptions={screenOptions}
>
<Stack.Screen
name="ProductsOverview"
component={ProductsOverviewScreen}
options={({ navigation, route }) => ({
title: "All Products",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName="md-cart"
onPress={() => {
navigation.navigate("CartScreen");
}}
/>
</HeaderButtons>
),
})}
/>
<Stack.Screen
name="ProductsDetail"
component={ProductDetails}
options={({ route }) => ({
title: route.params.productTitle,
headerTitleStyle: { fontFamily: "open-sans-bold" },
})}
/>
<Stack.Screen
name="CartScreen"
component={CartScreen}
options={{
title: "Cart Items",
headerTitleStyle: { fontFamily: "open-sans-bold" },
}}
/>
<Stack.Screen
name="OrdersScreen"
component={OrdersScreen}
options={{ title: "Orders " }}
/>
</Stack.Navigator>
);
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="MainStack" component={AppStack} />
</Drawer.Navigator>
</NavigationContainer>
);
};
export default RootNavigation;
I omitted component code below as can't access drawer.
const NavigationDrawerStructure = (props)=> {
//Structure for the navigatin Drawer
const toggleDrawer = () => {
//Props to open/close the drawer
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={()=> toggleDrawer()}>
{/*Donute Button Image */}
<Image
source={{uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png'}}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
Here a minified version of working implementation
https://snack.expo.dev/#emmbyiringiro/69dc5b
I am developing a react-native application using expo cli, where I use bottomTabNavigator (which works fine) and the stackNavigator.
The application consists of 5 screens, which are navigated with the bottomTabNavigator, and of these five screens 2 need the stackNavigator.
For the implementation of the stack navigator I read the react native documentation, and reported in the project the example code that is on the documentation, to test the correct integration with my application.
My problem arises from the fact that importing the stack navigator into the actual screen where I need it, I am not shown any error messages, but neither do the navigation buttons of my test stack navigator appear.
Do you have any advice or suggestions as to why?
my stack navigator code : StackN.js
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({navigation}){
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Button title="Go to Profile" onPress={()=>navigation.navigate('Profile')} />
</View>
);
}
function ProfileScreen({navigation}){
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Button title="Go to Notifications" onPress={()=>navigation.navigate('Profile')} />
<Button title="Go Back" onPress={()=>navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
function MyStack() {
return(
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
);
}
export default function App() {
return(
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
screen where I import the stack navigator
import * as React from 'react';
import { View, Text, StyleSheet, Platform, Button,TouchableOpacity, ImageBackground, Dimensions, ScrollView } from 'react-native';
import Colors from '../constants/Colors';
import { Ionicons, MaterialCommunityIcons } from '#expo/vector-icons';
import ClubDetails from '../components/clubcomponents/ClubDetails';
import HeaderComponent from '../components/commoncomponents/HeaderComponent';
import { NavigationContainer } from '#react-navigation/native';
import StackN from '../navigations/StackN';
const ClubDetailScreen = props => {
return (
<View>
<HeaderComponent />
<View>
<ScrollView style={{height:100}}>
<Text>SCHERMATA NON DIRETTAMENTE COLLEGATA ALL'IMPLEMENTAZIONE ATTUALE : - TODO - </Text>
</ScrollView>
<NavigationContainer>
<StackN />
</NavigationContainer>
</View>
</View>
);
}
//opzioni di navigazione della pagina
const styles = StyleSheet.create({
header:{
marginTop:27,
height: 50,
backgroundColor: Colors.primary
},
text:{
},
icon: {
marginTop: 14,
marginLeft:3
},
title: {
marginVertical: -35,
fontSize: 20,
fontStyle: 'italic',
fontWeight: 'bold',
color: 'white',
textAlign: 'center'
},
avatar: {
marginLeft: Dimensions.get('window').width - 40,
marginTop: 7,
color: 'white'
},
dropdown:{
marginRight: 40,
}
});
export default ClubDetailScreen;
I have just started learning React Native. I am trying to insert bottom menu tabs on my first app.
I am using this code on Tabs.js (this is just the export part):
export default function Tabs() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
Unfortunately, I don't know how to call it to my main App file (this is just one of my attempts):
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
Tabs();
I've read about exporting default function, but I don't understand how to use it in my main App file. I'm sure that this is a syntax issue.
Also, I am planning to add a background colour to all tabs. Any advice?
Thank you.
UPDATE:
This is my Tabs file.
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Tabs = () => {
function Feed() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function Profile() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function MainPage() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="pill" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="format-list-text" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
export default Tabs
This is my main App file.
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
const App=()=>{
return <Tabs />
}
Make sure to export the App as default. You most probably have a file called index.js in the root folder and that is importing your App component.
Your App.js file should look like this:
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
export default const App=()=>{
return <Tabs />
}
And then your index.js file looks like this:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
You don't necessarily have to export as default, because you can only have one default export. If you export App as default you import it like this: import App from './App'; and if you export without a default, you have to import like this: import {App} from './App'
And to get an advice how to add background color to the tabs, check here: How to set the background color of Tab.Navigator?
you basically call it like would call a component
btw your Tabs should export like this
const Tabs=()=>{
/...
}
export default Tabs
const App=()=>{
return <Tabs />
}
I'm trying to make a Bottom NavBar with React Native with icons, but I have this error coming up Only one default export allowed per module.
The issue comes from the last line export default createAppContainer(TabNavigator);
I tried to do it this way export default createAppContainer(TabNavigator)(Home) and remove the export default to my Home.js component but it's not working either.
Does anyone know what I'm doing wrong. All help will be welcome!
import React, {Component} from 'react'
import {Text, View, StyleSheet } from 'react-native';
import {createBottomTabNavigator, createAppContainer } from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {Icon} from 'react-native-elements';
import Profile from "./Profile";
import Appointment from "./Appointment";
const styles = StyleSheet.create({
homeText: {
fontSize: 40,
},
homeCont: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
})
export default class Home extends Component {
render() {
return(
<View style={styles.homeCont}>
<Text style={styles.homeText}>HOME SCREEN</Text>
</View>
)
}
}
const TabNavigator= createMaterialBottomTabNavigator({
Home: {screen:Home,
navigationOptions: {
tabBarLabel: 'Home',
activeColor: '#ff0000',
inactiveColor: '#000000',
barStyle: {backgroundColor: '#67baf6'},
tabBarIcon:() => (
<View>
<Icon name={'home'} size={25} style={{color:'#ff000'}} />
</View>
)
}
},
Appointment: {screen:Appointment,
navigationOptions: {
tabBarLabel: 'Appointment',
activeColor: '#ff0000',
inactiveColor: '#000000',
barStyle: {backgroundColor: '#67baf6'},
tabBarIcon:() => (
<View>
<Icon name={'calendar'} size={25} style={{color:'#ff000'}} />
</View>
)
}
},
Profile: {screen:Profile,
navigationOptions: {
tabBarLabel: 'Profile',
activeColor: '#ff0000',
inactiveColor: '#000000',
barStyle: {backgroundColor: '#67baf6'},
tabBarIcon:() => (
<View>
<Icon name={'person'} size={25} style={{color:'#ff000'}} />
</View>
)
}
}
});
export default createAppContainer(TabNavigator);
The issue is that you are exporting the Home component `
export default class Home extends Component {
render() {
return(
<View style={styles.homeCont}>
<Text style={styles.homeText}>HOME SCREEN</Text>
</View>
)
}
}
Instead, do
function Home () {
return(
<View style={styles.homeCont}>
<Text style={styles.homeText}>HOME SCREEN</Text>
</View>
)
}