I am learning RN, and as a part of my project, I am building an app that will take me to my toolbelt of items I will be making or have made such as animations. I am currently struggling with the login component of it. I am looking to login to my app so that it can take me to the homepage. I am using asyncstorage. When I log in, nothing happens except it stays on the login page. I have provided the lines of code as to how I have it built out. I really am just looking for something to get to the homepage on my simulator. I won't be deploying it or anything as I am keeping it to myself, but if any of you have any recommendations for articles or videos on how to achieve this in a "simpler" fashion, I am open to that option as well.
<TouchableOpacity
style={styles.buttonContainer}
onPress={this._signInAsync}
>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
_signInAsync = async () => {
await AsyncStorage.setItem("userToken", "abc");
this.props.navigation.navigate("app");
};
}
Related
I have a Component that renders a Webview, of which there are links. For example, if I have something like:
export const About = () => {
return (
<SafeAreaView edges={['right', 'top', 'left']} style={{ flex: 1 }}>
<Webview url={`${BASE_URL}/about`} />
</SafeAreaView>
)
}
export default About
Let's say that on the /about page, we have a link to /faq. As things currently stand, if I click on the link to /faq, the page will be rendered in that current Webview.
My desired behavior is for the /faq to put on the navigation stack so I can take advantage of the back button in the header. I don't know how to accomplish this. I don't have access to the link to /faq via React Native (see code snippet above) so I can't just add an onClick that pushes a page to the stack.
Another thing I was exploring was setting up some linking configurations so I can link /faq to /about, and so the routing would recognize that. No idea if I was going down a good path there. Please forgive me if I've mixed up concepts, my understanding of the React Native ecosystem and React Navigation is still very raw. Thank you for your time.
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>
Update July 25, 2022: expo-cli#6.0.0 has been released with the web
UI removed. The last release to include the web UI is
expo-cli#5.5.1.
You can check this article in medium for more details from here.
Or you can check this old question from here.
I prefer to change the tutorial to one newer or just skip this detail and continue :D
For expo login try run this two commands and try again:
npm cache clean --force
npm install -g npm#latest --force
I'm having a difficult time trying to figure out how to log out both the user on the expo app as well as logging them out from the react-native-webview.
The user can log out of the expo app by pressing logout (which just handles the auth logic), however; the user is still logged in inside the webview (which is the shop uri).
At the moment, I came up with two possible ways: either set incognito to true on the webview, or send the user to a Screen which returns another webview to the shopify's logout uri.
// sending user to shopify logout webview
//navigator
<Stack.Navigator>
<Stack.Screen
name="AccountDetails"
component={AccountDetailsScreen}
/>
<Stack.Screen
name="ShopWebview"
component={ShopWebview}
/>
<Stack.Screen
name="LogOut"
component={LogOutWebView}
/>
</Stack.Navigator>
// from `AccountDetails` component, user presses handleLogout()
const handleLogOut = () => navigation.navigate('LogOut');
// shopify logout webview
export const LogOutWebView = () => {
return (
<WebView
source={{ uri: 'https://www.quarantotto.co.jp/account/logout' }}
/>
);
};
This seems to work w/ android, but it doesn't seem to work on iOS? I'm not quite sure why that is.
I can still set the incognito to true likeso:
// ShopWebview
<WebView
incognito
source={{ uri: 'someshop.com/' }}
/>
and this would help me not store the logged in user's session, but not quite sure if this is the proper way to handle auth.
If I can use the first method of sending the user to a webview that handles logout when a user visits it, that would be great. But not sure why it's not working from ios.
any ideas?
UPDATE: possible working solution?
Whenever the user logs out, they are sent back to a screen w/ login or register.
The issue was that whenever the user pressed login, since their session was cached, they are redirect to their account screen (which is what I don't want since if a user presses logout, I want them to be logged out and have to log back in).
what I have done is just inject some js in the LoginWebview
const handleNavigationStateChange = (newNavState) => {
if (webViewRef.current) {
webViewRef.current.injectJavaScript(scriptFetchCustomer());
}
if (newNavState.url.includes('logout')) {
setTimeout(() => {
const redirectTo = `window.location = "${someshop.com/login}"`;
webViewRef.current.injectJavaScript(redirectTo);
}, 500);
}
};
seems to work, but I don't enjoy using the settimeout. any recommendations?
second update... doesn't work on android
Android isn't working properly. I've set the source to the shopify's /account/logout uri, but inside handleNavigationStateChange the newNavState's url isn't the logout as it's set on the source.
....
Last update:
It finally works as I wanted to. I had to check for the url changes inside onNavigationStateChange of the webview. Then I could do what I wanted. I basically sent user to /account/logout, then set current logged in user state back into null which fires a redirect to login screen.
Hope it helps someone.
using some basic code, I am trying to access a sharepoint page:
import { WebView } from 'react-native-webview'
const ExampleScreen = ({ navigation }) => {
return (
<WebView style={{flex: 1}}
source={{uri: 'https://example.intra.net/sites/1/ProjectName/SitePages/Nameofpage.aspx'}}/>
)
}
export default ExampleScreen;
When I pull up the page on Safari, I can see it, because I'm logged in. However when I try to look at the page in the Expo Go test build, it says "401 Unauthorized". What is the process for authenticating something like this in a native app? I am a novice and I don't understand how it works.
In my a stack screen, I have used two library of webview system. The one is 'react-native-video', other is 'react-native-youtube-iframe'.
The problem is that each library conflicts. When the crash occurred, there were no error messages.
When entering the screen, Vimeo and YouTube play for about a second and then stop at the same time. Originally, it should be auto-play.
If only one library is used on one screen, it will play normally.
Below is my example code.
const Screen = () => {
return (
<View>
<Vimeo // import Vimeo from 'react-native-video'
{/*...settins*/}
/>
<YoutubePlayer // import YoutubePlayer from 'react-native-youtube-iframe'
{/*... settings*/}
/>
</View>
)
}
How can i solve this problem?