How to bypass the module not found on react.js - reactjs

I am stuck at the expo page. When I load the landing page, I get an error. .. "Module not found. " quick google search said i need to remove package-lock.json and reinstall npm back gain. I tried that method and i still run into the same problem. What should I do?
Failed to compile C:/Users/Asus/instragram/App.js Module not found: Can't resolve './components/auth/Landing' in 'C:\Users\Asus\instragram'
Below is the code of the landing page:
import React from 'react'
import {Text, View , Button} from 'react-native'
export default function Landing;({navigation}) {
return (
<view style = {{flex: 1, justifyContent: 'center'}}>
<button>
title="Register"
onPress = {() => navigation.navigate("Registr")}
</button>
<button>
title="Login"
onPress = {() => navigation.navigate("Login")}
</button>
</view>
)
}

Please try removing ; in line 3 of Landing page :
import React from 'react';
import {Text, View , Button} from 'react-native';
export default function Landing({navigation}) {
return (
<view style = {{flex: 1, justifyContent: 'center'}}>
<button>
title="Register"
onPress = {() => navigation.navigate("Registr")}
</button>
<button>
title="Login"
onPress = {() => navigation.navigate("Login")}
</button>
</view>
)
}

Related

Can't generate pdf download link with react-pdf

I'm new with react. I want to create a website that can generate pdf file to download. I use React with Vite and Tailwind. I found this in internet: https://react-pdf.org/advanced#on-the-fly-rendering.
I try it in my code but nothing shows up.
import {Document, Page, PDFDownloadLink, StyleSheet, Text, View} from "#react-pdf/renderer";
import React from "react";
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#E4E4E4",
},
section: {
margin: 10,
padding: 10,
flexGrow: 1,
},
});
// Create Document Component
const MyDoc = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
const Dashboard = () => (
<div>
<PDFDownloadLink
className=" bg-slate-600"
document={<MyDoc />}
fileName="somename.pdf"
>
{({ blob, url, loading, error }) =>
<button className=" bg-slate-500">Loading document...</button>
) : (
<button className=" bg-slate-500">Download now!</button>
)
}
</PDFDownloadLink>
</div>
);
export default Dashboard;
And i call this from my App.jsx file
import Dashboard from "./Dashboard";
function App() {
return (
<div className=" bg-slate-500">
<Dashboard />
</div>
);
}
export default App;
This is how it's look when run
This is when i inspect
I run it from brave browser, but it still the same when i run it from google browser.
Anyone know why this is happen? Any help is appreciated
So after a lot of searching, i found that my problem is caused by vite. This post pretty much solve it

Why are my react icons not functioning properly?

attached is the code below for a little app I am making with React Native. I was trying to use react icons but for some reason they are not working and idk why. I imported them and everything and they should be working but I keep getting this error. Does anyone know why my react icons are not functioning properly? Thanks in advance.
import { View, Text, SafeAreaView, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '#react-navigation/native';
import { FaBeer } from 'react-icons/fa';
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);
return (
<SafeAreaView>
<Text className="text-red-500">
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
url:"https://links.papareact.com/wru",
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View>
<Text className="font-bold text-gray-400 text-xs">
Deliver Now
</Text>
<Text className="font-bold text-xl">Current Location
<FaBeer />
</Text>
</View>
</View>
</Text>
</SafeAreaView>
);
};
export default HomeScreen;
react-icons doesn't work with react native (i think). You need to use react-native-vector-icons (https://www.npmjs.com/package/react-native-vector-icons)
you cant use normal react icons since in react native icons can be either an image or can be SVG, so for SVG icons, you need to add react-native-svg package.
You should install as #dev404 said https://github.com/oblador/react-native-vector-icons
Also do follow their installation process for both android and ios.
YOu can check the below available icon sets.
Hope it helps, feel free for doubts

tailwind-rn tailwind function returns empty object

