I am having a issue on react native. This is my first time using so I am following a guide from https://www.youtube.com/watch?v=f6TXEnHT_Mk. According to the video, after npm start, I am suppose to arrive with a browser opened that look like:
But it did not happen on my laptop. When I tried to copy the link in the terminal to a browser, I get this instead:
Can anyone explain to me what did I do wrong? I have double checked everything and is the same as the video till this point. In the video for this to appear the window defender firewall was blocking the feature so the user allow access for that. But my firewall seems to not be blocking it
Having error logging in expo via terminal:
Solved
I am currently following a guide which is from https://www.youtube.com/watch?v=ql4J6SpLXZA
I am doing the login UI and around the 8 min mark, i decided to take a short break. After coming back, I continued till the 9 min mark and i am met with this:
Tried to remove the code I newly added but the problem still did not go away.
Referring to Unable to resolve "../../App" from "node_modules/expo/AppEntry.js", tried to add
"sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"]
in the app.json file but I do not have the
packageOpts line in the file. How do i solve this?
Solved
I am still following the guide above: https://www.youtube.com/watch?v=ql4J6SpLXZA.
Now I am having issue with firebase. As stated in the video, it is for firebase 8 and I am using firebase 9 so I used the code provided by firebase:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDI9Ggk4h-bHBSDjZAZgMaB6Ur_lvJIPKw",
authDomain: "fypapp-4f10a.firebaseapp.com",
projectId: "fypapp-4f10a",
storageBucket: "fypapp-4f10a.appspot.com",
messagingSenderId: "306492584822",
appId: "1:306492584822:web:24b7ccb717a107df6b4057"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
With this I was having an error of
Unable to resolve "idb" from "node_modules\@firebase\app\dist\esm\index.esm2017.js"
And I found a answer from online to bypass that by creating metro.config.js with the code: (This is for future user that is having trouble with this error)
const { getDefaultConfig } = require("@expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
But now I am having another error when creating new user. I have the following error :
TypeError: undefined is not an object (evaluating '_firebase.auth.createUserWithEmailAndPassword')
I searched around stack and no one has post error of
evaluating '_firebase.auth.createUserWithEmailAndPassword`
Is there something I can do to solve this?
Another problem I have is regarding the styling for the page,
I have this currently: (When i never attempt to type anything new in the input boxes)
When i try to type something new in the input boxes:
I have the following code: How do i correct it so that my keyboard can be seen and the input boxes can be seen at the same time?
<KeyboardAvoidingView //To prevent keyboard from blocking the writing area
style={styles.container}
behavior = "padding"
>
<View style = {styles.inputContainer}>
<TextInput
placeholder = "Email"
value={email}
onChangeText ={text => setEmail(text)}
styles = {styles.input}
/>
<TextInput
placeholder = "Password"
value={password}
onChangeText ={text => setPassword(text)}
styles = {styles.input}
secureTextEntry //Hide password
/>
</View>
<View style = {styles.buttonContainer}>
<TouchableOpacity
onPress = {() => { } }
style = {styles.button}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {handleSignUp}
style = {[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Register</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
