I am getting the following error while trying to integrate the google login into a react native app and got the following error. It was working fine before. Could someone help. Unable to figure the error
import type {Node} from 'react';
import { GoogleSignin } from '#react-native-google-signin/google-signin';
import auth from '#react-native-firebase/auth';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Button
} from 'react-native';
const App: () => Node = () => {
GoogleSignin.configure({
webClientId: 'xxx',
});
const signInWithGoogleAsync = async() => {
const { idToken } = await GoogleSignin.signIn();
// Create a Google credential with the token
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
// Sign-in the user with the credential
const user_sign_in = auth().signInWithCredential(googleCredential);
user_sign_in.then((user) =>{
console.log(user);
})
.catch((error)=>{
console.log(error);
})
}
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Button
title='Sign in with Google'
onPress={signInWithGoogleAsync}
/>
</View>
);
};
export default App;
Related
So, I need to get the User's network IPV4 Address. This is my following code and the attempted Libraries that I used for fetching the IPV4 Address. None of them are working.
import React, { useState } from 'react'
import { Text, View, Button } from 'react-native'
import axios from 'axios';
import * as Network from 'expo-network';
import NetInfo from "#react-native-community/netinfo";
import { NetworkInfo } from "react-native-network-info";
import DeviceInfo from 'react-native-device-info';
import publicIP from 'react-native-public-ip';
const App = () => {
const [ipAddress, setIPAddress] = useState('');
//react-native-network-info
NetworkInfo.getIPV4Address().then(ipv4Address => {
console.log(ipv4Address);
setIPAddress(ipv4Address);
});
//react-native-device-info
const getIpAddress = async () => {
const ip = await DeviceInfo.getIpAddress();
console.log(ip);
setIPAddress(ip);
};
//react-native-public-ip
publicIP()
.then(ip => {
console.log(ip);
setIPAddress(ip);
});
//#react-native-community/netinfo
NetInfo.fetch().then(state => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
});
//axios
const getData = async () => {
const res = await axios.get('https://geolocation-db.com/json/')
console.log(res.data);
setIPAddress(res.data.IPv4)
};
//expo-network
const ipAlert = async () => {
const ip = await Network.getIpAddressAsync()
setIPAddress(ip);
};
return (
<View style={{ top: 200 }}>
<Text style={{ textAlign: 'center', fontSize: 20 }}>{ipAddress}</Text>
<Button title='GET IP' onPress={getIpAddress} />
</View>
)
};
export default App;
As you can see my code I have tried all the possibilities.
When I run the code, I either get the Public IP Address or an error
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Any Help is Appreciated.
:)
FYI- I tried each one separately, not all together.
i fond there is AppRegistry issue from your given error.
so you have to check root index.js file. and check the imported path of App.js which is highlighted in below example and replace actual path of app.js.
example:
index.js
import {AppRegistry} from 'react-native';
import App from './App'
import App from './App'; check this path
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
/
App.js
import { StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import publicIP from 'react-native-public-ip';
export default App = () => {
useState(() => {
publicIP()
.then(ip => {
console.log(ip);
// '47.122.71.234'
})
.catch(error => {
console.log(error);
// 'Unable to get IP address.'
});
}, [])
return (
<View>
<Text>App</Text>
</View>
)
}
const styles = StyleSheet.create({})
package is working in my code.
I have been following the tinder 2.0 react native tutorial https://youtu.be/qJaFIGjyRms At 1:04:00 he sets the sign in method to: "await Google.logInAsync()" but I have noticed the google app auth library used in the video is now deprecated, I am redirected to use expo auth session instead, with this new library I cannot tell whether the google sign in is working or not as I am simply redirected back to the homepage after clicking the login button.
Here is my code with response printed in the console:
Screenshot:
code:
import React, { createContext, useContext } from 'react'
import * as WebBrowser from "expo-web-browser";
import { Button } from "react-native";
import * as Google from "expo-auth-session/providers/google";
import { useEffect, useState } from "react";
import { useNavigation } from "#react-navigation/native";
import { GoogleAuthProvider, signInWithCredential } from 'firebase/auth';
const AuthContext = createContext({});
const user = null
WebBrowser.maybeCompleteAuthSession();
const GoogleLogin = () => {
const navigation = useNavigation();
const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId:
"236293699216-bst43767un873mcddmmrpgf4v2h088jd.apps.googleusercontent.com",
iosClientId:
"236293699216-6jdpm0rd6kn5d0qlbh1vgva5afgbqgib.apps.googleusercontent.com",
webClientId:
"236293699216-9a0nknjdq7ie79h40iubg0tddokgogfv.apps.googleusercontent.com",
scopes: ["profile", "email"],
permissions: ["public_profile","email", "gender", "location"],
});
const asyncAuthRequest = async () => {
if (response?.type === "success") {
const { authentication } = response;
// await AsyncStorage.setItem("accessTocken", "hihi");
//navigation.navigate"Home");
const { idToken, accessToken} = response;
const credential = GoogleAuthProvider.credential(idToken, accessToken);
await signInWithCredential(auth, credential)
}
return Promise.reject();
};
useEffect(() => {
asyncAuthRequest();
}, [response]);
console.log('response', response)
return (
<Button
disabled={!request}
title="Login"
onPress={() => {
promptAsync();
}}
/>
);
};
export default GoogleLogin;
I'm asking you this question because an error occurred again.
We're now receiving data through axios and storing that data through useState().
So if you create it on the screen and render it right away, you can see the data, but if you go to the previous page and go back in, an error occurs.
Please let me know how to solve it.
my Error
TypeError: undefined is not an object (evaluating 'userInfo._name')
my Code
import React, { useState, useEffect } from "react";
import { withNavigation } from "react-navigation";
import { Text, View, StyleSheet, SafeAreaView, Image } from "react-native";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import axios from "axios";
const MyPage = ({ navigation, info }) => {
const [userInfo, setUserInfo] = useState();
const getData = async () => {
try {
axios
.get(
"http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user"
)
.then((res) => res)
.then((data) => {
setUserInfo(data.data.data.result);
})
.catch((err) => console.log(err));
} catch (error) {}
};
useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
getData();
});
return unsubscribe;
}, [navigation]);
return (
<View>
{/* <Image source={require("../../images/profile.png")} /> */}
<Text>{userInfo._name}</Text>
<Text>{userInfo._mail}</Text>
</View>
);
};
export default withNavigation(MyPage);
The problem is happening in the initial render where the userInfo object is null.
Do something like below, where you access the property only when there is a value for userInfo
<Text>{userInfo?._name}</Text>
<Text>{userInfo?._mail}</Text>
I'm trying to start a new recording in Expo react native but for some odd reason the app crashes.
The code i written is pretty much copy paste from the official expo docs.
import React, { useState, useEffect } from 'react';
import { Audio } from 'expo-av';
import PitchFinder from "pitchfinder";
import { StyleSheet, Text, View, Button } from 'react-native';
const Tuner = () => {
const pitchFinder = new PitchFinder.YIN();
const start = async () => {
const recording = new Audio.Recording();
console.log(recording)
await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
await recording.startAsync();
const audio_stream = recording.getURI();
console.log(audio_stream);
await recording.stopAndUnloadAsync();
}
return (
<View>
<Button title="Start recording" onPress={() => start()} />
</View>
)
};
export default Tuner;
The app crashes at await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
with the error
Unhandled Rejection (TypeError): Cannot read property 'uri' of undefined
please check Expo documentation again
check permission
https://docs.expo.io/versions/latest/sdk/audio/
try with
const recording = new Audio.Recording();
try {
await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
await recording.startAsync();
// You are now recording!
} catch (error) {
// An error occurred!
}
I got my redux store to work but only if I import the store in the action creator file and call store.dispatch() from the action creator. Apparently calling store.dispatch() isn't a good practice and if I connect the function properly to the store, then I can just call dispatch() instead of store.dispatch(). That said, when I tried to just use dispatch(), I got the error: "Can't find variable: dispatch".
My best guess is that my issue is that I'm not using Redux's connect() function properly at the bottom of this code:
import React, {useState} from 'react'
import { connect } from 'react-redux'
import { StyleSheet, View, Text, TextInput, Image, TouchableOpacity } from 'react-native';
import { signup } from '../../actions/authAction'
const ApprovedScreen = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
return (
<View>
<TextInput
style={styles.textInput}
value={email}
onChangeText={text=>setEmail(text)}
/>
<TextInput
value={password}
onChangeText={text=>setPassword(text)}
/>
<TouchableOpacity onPress={()=>signup({email, password})}>
<Text>Create An Account</Text>
</TouchableOpacity>
</View>
)
}
export default connect(null, { signup })(ApprovedScreen)
And here's the { signup } function code:
import axios from 'axios'
import { LOG_IN } from './types'
export function signup ({email, password}) {
console.log('singup function ran')
axios
.post('https://MYAPI.com/signup', {email, password})
.then(response => dispatch({
type: LOG_IN,
payload: response.data.token
}))
.catch(error => {
console.log(error)
})
}
Since you're using redux-thunk, the action needs to return another function, which takes dispatch as an argument:
export function signup({ email, password}) {
return function(dispatch) {
return axios
.post('https://MYAPI.com/signup', {
email,
password
})
.then(response => dispatch({
type: LOG_IN,
payload: response.data.token
}))
.catch(error => {
console.log(error)
})
}
}
Also you need to pass signup function as the prop to your component:
const ApprovedScreen = ({signup}) => {