Here is a picture of the screen When I try to render my timestamp from firestore it shows an error
"Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}. If you meant to render a collection of children, use an array instead." How do I format my code to display my timestamp from the Firestore. I am able to create the timestamp and read it in my firestore dashboard.
import React, { Component } from "react";
import {
StyleSheet,
ScrollView,
ActivityIndicator,
View,
Text,
} from "react-native";
import { List, NativeBaseProvider } from "native-base";
import { ListItem } from "react-native-elements";
import colors from "../config/colors";
import firebase from "../../firebase";
class SearchEntry extends Component {
constructor() {
super();
this.firestoreRef = firebase.firestore().collection("RepairDocuments");
this.state = {
isLoading: true,
entryArr: [],
};
}
componentDidMount() {
this.unsubscribe = this.firestoreRef.onSnapshot(this.getCollection);
}
componentWillUnmount() {
this.unsubscribe();
}
getCollection = (querySnapshot) => {
const entryArr = [];
querySnapshot.forEach((res) => {
const { unit, datetime, bio } = res.data();
entryArr.push({
key: res.id,
res,
unit,
datetime,
bio,
});
});
this.setState({
entryArr,
isLoading: false,
});
};
render() {
if (this.state.isLoading) {
return (
<View style={styles.preloader}>
<ActivityIndicator size="large" color="#9E9E9E" />
</View>
);
}
return (
<ScrollView style={styles.container}>
{this.state.entryArr.map((res, i) => {
return (
<ListItem
key={i}
onPress={() => {
this.props.navigation.navigate("Details", {
userkey: res.key,
});
}}
bottomDivider
>
<ListItem.Content>
<ListItem.Title>{res.unit}</ListItem.Title>
<ListItem.Subtitle>{new Date(res.datetime?.unixTime * 1000).toLocaleDateString(
""
)}</ListItem.Subtitle>
</ListItem.Content>
<ListItem.Chevron color="black" />
</ListItem>
);
})}
</ScrollView>
);
}
}
Here is the code that enters the time stamp to my firestore.
import React, { Component, useState } from "react";
import {
ImageBackground,
View,
StyleSheet,
TextInput,
TouchableOpacity,
Image,
ActivityIndicator,
Text,
} from "react-native";
import LargeButton from" .. / components /LargeButton";
import colors from "../config/colors";
import firebase from "../../firebase";
import DatePicker from "#react-native- community/datetimepicker";
class CreateEntry extends Component {
constructor() {
super();
this.dbRef = firebase.firestore().collection("RepairDocuments");
this.state = {
unit: "",
datetime: new Date(),
bio: "",
isLoading: false,
};
}
onChange = (event, selectedDate) => {
const showFlag = Platform.OS === "ios";
this.setState({ show: showFlag });
this.inputValueUpdate(selectedDate, "datetime");
};
inputValueUpdate = (val, prop) => {
const state = this.state;
state[prop] = val;
this.setState(state);
};
storeEntry() {
if (this.state.unit === "") {
alert("Please fill out unit #");
} else {
this.setState({
isLoading: true,
});
this.dbRef
.add({
unit: this.state.unit,
datetime: this.state.datetime,
bio: this.state.bio,
})
.then((res) => {
this.setState({
unit: "",
datetime: new Date(),
bio: "",
isLoading: false,
});
this.props.navigation.navigate("Home");
})
.catch((err) => {
console.error("Error found: ", err);
this.setState({
isLoading: false,
});
});
}
}
render() {
if (this.state.isLoading) {
return (
<View style={styles.preloader}>
<ActivityIndicator size="large" color="#9E9E9E" />
</View>
);
showMode = (currentMode) => {
this.setState({ show: true });
this.setState({ mode: currentMode });
};
showDatepicker = () => {
this.showMode("date");
};
}
return (
<ImageBackground
style={styles.background}
source={require("../assets/Login.jpeg")}
>
<View style={styles.container}>
<View style={styles.header}>
<Image
style={styles.headerLogo}
source={require("../assets/WordLogo.jpeg")}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={"Enter Unit #"}
value={this.state.unit}
onChangeText={(val) => this.inputValueUpdate(val, "unit")}
/>
</View>
<View style={styles.inputGroup}>
<Text>Select Date:</Text>
<View>
<DatePicker
testID="dateTimePicker"
value={this.state.datetime}
display="default"
onChange={this.onChange}
dateFormat="dd/MM/yyyy h:mm aa"
/>
</View>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={"Enter Work Completed"}
value={this.state.bio}
onChangeText={(val) => this.inputValueUpdate(val, "bio")}
/>
</View>
<LargeButton
title="submit"
color="secondary"
onPress={() => this.storeEntry()}
/>
</View>
</ImageBackground>
);
}
}
Related
This is probably a dumb question, but I've been following some react native / expo tutorials on how to make a login screen with Firebase. The tutorial I followed also made a loading screen (using a loading state) that will display while Firebase is connecting. Unfortunately, the loading state never ends for me, and I don't know how to fix it.
Here is my Navigator.js file:
import React, { useReducer } from "react";
import { View, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { AuthContext } from '../contexts/UserContext';
import { firebase } from "../utils/FirebaseConfig";
import Login from "../screens/Login";
import Signup from "../screens/Signup";
import Home from "../screens/Home";
const Drawer = createDrawerNavigator();
const RootStack = createStackNavigator();
export default AppNavigation = (props) => {
const initialLoginState = {
isLoading: true,
user: null,
};
const loginReducer = (prevState, action) => {
switch (action.type) {
case 'LOGIN':
return {
...prevState,
user: action.user,
isLoading: false,
};
case 'LOGOUT':
return {
...prevState,
user: null,
isLoading: false,
};
case 'REGISTER':
return {
...prevState,
user: action.user,
isLoading: false,
};
}
};
const [loginState, dispatch] = useReducer(loginReducer, initialLoginState);
const authContext = React.useMemo(() => ({
signIn: async (email, password) => {
return firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(async (userCred) => {
dispatch({ type: 'LOGIN', user: userCred.user });
return true;
}).catch((error) => {
if (error.code === "auth/user-disabled") {
alert("User disabled!");
}
if (error.code === "auth/invalid-email") {
alert("That email address is invalid!");
}
if (error.code === "auth/user-not-found") {
alert("User not found, please sign up!");
}
if (error.code === "auth/wrong-password") {
alert("Wrong password!");
}
return false;
})
},
signOut: async () => {
return firebase.auth().signOut().then(async () => {
dispatch({ type: 'LOGOUT' });
});
},
signUp: (email, password) => {
return firebase.auth().createUserWithEmailAndPassword(email, password).then((userCred) => {
dispatch({ type: 'REGISTER', user: userCred.user });
}).catch((error) => {
if (error.code === "auth/email-already-in-use") {
alert("That email address is already in use!");
}
if (error.code === "auth/invalid-email") {
alert("That email address is invalid!");
}
if (error.code === "auth/operation-not-allowed") {
alert("Operation is not allowed!");
}
if (error.code === "auth/weak-password") {
alert("The password is too weak!");
}
return false;
})
}
}), []);
if (loginState.isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="grey" />
</View>
);
}
return (
<AuthContext.Provider value={authContext}>
<NavigationContainer>
{loginState.user !== null ? (
<Drawer.Navigator >
<Drawer.Screen name="Home" user={loginState.user} component={Home} />
</Drawer.Navigator>
) :
(
<RootStack.Navigator headerMode='none'>
<RootStack.Screen name="Login" component={Login} />
<RootStack.Screen name="Signup" component={Signup} />
</RootStack.Navigator>
)
}
</NavigationContainer>
</AuthContext.Provider>
)
}
Here is my Home.js File:
import React from 'react';
import { useContext } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { AuthContext } from "../contexts/UserContext";
function Home(props) {
const { signOut } = useContext(AuthContext);
return (
<View style={{ flex: 1 }}>
<Text>Welcome</Text>
<Text>Email: {props.user?.email}</Text>
<Text>uid: {props.user?.uid}</Text>
<Text>displayName: {props.user?.displayName}</Text>
<Text>photo: {props.user?.photoURL}</Text>
<TouchableOpacity onPress={() => signOut()} style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", width: "100%" }} >
<Text style={{ fontWeight: "bold", fontSize: 18 }}>Logout</Text>
</TouchableOpacity>
</View>
);
}
export default Home;
Here is the Login.js file:
import React, { useContext, useState } from 'react';
import { KeyboardAvoidingView, View, Text, TextInput } from 'react-native';
import { AuthContext } from "../contexts/UserContext";
function Login(props) {
const [data, setData] = useState({
email: "",
password: ""
})
const { signIn } = useContext(AuthContext);
const emailInputChange = (val) => {
setData({
...data,
email: val
})
}
const passwordChange = (val) => {
setData({
...data,
password: val
});
}
const LoginHandle = () => {
signIn(data.email, data.password)
}
return (
<KeyboardAvoidingView>
<View style={{ flex: 1 }}>
<Text>Email: </Text>
<View >
<TextInput
placeholder="Email"
autoCapitalize="none"
onChangeText={(val) => emailInputChange(val)}
/>
</View>
<Text>Password: </Text>
<View>
<TextInput
placeholder="Password"
autoCapitalize="none"
secureTextEntry={true}
onChangeText={(val) => passwordChange(val)}
/>
</View>
<TouchableOpacity onPress={() => LoginHandle()} style={{ width: "100%", height: 50, justifyContent: "center", alignItems: "center", borderRadius: 10 }}>
<Text style={{ color: "#FFF", fontSize: 18, fontWeight: "bold" }}>Login</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
export default Login;
And finally, the Signup.js file:
import React, { useContext, useState } from 'react';
import { KeyboardAvoidingView, View, Text, TextInput } from 'react-native';
import { AuthContext } from "../contexts/UserContext";
function Signup(props) {
const [data, setData] = useState({
email: "",
password: ""
})
const { signUp } = useContext(AuthContext);
const emailInputChange = (val) => {
setData({
...data,
email: val
})
}
const passwordChange = (val) => {
setData({
...data,
password: val
});
}
const SignupHandle = () => {
signUp(data.email, data.password)
}
return (
<KeyboardAvoidingView>
<View style={{ flex: 1 }}>
<Text>Email: </Text>
<View >
<TextInput
placeholder="Email"
autoCapitalize="none"
onChangeText={(val) => emailInputChange(val)}
/>
</View>
<Text>Password: </Text>
<View>
<TextInput
placeholder="Password"
autoCapitalize="none"
secureTextEntry={true}
onChangeText={(val) => passwordChange(val)}
/>
</View>
<TouchableOpacity onPress={() => SignupHandle()} style={{ width: "100%", height: 50, justifyContent: "center", alignItems: "center", borderRadius: 10 }}>
<Text style={{ color: "#FFF", fontSize: 18, fontWeight: "bold" }}>Signup</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
export default Signup;
when i run it in expo it says "can't find variable navigation" , I can't seem to figure out why navigation isn't working does anyone have any ideas? I've tried taking this.props away etc but that doesn't work either
'use strict'
import React, { Component } from 'react';
import {
Text,
TextInput,
TouchableHighlight,
StatusBar,
ListView,
FlatList,
View
} from 'react-native';
import firebaseApp from './firebaseConfig.js';
import styles from './styles.js';
class Rooms extends Component {
static navigationOptions = {
title: 'Rooms',
header: null
};
constructor(props) {
super(props);
var firebaseDB = firebaseApp.database();
this.roomsRef = firebaseDB.ref('rooms');
this.state = {
rooms: [],
newRoom: ''
}
}
componentDidMount() {
this.listenForRooms(this.roomsRef);
}
listenForRooms(roomsRef) {
roomsRef.on('value', (dataSnapshot) => {
var roomsFB = [];
dataSnapshot.forEach((child) => {
roomsFB.push({
name: child.val().name,
key: child.key
});
});
this.setState({ rooms: roomsFB });
});
}
addRoom() {
if (this.state.newRoom === '') {
return;
}
this.roomsRef.push({ name: this.state.newRoom });
this.setState({ newRoom: '' });
}
openMessages(room) {
this.props.navigation.navigate('Messages', {roomKey: room.key, roomName: room.name});
}
renderRow(item) {
return (
<TouchableHighlight style={styles.roomLi}
underlayColor="#fff"
onPress={() => this.openMessages(item)}
>
<Text style={styles.roomLiText}>{item.name}</Text>
</TouchableHighlight>
)
}
render() {
return (
<View style={styles.roomsContainer}>
<StatusBar barStyle="light-content"/>
<Text style={styles.roomsHeader}>Chatypus</Text>
<View style={styles.roomsInputContainer}>
<TextInput
style={styles.roomsInput}
placeholder={"New Room Name"}
onChangeText={(text) => this.setState({newRoom: text})}
value={this.state.newRoom}
/>
<TouchableHighlight style={styles.roomsNewButton}
underlayColor="#fff"
onPress={() => this.addRoom()}
>
<Text style={styles.roomsNewButtonText}>Create</Text>
</TouchableHighlight>
</View>
<View style={styles.roomsListContainer}>
<FlatList
data={this.state.rooms}
renderItem={({item}) => (this.renderRow(item)
)}
/>
</View>
</View>
);
}
}
export default Rooms;
if i change the language from my setting screen inside my app, it does not change the language for already opened routes in my application. the language change is only reflect on unopened routes. i used react-native-localize and i18n-js. Given below my code
index.js
import * as RNLocalize from 'react-native-localize';
import I18n from 'i18n-js';
import memoize from 'lodash.memoize';
import {I18nManager,
AsyncStorage} from 'react-native';
import en from './en';
import am from './am';
import or from './or';
import tg from './tg';
import sl from './sl';
const locales = RNLocalize.getLocales();
if (Array.isArray(locales)) {
I18n.locale = locales[0].languageTag;
}
I18n.fallbacks = true;
I18n.translations = {
default: en,
'en-US': en,
en,
am,
or,
tg,
sl,
};
export default I18n;
My SettingScreen where i can change the language is:
SettingScreen.js
const listLanguage = [
{key:'en', label:'En'}, {key:'am', label:'Am'} ,{key:'or', label: 'Or'}, {key:'tg', label:'TG'},]
export default class SettingsScreen extends React.Component {
constructor(props) {
super(props);
this.state = { visible: true ,
languageSelected: 'en'
};
}
backToMain() {
this.props.navigation.navigate('LocationTrackingScreen', {});
}
handleBackPress = () => {
this.props.navigation.navigate('LocationTrackingScreen', {});
return true;
};
hideSpinner() {
this.setState({ visible: false });
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
onChangeLanguage(languageSelected){
this.setState({
languageSelected
})
I18n.locale = languageSelected
}
render() {
const {languageSelected} = this.state
return (
<SafeAreaView style={styles.container}>
<View style={styles.headerContainer}>
<TouchableOpacity
style={styles.backArrowTouchable}
onPress={() => this.backToMain()}>
<Image style={styles.backArrow} source={backArrow} />
</TouchableOpacity>
<Text style={styles.headerTitle}>{I18n.t('setting.setting_title')}</Text>
</View>
<View style={styles.containerLangSelect}>
<Text style={styles.sectionDescription}>{I18n.t('setting.select_language')}</Text>
</View>
<View style={styles.containerDropdown}>
<DropdownLanguage language={languageSelected} onChangeLanguage={this.onChangeLanguage.bind(this)}></DropdownLanguage>
</View>
</SafeAreaView>
);
}
}
class DropdownLanguage extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<View style={styles.dropdownLanguage}>
{/* <Text style={{width:10,}}>{I18n.t('setting.select_language')}: </Text> */}
<Picker
mode="dropdown"
iosHeader={''}
style={{ width: width,
}}
selectedValue={this.props.language}
onValueChange={this.props.onChangeLanguage.bind(this)}
>
{listLanguage.map((languageItem, i) => {
return <Picker.Item key={i} value={languageItem.key} label= {languageItem.label} />
})}
</Picker>
</View>
)
}
}
I am Using FireBase as a Database for fetching data in a react-native app using Redux. I want to Show an Activity Indicator until the data is been fetched.
Here is my code Redux :
export function getHome() {
const request = axios({
method: "GET",
url: `${FIREBASEURL}/home.json`
})
.then(response => {
const articles = [];
for (let key in response.data) {
articles.push({
...response.data[key],
id: key
});
}
return articles;
})
.catch(e => {
return false;
});
return {
type: GET_HOME,
payload: request
};
}
Here is my React Native code where data will be shown:
import React, { Component } from "react";
import {
StyleSheet,
View,
Text,
ScrollView,
ActivityIndicator,
TouchableWithoutFeedback,
Image
} from "react-native";
import { connect } from "react-redux";
import { getHome } from "../store/actions/home_actions";
import DemoScreen from "./rn-sound/demo";
class HomeScreen extends Component {
componentDidMount() {
this.props.dispatch(getHome());
}
renderArticle = imgs =>
imgs.articles
? imgs.articles.map((item, i) => (
<TouchableWithoutFeedback
onPress={() => this.props.navigation.navigate(`${item.navigate}`)}
key={i}
>
<View>
<View>
<Image
style={{
height: 220,
width: "100%",
justifyContent: "space-around"
}}
source={{ uri: `${item.image}` }}
resizeMode="cover"
/>
</View>
<View>
<Text >{item.name}</Text>
</View>
<View>
<Text }>{item.tagline}</Text>
</View>
</View>
</TouchableWithoutFeedback>
))
: null;
render() {
return (
<ScrollView}>
{this.renderArticle(this.props.Home)}
</ScrollView>
);
}
}
how to show Activity Indiactor Untill my data from firebase is been Fetched
You can use loading variable in state. You have set false it before fetch command after that set to true. You can see below sample.
constructor(props) {
super(props);
this.state = {
loading: false
};
}
componentDidMount = () => {
this.setState({
loading: true
})
this.props.dispatch(getHome()).then(response=>{
this.setState({
loading: false
})
})
}
render() {
return (
<ScrollView}>
{this.state.loading == false ? (
<View>
{this.renderArticle(this.props.Home)}
</View>
) : (
<ActivityIndicator size="large" />
)}
</ScrollView>
);
}
<--it shows data.source error-->
import React, { Component } from "react";
import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from "react-native";
export default class Project extends Component {
constructor(props)
{
super(props);
this.state = {
isLoading: true,
PickerValueHolder : ""
}; }
componentDidMount() {
return fetch("https://facebook.github.io/react-native/movies.json")
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});}
GetPickerSelectedItemValue=()=>{
Alert.alert(this.state.PickerValueHolder);
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>`help needed`
);
}
return (
<View style={styles.MainContainer}>
<Picker
selectedValue={this.state.PickerValueHolder}
onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
{ this.state.dataSource.map((item, key)=>(
<Picker.Item label={item.title} value={item.title} key={key} />)
)}
</Picker>
<Button title="Click Here To Get Picker Selected Item Value" onPress={ this.GetPickerSelectedItemValue } />
</View>
);}}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: "center",
flex:1,
margin: 10
}});
import React, { Component } from "react";
import { ListView, Text, StyleSheet, View, ActivityIndicator, Button, Alert} from "react-native";
export default class Project extends Component {
constructor(props)
{
super(props);
this.state = {
isLoading: true,
PickerValueHolder : "",
language: ''
};
}
GetPickerSelectedItemValue(value: string) {
Alert.alert(value);
this.setState({
selected: value
});
}
GetItem (title) {
Alert.alert(title);
}
componentDidMount() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson['movies']),
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{flex:1, flexDirection: 'row'}}>
<Text onPress={this.GetItem.bind(this, rowData.title)} style={styles.textViewContainer} >{rowData.title}</Text>
</View>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: "center",
flex:1,
margin: 10
}
});