I am having trouble implementing "Sign in with Facebook" Authentication in my mobile application. I have a feeling I am missing something tiny but can't seem to crack it.
StartScreen.js
import {signInWithFacebook, FacebookAuthProvider, signInWithPopup} from 'firebase/auth'
import { auth, facebookProvider } from '../firebase'
const signInWithFacebook = () => {
signInWithFacebook(auth, facebookProvider)
.then((re) =>{
console.log(re);
})
.catch((err)=>{
(err.message)
})
}
I have tried signUpWithPopUp and signInWithFacebook, but I am beginning to think there is an issue inside the function itself. With the current screenshot, I am receiving a "Maximum call stack size exceeded." error.
Firebase.js
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const facebookProvider = new FacebookAuthProvider();
export { auth, facebookProvider }
I have tried removing facebookProvider from the function, using just "auth", and that is not working either, receiving the same error.
I have attempted different combinations between the parameters I am passing and whether I am using signInWithFaceBook or signInWithPopup.
In case it is relevant, here is the button I am using:
startscreen.js
<TouchableOpacity
onPress = {signInWithFacebook}>
<View
style={[
styles.login_social_button,
styles.login_social_facebook,
]}>
<List.Icon style = {styles.login_social_icon} icon="facebook" />
</View>
</TouchableOpacity>
Thank you
Related
I keep getting the following error and my app crashes when I try to use the method createUserWithEmailAndPassword or signInWithPhoneNumber from RNFirebase on my react native app. This is currently happening only on the android version of my app.
I did all that was mentioned in the documentation, including enabling Android Device Verification API on my Google Cloud Platform while I was trying to have the signInWithPhoneNumber method work.
I kept on getting the above-mentioned error on Android 7.0 on a Samsung S6 and Huawei Nova 2i.
Below is the code I used:
import { View, Text } from 'react-native'
import React, { useState } from 'react'
import styles from './styles'
import { Button, TextInput } from 'react-native-paper'
import auth from '#react-native-firebase/auth';
function LoginScreen() {
const [emailID, setEmailID] = useState("");
const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState(null);
const [code, setCode] = useState('');
async function loginWithEmail (email, password) {
await auth()
.createUserWithEmailAndPassword('jane.doe#example.com', 'SuperSecretPassword!')
.then(() => {
console.log('User account created & signed in!');
})
.catch(error => {
if (error.code === 'auth/email-already-in-use') {
console.log('That email address is already in use!');
}
if (error.code === 'auth/invalid-email') {
console.log('That email address is invalid!');
}
console.error(error);
});
}
return (
<View style={styles.container}>
<View style={styles.textInputContainer}>
<TextInput mode="outlined"
label='Enter your email'
keyboardType="email-address"
value={emailID}
onChangeText={(e) => setEmailID(e)} />
<TextInput mode="outlined"
label='Enter your password'
secureTextEntry
value={password}
onChangeText={(e) => setPassword(e)} />
</View>
<View style={styles.buttonContainers}>
<Button mode="contained" style={styles.signUpButton} disabled={emailID.length > 5 && password.length > 6 ? false : true} onPress={() => loginWithEmail(emailID, password)}>Login</Button>
</View>
</View>
)
}
export default LoginScreen
Any help in pointing out where I went wrong would be of great help. Thank you
I have been trying for ages to make Sanity work with React Native and It's not working out, read multiple documentations, followed many tutorials but no luck.... What am i doing wrong?
Made a simple recreation here:
https://snack.expo.dev/#spts/smelly-candies
Please let me know what I'm doing wrong, or what I have to do to make it work
There are a few things wrong here, first I'll assume you meant Sanity and not Strapi:
Data isn't loading from Sanity because you need to enable CORS for the expo playground: see more details here
Make sure you set an apiVersion in sanity.js
There were a few issues with your React code which I've updated below, and should work once the CORS issue is resolved.
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import sanityClient from './sanity.js'
export default function App() {
const [stuff, setStuff] = useState([]);
useEffect(() => {
async function fetchData() {
const query = '*[_type == "post"] { title, content, emojiType }';
const data = await sanityClient.fetch(query);
setStuff(data)
}
fetchData()
}, [])
return (
<View>
<Text >
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Text>{JSON.stringify(stuff)}</Text>
</View>
);
}
My group and I are currently working on a mobile app using expo-cli and firebase as the backend. One of the requirements is we need to get users' screen time and record how frequently users press certain buttons. According to expo firebase documentation, it only supports limited Firebase Analysis. We were wondering what would be the best way to use Firebase Analytics with Expo to capture screen time and button pressed frequencies.
Screen Tracking
Screen tracking in React Native is different than in a native app since some navigation libraries run inside one Activity/Viewcontroller.
Assuming you are using react-native-navigation, which does have full native navigation support you can handle screen tracking like this.
import analytics from '#react-native-firebase/analytics';
import { Navigation } from 'react-native-navigation';
Navigation.events().registerComponentDidAppearListener(async ({ componentName, componentType }) => {
if (componentType === 'Component') {
await analytics().logScreenView({
screen_name: componentName,
screen_class: componentName,
});
}
});
Look here for the documentation
If you are using react-navigation you can still work around the lack of native screen support by hooking into the events that are provided.
import analytics from '#react-native-firebase/analytics';
import { NavigationContainer } from '#react-navigation/native';
const App = () => {
const routeNameRef = React.useRef();
const navigationRef = React.useRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef.current.getCurrentRoute().name;
}}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current.getCurrentRoute().name;
if (previousRouteName !== currentRouteName) {
await analytics().logScreenView({
screen_name: currentRouteName,
screen_class: currentRouteName,
});
}
routeNameRef.current = currentRouteName;
}}
>
...
</NavigationContainer>
);
};
export default App;
Here you can find a full example starter app.
Button Press Events
For logging press events there's a lot of documentation on the RNFirebase website.
A simple example to track a custom event that could be an onPress or anything would look like this:
import react, { useEffect } from 'react';
import { View, Button } from 'react-native';
import analytics from '#react-native-firebase/analytics';
function App() {
return (
<View>
<Button
title="Add To Basket"
onPress={async () =>
await analytics().logEvent('onPressAddToBasket', {
id: 3745092,
item: 'Your product name',
description: ['round neck', 'long sleeved'],
size: 'L',
wheneverYouWantToTrack: true,
})
}
/>
</View>
);
}
I am new to React Native, and I am trying to build an app.
The problem I am facing now, is creating map(objects) in documents of firebase firestore using firebase.firestore().... .add function.
I've managed to get simple string inputs to save(name, title and age - what user types in text input are successfully saved) but I didn't find a way to make it save to objects(named maps in firebase firestore) & also let user add infinite teammates input in frontend.
My goal is for the user to be able to input this:
Age, Name, Title(already solved) and Teammates
So the document in firebase should have (Age:Str, Name:Str, Title:Str, Teammates:NestedObject(map)>Teammate1(Object)>Name,Title
-- I attached pictures of UI, and database currentDoc, and neededDoc for better clarification
How should I go about it? Would love if you could help me. Thanks
Pics: UserUI: https://imgur.com/a/7CsPeQQ
actual Firestore Doc: https://imgur.com/a/0Up1i8S
needed Firestore Doc: https://imgur.com/a/OpzGl4x
EDIT /// SOLVED Firebase Map/Object uploading issue. However I still couldn't find a way to add n inputs to object.
import React, {useState} from 'react';
import { View, Image, TextInput, Button } from 'react-native';
import firebase from 'firebase';
import { user } from '../redux/reducers/user';
require("firebase/firestore") ;
require("firebase/firebase-storage") ;
export default function Save(props, {navigation}) {
const [age, setAge] = useState("");
const [name, setName] = useState("");
const [title, setTitle] = useState("");
// const [teammates, setTeammates] = useState("");
const savePostData = () => {
firebase.firestore()
.collection('posts')
.doc(firebase.auth().currentUser.uid)
.collection("userPosts")
.add({
teammates:{},
age,
name,
title,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
}).then((function () {
props.navigation.popToTop()
}))
}
return (
<View style={{flex:1}}>
<TextInput
placeholder = "Age"
onChangeText = {(age) => setAge(age) }
/>
<TextInput
placeholder = "Name"
onChangeText = {(name) => setName(name) }
/>
<TextInput
placeholder = "Title"
onChangeText = {(title) => setTitle(title) }
/>
<Button title="Post" onPress = {() => savePostData()} />
</View>
)
}
I am new using native react, I am developing a project that consists in showing the data of an Api in my project. I have seen tutorials and most, if not all, use the same Api:
But what I want is to be able to show the data of a local API that connects to a local BD as well, which is why I developed a Web API with ASP.Net, I was guided by this
Create a DB in SQL Server (which is the DB that I want to use for this project) and generate the API; the API works correctly, tested with POSTMAN.
Now the problem is that I want to use it in my project, and following the tutorial that is on the official page of React Native in the section does not work for me.
This is my code:
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
export default class FetchExample extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('http://192.168.2.19:53943/api/users')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.users,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.Name}, {item.Email}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
);
}
}
The error message that I get when I execute my project is THIS
JSON Parse Error: Unrecognized Token
What could I be doing wrong? I suspect that it may be the URL that happened to the FETCH, since it eliminates all of the render () and only leaves a showing a message and the same error keeps coming up. Thank you
hi you shuld add this code in Global.asax Application_Start() :
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
and add this code in WebApiConigg :
var json = config.Formatters.JsonFormatter;
json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
config.Formatters.Remove(config.Formatters.XmlFormatter);
rest visual stdio and run again project WebApi address
stop react-native emulator => cntrl+ c react-native-run-android