I was trying to set up tailwind-rn in my project, but it seems impossible. The documentation says you should use yarn add tailwind-rn to install, then npx setup-tailwind-rn to set it up. This is a code example on the github page:
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const Hello = () => {
const tailwind = useTailwind();
return (
<SafeAreaView style={tailwind('h-full')}>
<View style={tailwind('pt-12 items-center')}>
<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
<Text style={tailwind('text-blue-800 font-semibold')}>
Hello Tailwind
</Text>
</View>
</View>
</SafeAreaView>
);
};
export default Hello;
My code looks like this:
import { StyleSheet, Text, View } from 'react-native';
import {useTailwind} from 'tailwind-rn';
export default function App() {
const tailwind = useTailwind();
return (
<View style={tailwind('text-white')}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
The code does not throw any error, but simply produces nothing. I also checked the value of tailwind('text-white'), which seems to be just an empty object. Why does that not work?
Add this to your dependencies (package.json)
"tailwind-react-native-classnames": "^1.5.1",
and Import it in your project page like this,
import tw from "tailwind-react-native-classnames";
Finally use the tailwind styles like this,
style={tw`flex-1`}
<View style={[tw`bg-gray-200`, { height: 0.6 }]} />
And finally your code will work.

[React Native, RN]TypeError: undefined is not an object (evaluating 'route.params')

import React, {useState, Component, useMemo} from 'react';
import { StyleSheet, Text, View, Button, TextInput, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import AsyncStorage from '#react-native-async-storage/async-storage'
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
function GameScreen({ navigation, route }){
const [name, setName] = useState('이화연');
return(
<View style={{paddingTop:10}}>
<View style={{flexDirection:"column"}}>
<Text style={text_st}>당신의 이름을 알려 주세요.</Text>
<TextInput style={input_st}
onChangeText={setName}
value={name}
maxLength={10}/>
<Button title="확인"
color= {EwhaGreen}
onPress={function(){navigation.navigate('1',
{ params: name } )}} />
</View>
</View>
);
};
function GameScreen_1({ navigation }, {route}){
var N = route.params.name
return(
<View style={{alignItems:'center', justifyContent:'center'}}>
<View style={{margin:5}}></View>
<div>
<Text>{N}, 일어나!</Text>
</div>
<Text>눈을 떠 보니 여기는...?</Text>
<View style={{margin:5}}></View>
<Image style={{width:500, height:500}} source={require('./assets/1.jpg')} />
<View style={{margin:10}}></View>
<Button title="이화여대?"
color= {EwhaGreen}
onPress={function(){navigation.navigate('2') }} />
</View>
);
};
I want to use const name in function GameScreen_1. But only thing I got is an error code 'TypeError: undefined is not an object (evaluating 'route.params')' Please help me. I spend many days to solve this problem.
It should be
function GameScreen_1({ navigation, route})
You have placed it inside another Curley brackets.
Your function body should look like that
function GameScreen_1({ route, navigation }){
Here the docs https://reactnavigation.org/docs/params/

undefined unable to resolve module react-navigation-stack from app.js

I installed react-navigation and all its dependencies step by step based on its documentation.
I've created two components in a single file namedroot.js this is the code:
import React from 'react';
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
This is the first competent:
const Homescreen = () => {
return (
<View style={styles.container}>
<Text>Home screen</Text>
<Button
title='go to next page'
></Button>
</View>
)}
Second one:
const Loginscreen = () => {
return (
<View style={styles.container}>
<Text>Login screen</Text>
<Button
title='go back'
></Button>
</View>
)}
This the navigation code:
const AppNavigator = createStackNavigator({
Home: { screen: Homescreen },
Login: { screen: Loginscreen }
},
{
initialRouteName: 'Home'
}
);
export default createAppContainer(AppNavigator);
Then i imported AppNavigator into App.js file like this:
import AppNavigator from './src/root';
const App=() => {
return (
<View style={styles.container} >
< AppNavigator/>
</View>
)
};
react native version is: "0.61.5".
react-navigation version is: "^4.1.1".
And all dependencies have been installed.
I am getting following error, Which part did i make mistake?
It's possible the install failed for react-navigation-stack. Try installing it again and if you are using npm or yarn as your package manage, look for confirmation in the file package.json.
npm install react-navigation-stack

Resources