Testing React Native with Jest - Doesn't test 'onPress' and 'onChangeText' - firebase

I'm testing a component called ForgotPasswordComponent in React Native with Jest. The code for the component is seen here:
import { StyleSheet, View, ToastAndroid, Dimensions } from 'react-native'
import React, {useState} from 'react'
import {Button, Headline, Text, TextInput} from 'react-native-paper';
import { getAuth, sendPasswordResetEmail } from "firebase/auth";
import { useNavigation } from '#react-navigation/native';
import { ScaledSheet } from 'react-native-size-matters';
const {height, width} = Dimensions.get('window')
export default function ForgotPasswordComponent() {
const [email, setEmail] = useState('');
const auth = getAuth();
const navigation = useNavigation();
const forgotPassword = () => {
sendPasswordResetEmail(auth, email)
.then(() => {
ToastAndroid.show('Reset password mail sent successfully!', ToastAndroid.LONG);
})
.catch(() => {
ToastAndroid.show('Error: Please check your entered e-mail!', ToastAndroid.LONG)
});
}
return (
<View style={styles.container}>
<View>
<Button style={styles.buttonBack} uppercase={false} onPress={() => {navigation.navigate("Login")}}>
<Text style={styles.buttonTextGoBack}>Go back</Text>
</Button>
</View>
<View>
<Headline style={styles.headline}>Forgot your password? No problem!</Headline>
</View>
<View>
<Text style={styles.inputText}>Email:</Text>
<TextInput style={styles.input} placeholder="Enter your email" value={email} onChangeText={text => setEmail(text)}></TextInput>
</View>
<View>
<Button style={styles.buttonResetPassword} mode="contained" uppercase={false} onPress={forgotPassword}>
<Text style={styles.buttonTextResetPassword}>Reset password</Text>
</Button>
</View>
</View>
)
}
const styles = ScaledSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginBottom: '200#s'
},
headline: {
fontSize: '18#s',
marginTop: '60#s',
padding: '20#s',
},
inputText: {
paddingLeft: '14#s',
paddingTop: '6#s',
fontSize: '14#s'
},
input: {
padding: '10#s',
margin: '15#s',
width: width * 0.8,
height: height * 0.03,
fontSize: '14#s'
},
buttonResetPassword: {
width: width * 0.5,
},
buttonBack: {
paddingRight: '260#s',
width: width * 1.1,
},
buttonTextResetPassword: {
color: 'white',
fontSize: '14#s'
},
buttonTextGoBack: {
fontSize: '14#s'
}
})
As it is seen, it uses two functions from Firebase and the component have very little functionality.
Here is the testcases that I have wrote so far:
import React from 'react';
import renderer from 'react-test-renderer'
import ForgotPasswordComponent from '../components/ForgotPassword/ForgotPasswordComponent';
import { NavigationContainer } from '#react-navigation/native';
import { fireEvent, render } from '#testing-library/react-native';
import { Button, TextInput } from 'react-native-paper';
jest.useFakeTimers()
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
const mockGetAuth = jest.fn()
const mockSendPassword = jest.fn(() => {
return Promise.resolve(true)
})
jest.mock('firebase/auth', () => {
return {
getAuth: () => mockGetAuth,
sendPasswordResetEmail: () => mockSendPassword
}
})
//Testing that navigation is working
describe("Navigation working", () => {
it("calls useNavigation and navigates", () => {
const mockedNavigate = jest.fn();
jest.mock('#react-navigation/native', () => (
{ useNavigation: () => ({ navigate: mockedNavigate }) }));
const onPress = jest.fn(mockedNavigate);
const {getByText} = render(
<Button onPress={onPress}>Go Back</Button>,
);
fireEvent.press(getByText('Go Back'));
expect(mockedNavigate).toBeCalledTimes(1);
})
})
//Testing buttons and inputfield are working
describe('Buttons and input on press working', () => {
it('Go back onpress is called', () => {
const onPress = jest.fn();
const {getByText} = render(
<Button onPress={onPress}>Go Back</Button>,
);
fireEvent.press(getByText('Go Back'));
expect(onPress).toBeCalledTimes(1);
});
it('Reset onpress is called', () => {
const onPress = jest.fn();
const {getByText} = render(
<Button onPress={onPress}>Reset password</Button>,
)
fireEvent.press(getByText('Reset password'));
expect(onPress).toBeCalledTimes(1);
})
it('Email onChange is called', () => {
const onChangeTextMock = jest.fn();
const {getByPlaceholderText} = render(
<TextInput placeholder="Enter your email" onChangeText={onChangeTextMock}/>
);
fireEvent.changeText(getByPlaceholderText("Enter your email"), "test#gmail.com");
expect(onChangeTextMock).toBeCalled();
})
});
//Snapshot testing
test('renders forgotPasswordComponent correctly 1', () => {
const tree = renderer.create(
<NavigationContainer>
<ForgotPasswordComponent/>
</NavigationContainer>)
.toJSON();
expect(tree).toMatchSnapshot();
});
All the testcases runs succesfully, but when I inspect the code coverage I don't understand why my onPress function on line 30 and onChangeText function on line 39 are red. It is like they are not getting tested at all despite I have made testcases for them.
Besides are there any solution of how I can test the Firebase function sendPasswordResetEmail is called when the button is pressed and it shows the succesfully toast-message?

Related

How do I search for titles in Cloud Firestore using the SearchBar from react-native-elements?

I imported a SearchBar from react-native-elements and I want to be able to search my articles by title. So the field I should be able to pull and search from Cloud Firestore is called 'title'. I'm not sure how to do that.
import React, { Component } from "react";
import { StyleSheet, View, FlatList } from "react-native";
import { AppleCard } from "react-native-apple-card-views";
import firebase from "../../Firebase";
import { SearchBar } from 'react-native-elements';
import { ScrollView } from "react-native-gesture-handler";
export default class Discover extends Component {
constructor(props) {
super();
this.ref = firebase.firestore().collection("articles").where("publish", "==", true);
this.unsubscribe = null;
this.state = {
articles: [],
search: '',
};
}
onCollectionUpdate = (querySnapshot) => {
const articles = [];
querySnapshot.forEach((doc) => {
const { title, subtitle, imageUrlPath } = doc.data();
articles.push({
key: doc.id,
doc, // DocumentSnapshot
title,
subtitle,
imageUrlPath,
});
});
this.setState({
articles,
});
};
componentDidMount() {
this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
}
updateSearch = (search) => {
this.setState({ search });
};
renderItem = ({ item }) => {
return (
<View>
<View style={styles.card}>
<AppleCard
largeTitle={item.title}
smallTitle=""
footnoteText={item.subtitle}
resizeMode="cover"
source={{uri:item.imageUrlPath}}
onPress={() => {
this.props.navigation.navigate("Content", {
articlekey: `${JSON.stringify(item.key)}`,
});
}}
/>
</View>
</View>
);
};
render() {
const { search } = this.state;
return (
<ScrollView>
<SearchBar
placeholder="Search here..."
onChangeText={this.updateSearch}
value={search}
platform='ios'
/>
<View style={styles.discover}>
<FlatList data={this.state.articles} renderItem={this.renderItem} />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
discover: {
flex: 1,
backgroundColor: "#FBFCFC",
alignItems: "center",
justifyContent: "center",
},
card: {
padding: 15,
},
});

How to Use Multiple Array to store state values With Redux in React Native

Here I have use Redux to manage state value but is not working..
And i have two arrays to hold the state values but it is not showing any record i don't know why it is not working..
notesReducer.js
import remove from 'lodash.remove'
// Action Types
export const ADD_NOTE = 'ADD_NOTE'
export const DELETE_NOTE = 'DELETE_NOTE'
export const ADD_NUMBER = 'ADD_NUMBER'
export const DELETE_NUMBER = 'DELETE_NUMBER'
// Action Creators
let noteID = 0
let numberID = 0
export function addnote(note) {
return {
type: ADD_NOTE,
id: noteID++,
note
}
}
export function deletenote(id) {
return {
type: DELETE_NOTE,
payload: id
}
}
export function addnumber(number) {
return {
type: ADD_NUMBER,
id: numberID++,
number
}
}
export function deletenumber(id) {
return {
type: DELETE_NUMBER,
payload: id
}
}
// reducer
const INITIAL_STATE = {
note: [], // for holds notes
number: [] // for holds numbers
};
function notesReducer(state = INITIAL_STATE, action) {
switch (action.type) {
case ADD_NOTE:
return {
...state,
note: [
...state.note,
{
id: action.id,
note: action.note
}
]
};
case DELETE_NOTE:
const note = remove(state.note, obj => obj.id != action.payload);
return {...state, note};
case ADD_NUMBER:
return {
...state,
number: [
...state.number,
{
id: action.id,
number: action.number
}
]
};
case DELETE_NUMBER:
const number = remove(state.number, obj => obj.id != action.payload);
return {...state, number}
default:
return state
}
}
export default notesReducer
And single Store
store.js
import { createStore } from 'redux'
import notesReducer from './notesApp'
const store = createStore(notesReducer)
export default store
ViewNotes.js
import React from 'react'
import { Button, StyleSheet, View, FlatList } from 'react-native'
import { Text, FAB, List } from 'react-native-paper'
import { useSelector, useDispatch } from 'react-redux'
import { addnote, deletenote } from '../redux/notesApp'
import { Ionicons } from "react-native-vector-icons";
import Header from '../components/Header'
function ViewNotes({ navigation }) {
const notes = useSelector(state => state)
const dispatch = useDispatch()
const addNote = note => dispatch(addnote(note))
const deleteNote = id => dispatch(deletenote(id))
return (
<>
<Header titleText='White List' />
<View style={styles.container}>
<Button title="Go back" onPress={() => navigation.goBack()} />
{notes.length === 0 ? (
<View style={styles.titleContainer}>
<Text style={styles.title}>You do not have any notes</Text>
</View>
) : (
<FlatList
data={notes}
renderItem={({ item }) => (
<List.Item
title={item.note.noteTitle}
description={item.note.noteValue}
right={props => <List.Icon {...props} icon="close" />}
descriptionNumberOfLines={1}
titleStyle={styles.listTitle}
onPress={() => deleteNote(item.id)}
/>
)}
keyExtractor={item => item.id.toString()}
/>
)}
<FAB
style={styles.fab}
small
icon='plus'
label='Add new number'
onPress={() =>
navigation.navigate('AddNotes', {
addNote
})
}
/>
</View>
</>
)
}
ViewNotes.navigationOptions = {
title : 'Always Allows Calls'
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingHorizontal: 10,
paddingVertical: 20
},
titleContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1
},
title: {
fontSize: 20
},
fab: {
position: 'absolute',
margin: 20,
right: 0,
bottom: 10
},
listTitle: {
fontSize: 20
}
})
export default ViewNotes
AddNote.js
import React, { useState } from 'react'
import { View, StyleSheet } from 'react-native'
import { IconButton, TextInput, FAB } from 'react-native-paper'
import Header from '../components/Header'
function AddNote({ navigation }) {
const [noteTitle, setNoteTitle] = useState('')
const [noteValue, setNoteValue] = useState('')
function onSaveNote() {
navigation.state.params.addNote({ noteTitle, noteValue })
navigation.goBack()
}
return (
<>
<Header titleText='Add a new number' />
<IconButton
icon='close'
size={25}
color='white'
onPress={() => navigation.goBack()}
style={styles.iconButton}
/>
<View style={styles.container}>
<TextInput
label='Add Title Here'
value={noteTitle}
mode='outlined'
onChangeText={setNoteTitle}
style={styles.title}
/>
<TextInput
label='Add Note Here'
value={noteValue}
onChangeText={setNoteValue}
mode='flat'
multiline={true}
style={styles.text}
scrollEnabled={true}
returnKeyType='done'
blurOnSubmit={true}
/>
<FAB
style={styles.fab}
small
icon='check'
disabled={noteTitle == '' ? true : false}
onPress={() => onSaveNote()}
/>
</View>
</>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingHorizontal: 20,
paddingVertical: 20
},
iconButton: {
backgroundColor: 'rgba(46, 113, 102, 0.8)',
position: 'absolute',
right: 0,
top: 40,
margin: 10
},
title: {
fontSize: 24,
marginBottom: 20
},
text: {
height: 300,
fontSize: 16
},
fab: {
position: 'absolute',
margin: 20,
right: 0,
bottom: 0
}
})
export default AddNote
It is not Showing any record So How i fixed it..
Please Help me..
Change useSelector(state => state) to :
useSelector(state => state.note)
Because your store is like {note: [], number: []}

React Native. How to show screens according to the User Authentication status

I'm developing my first ever React Native App. I have created Login/SignUp screen and connect these with Firebase for Authentication. As well as i have some screen containing Drawers. I want that if the user is Not Authenticated. Login/Signup screen should show otherwise HomeScreen(having many drawers) will show. For this i did some checks in MainRouteComponent but its not working
I am uploading my Code of all the related Components as well as some redux code i have used here. I know it will take time to go through that much code but i tried a lot and i am struggling now. Hope many of you will help. :)
Here is my code:-
App.js
import React from 'react';
import Main from './components/MainComponent';
import MainRoute from './components/MainRouteComponent'
import { Provider } from 'react-redux';
import { ConfigureStore } from './redux/configureStore';
import { PersistGate } from 'redux-persist/es/integration/react'
import { Loading } from './components/LoadingComponent';
const { persistor, store } = ConfigureStore();
export default App = () =>{
return (
<Provider store={store}>
<PersistGate
loading={<Loading />}
persistor={persistor}>
<MainRoute/>
</PersistGate>
</Provider>
);
}
MainRouteComponent.js
import React, { useState } from 'react';
import Main from './MainComponent';
import Root from './RootComponent';
import { auth } from '../firebase/firebase';
const AuthContext = React.createContext();
const MainRoute = () => {
const user = auth.currentUser
console.log("User", user)
console.log("Auth", isAuth)
return(
{(user == null) ?
<Root />
:
<Main />
}
)
}
export default MainRoute;
RootComponent.js
import React, {Component} from 'react';
import { createStackNavigator } from 'react-navigation';
import * as Animatable from 'react-native-animatable';
import SplashScreen from './SplashScreen';
import Login from './LoginComponent';
import Register from './RegistrationComponent';
const RootStack = createStackNavigator({
SplashScreen: { screen: SplashScreen,
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitle: "Welcome Foodies",
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff",
alignItems: 'center'
}
})
},
LoginComponent: {
screen: Login,
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitle: "Login",
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff",
alignItems: 'center'
}
})
},
Register: {
screen: Register,
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitle: "Sign Up",
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff",
alignItems: 'center'
}
})
},
},
{
initialRouteName: 'SplashScreen',
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: "#512DA8"
},
headerTintColor: '#fff',
headerTitleStyle: {
color: "#fff"
}
})
}
);
class Root extends Component {
render() {
return (
<RootStack />
)
}
}
export default Root;
LoginComponent.js
import React, { Component } from 'react';
import { View, StyleSheet, Text, ScrollView, Image } from 'react-native';
import { Input, CheckBox, Button, Icon } from 'react-native-elements';
import * as SecureStore from 'expo-secure-store';
import { loginUser} from '../redux/ActionCreators';
import { connect } from 'react-redux';
const mapStateToProps = state => {
return {
auth: state.AUTH
}
}
const mapDispatchToProps = dispatch => {
return {
loginUser: (creds) => dispatch(loginUser(creds))
}
}
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
remember: false
}
}
componentDidMount() {
SecureStore.getItemAsync('userinfo')
.then((userdata) => {
let userinfo = JSON.parse(userdata);
if (userinfo) {
this.setState({email: userinfo.email});
this.setState({password: userinfo.password});
this.setState({remember: true})
}
})
}
static navigationOptions = {
title: 'Login',
tabBarIcon: ({ tintColor }) => (
<Icon
name='sign-in'
type='font-awesome'
size={24}
iconStyle={{ color: tintColor }}
/>
)
};
handleLogin() {
this.props.loginUser({email: this.state.email, password: this.state.password});
//event.preventDefault();
if (this.state.remember)
SecureStore.setItemAsync('userinfo', JSON.stringify({email: this.state.email, password: this.state.password}))
.catch((error) => console.log('Could not save user info', error));
else
SecureStore.deleteItemAsync('userinfo')
.catch((error) => console.log('Could not delete user info', error));
this.setState({
email: '',
password: '',
remember: false
})
this.props.navigation.navigate('Home')
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Input
placeholder="Email"
leftIcon={{ type: 'font-awesome', name: 'envelope-o' }}
onChangeText={(email) => this.setState({email})}
value={this.state.email}
containerStyle={styles.formInput}
/>
<Input
placeholder="Password"
leftIcon={{ type: 'font-awesome', name: 'key' }}
onChangeText={(password) => this.setState({password})}
value={this.state.password}
containerStyle={styles.formInput}
/>
<CheckBox title="Remember Me"
center
checked={this.state.remember}
onPress={() => this.setState({remember: !this.state.remember})}
containerStyle={styles.formCheckbox}
/>
<View style={styles.formButton}>
<Button
onPress={() => this.handleLogin()}
title="Login"
icon={
<Icon
name='sign-in'
type='font-awesome'
size={24}
color= 'white'
/>
}
buttonStyle={{
backgroundColor: "#512DA8"
}}
/>
</View>
<View style={styles.formButton}>
<Button
onPress={() => navigate('Register')}
title="Register"
clear
icon={
<Icon
name='user-plus'
type='font-awesome'
size={24}
color= 'blue'
/>
}
titleStyle={{
color: "blue"
}}
buttonStyle={{
backgroundColor: "transparent"
}}
/>
</View>
</View>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);
ActionCreator.js
import * as ActionTypes from './ActionTypes';
import { auth, firestore, fireauth, firebasestore } from '../firebase/firebase';
export const requestLogin = () => {
return {
type: ActionTypes.LOGIN_REQUEST
}
}
export const receiveLogin = (user) => {
return {
type: ActionTypes.LOGIN_SUCCESS,
user
}
}
export const loginError = (message) => {
return {
type: ActionTypes.LOGIN_FAILURE,
message
}
}
export const loginUser = (creds) => (dispatch) => {
// We dispatch requestLogin to kickoff the call to the API
dispatch(requestLogin(creds))
return auth.signInWithEmailAndPassword(creds.email, creds.password)
.then(() => {
var user = auth.currentUser;
dispatch(fetchFavorites());
dispatch(receiveLogin(user));
})
.then(response => { console.log('Login Successful', response); alert('Thank you for login!'); })
.catch(error => {console.log('Error', error); alert(error)})
.catch(error => dispatch(loginError(error.message)))
};
I also have Login Reducer as auth.js as i thought this can help in checking authentication to show screen accordingly.
auth.js
import * as ActionTypes from './ActionTypes';
export const Auth = (state = {
isLoading: false,
isAuthenticated: false,
user: null,
errMess: null
}, action) => {
switch (action.type) {
case ActionTypes.LOGIN_REQUEST:
return {...state,
isLoading: true,
isAuthenticated: false,
};
case ActionTypes.LOGIN_SUCCESS:
return {...state,
isLoading: false,
isAuthenticated: true,
errMess: '',
user: action.user
};
case ActionTypes.LOGIN_FAILURE:
return {...state,
isLoading: false,
isAuthenticated: false,
errMess: action.message
};
case ActionTypes.LOGOUT_REQUEST:
return {...state,
isLoading: true,
isAuthenticated: true
};
case ActionTypes.LOGOUT_SUCCESS:
return {...state,
isLoading: false,
isAuthenticated: false,
token: '',
user: null
};
default:
return state
}
}
Make separate routing for the stack screens which you don't want to be shown ! Try to make 2 stacks!

getting lat/long coordinates from firebase/firestore collection

im relative new to react native and firebase and it would be awesome if anyone could help me with this problem. currently when im adding new posts to my firebase collection i display all post with a flatlist and it works fine. but is it possible to get only the currentLatitude and currentLongitude for my markers? my target is to generate a new marker for each post.
Events = []
this.firestore.collection("Events").get().then(snapshot => {
snapshot.forEach(doc => {
Events.push(doc.data())
})
})
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<MapView
provider={PROVIDER_GOOGLE}
mapType='hybrid'
showsUserLocation style={{flex: 1}}>
<MapView.Marker
coordinate={{latitude: //currentLatitude,
longitude: //currntLongitude}}
title={("Test")}
description={("Test")}
/>
</MapView>
</View>
</SafeAreaView>
);
}
}
#DevAS thanks for your patience.. this was made from 3 different .js files.. but I don't now how to get it just into the map.js.
The final result should look something like this:
enter image description here
Everything except for the lat/lng cords are supposed to be in the callout-window.
Item.js:
import { Ionicons } from '#expo/vector-icons';
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import Fire from '../screens/Fire'
const profileImageSize = 36;
const padding = 12;
export default class Item extends React.Component {
state = {
user: {}
};
componentDidMount() {
const user = this.props.uid || Fire.shared.uid;
this.unsubscribe = Fire.shared.firestore
.collection("users")
.doc(user)
.onSnapshot(doc => {
this.setState({ user: doc.data() });
});
if (!this.props.imageWidth) {
// Get the size of the web image
Image.getSize(this.props.image, (width, height) => {
this.setState({ width, height });
});
}
}
componentWillUnmount() {
this.unsubscribe();
}
render() {
const { title, address, name, imageWidth, imageHeight, image, currentLatitude, currentLongitude } = this.props;
// Reduce the name to something
const imgW = imageWidth || this.state.width;
const imgH = imageHeight || this.state.height;
const aspect = imgW / imgH || 1;
return (
<View>
<Header image={{ uri: this.state.user.avatar }} name={this.state.user.name} />
<Image
resizeMode="contain"
style={{
backgroundColor: "#D8D8D8",
width: "100%",
aspectRatio: aspect
}}
source={{ uri: image }}
/>
<Metadata
name={this.state.user.name}
address={address}
title={title}
currentLongitude={currentLongitude}
currentLatitude={currentLatitude}
/>
</View>
);
}
}
const Metadata = ({ name, address, title, currentLongitude, currentLatitude}) => (
<View style={styles.padding}>
<IconBar />
<Text style={styles.text}>{name}</Text>
<Text style={styles.subtitle}>{address}</Text>
<Text style={styles.subtitle}>{title}</Text>
<Text style={styles.subtitle}>Lat: {currentLatitude}</Text>
<Text style={styles.subtitle}>Lng: {currentLongitude}</Text>
</View>
);
const Header = ({ name, image }) => (
<View style={[styles.row, styles.padding]}>
<View style={styles.row}>
<Image style={styles.avatar} source={image} />
<Text style={styles.text}>{name}</Text>
</View>
<Icon name="ios-more" />
</View>
);
const Icon = ({ name }) => (
<Ionicons style={{ marginRight: 8 }} name={name} size={26} color="black" />
);
const IconBar = () => (
<View style={styles.row}>
<View style={styles.row}>
<Icon name="ios-heart-empty" />
<Icon name="ios-chatbubbles" />
<Icon name="ios-send"/>
</View>
<Icon name="ios-bookmark" />
</View>
);
const styles = StyleSheet.create({
text: { fontWeight: "600" },
subtitle: {
opacity: 0.8
},
row: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
padding: {
padding
},
avatar: {
aspectRatio: 1,
backgroundColor: "#D8D8D8",
borderWidth: StyleSheet.hairlineWidth,
borderColor: "#979797",
borderRadius: profileImageSize / 2,
width: profileImageSize,
height: profileImageSize,
resizeMode: "cover",
marginRight: padding
}
});
List.js
import React from 'react';
import { FlatList } from 'react-native';
import Footer from './Footer';
import Item from './Item';
class List extends React.Component {
renderItem = ({ item }) => <Item {...item} />;
keyExtractor = item => item.key;
render() {
const { onPressFooter, ...props } = this.props;
return (
<FlatList
keyExtractor={this.keyExtractor}
ListFooterComponent={footerProps => (
<Footer {...footerProps} onPress={onPressFooter} />
)}
renderItem={this.renderItem}
{...props}
/>
);
}
}
export default List;
FeedScreen.js
import firebase from "firebase";
import React, { Component } from "react";
import { LayoutAnimation, RefreshControl } from "react-native";
import List from "../components/List";
import Fire from "./Fire";
// Set the default number of images to load for each pagination.
const PAGE_SIZE = 5;
console.disableYellowBox = true;
export default class FeedScreen extends Component {
state = {
loading: false,
data: {}
};
componentDidMount() {
// Check if we are signed in...
if (Fire.shared.uid) {
// If we are, then we can get the first 5 posts
this.makeRemoteRequest();
} else {
// If we aren't then we should just start observing changes. This will be called when the user signs in
firebase.auth().onAuthStateChanged(user => {
if (user) {
this.makeRemoteRequest();
}
});
}
}
// Append the item to our states `data` prop
addPosts = posts => {
this.setState(previousState => {
let data = {
...previousState.data,
...posts
};
return {
data,
// Sort the data by timestamp
posts: Object.values(data).sort((a, b) => a.timestamp < b.timestamp)
};
});
};
// Call our database and ask for a subset of the user posts
makeRemoteRequest = async lastKey => {
// If we are currently getting posts, then bail out..
if (this.state.loading) {
return;
}
this.setState({ loading: true });
// The data prop will be an array of posts, the cursor will be used for pagination.
const { data, cursor } = await Fire.shared.getPaged({
size: PAGE_SIZE,
start: lastKey
});
this.lastKnownKey = cursor;
// Iteratively add posts
let posts = {};
for (let child of data) {
posts[child.key] = child;
}
this.addPosts(posts);
// Finish loading, this will stop the refreshing animation.
this.setState({ loading: false });
};
// Because we want to get the most recent items, don't pass the cursor back.
// This will make the data base pull the most recent items.
_onRefresh = () => this.makeRemoteRequest();
// If we press the "Load More..." footer then get the next page of posts
onPressFooter = () => this.makeRemoteRequest(this.lastKnownKey);
render() {
// Let's make everything purrty by calling this method which animates layout changes.
LayoutAnimation.easeInEaseOut();
return (
<List
refreshControl={
<RefreshControl
refreshing={this.state.loading}
onRefresh={this._onRefresh}
/>
}
onPressFooter={this.onPressFooter}
data={this.state.posts}
/>
);
}
}

How to debug "undefined is not an object" when navigating between screens

I'm trying when I press Login button to go to Drawer screen which contains all my other screens but I'm getting the following error:
TypeError: undefined is not an object (evaluating
'this.props.navigation.navigate')
Here is my DrawerScreen:
import React, {Component} from 'react';
import { Button, View, Text, Dimensions, ImageBackground } from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator, DrawerItems } from 'react-navigation';
import HomeScreen from './HomeScreen';
import AboutScreen from './AboutScreen';
import Count from './CountScreen';
const DrawerContent = (props) => (
<View>
<ImageBackground
source={{uri:'https://cdn.pixabay.com/photo/2017/12/13/07/15/natural-3016177_960_720.jpg'}}
style={{}}
imageStyle= {{opacity: 0.7}}
>
<View
style={{
//backgroundColor: '#73a2ef',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ color: 'black', fontSize: 40, fontWeight: 'bold' }}>
Menu
</Text>
</View>
</ImageBackground>
<DrawerItems {...props} />
</View>
)
const WIDTF = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: WIDTF*0.80,
drawertType: 'back',
}
const Drawer = createDrawerNavigator ({
Home: {
screen: HomeScreen
},
About: {
screen: AboutScreen
},
Count: {
screen: Count
},
},
{
drawerBackgroundColor: '#c7d1a7',
contentComponent: DrawerContent,
contentOptions: {
activeTintColor: 'blue',
style: {
flex: 1,
paddingTop: 15,
}
}},
DrawerConfig
);
const AppContainer = createAppContainer(Drawer);
export default AppContainer;
And here is my LogInScreen:
import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Form, Input, Item, Button, Label, Drawer} from 'native-base';
import {StyleSheet, Text} from 'react-native';
import AppContainer from './DrawerNavigatorNew';
const firebaseConfig = {
apiKey:
authDomain:
databaseURL:
projectId:
storageBucket:
};
firebase.initializeApp(firebaseConfig);
export default class LoginScreen extends React.Component {
constructor (props) {
super(props)
this.state =({
email:'',
password:'',
})
}
signUpUser = (email, password) => {
try {
if(this.state.password.length <6)
{
alert("Please enter atleast 6 characters")
return;
}
firebase.auth().createUserWithEmailAndPassword(email, password)
}
catch (error){
console.log(error.toString())
}
}
loginUser =(email, password) => {
try{
firebase.auth().signInWithEmailAndPassword(email, password).then(function(user){
console.log(user)
})
}
catch (error) {
console.log(error.toString())
}
}
render() {
const {navigate} = this.props.navigation;
return (
<Container style={styles.container}>
<Form>
<Item floatingLabel>
<Label> Email </Label>
<Input
name='email'
autoCorrect={false}
autoCapitalize='none'
onChangeText={(email)=> this.setState({email})}
/>
</Item>
<Item floatingLabel>
<Label> Password </Label>
<Input
name='password'
secureTextEntry={true}
autoCorrect={false}
autoCapitalize='none'
onChangeText={(password)=> this.setState({password})}
/>
</Item>
<Button style={{marginTop: 10}}
full
rounded
success
onPress = {()=> this.loginUser(this.state.email,this.state.password) || navigate(AppContainer)}
>
<Text> Login </Text>
</Button>
<Button style={{marginTop: 10}}
full
rounded
primary
onPress = {()=> this.signUpUser(this.state.email,this.state.password)}
>
<Text style={{color: 'white' }}> Sign Up </Text>
</Button>
</Form>
</Container>
);
}
}
const styles = StyleSheet.create ({
container:{
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
padding: 10
}
})
And the Error:
I misread the code. 'Navigate' is a command to move the screen. The 'createDrawenavigator' must open the drawer.
Can you try this Code?
onPress = {()=> this.loginUser(this.state.email,this.state.password) || this.props.navigation.openDrawer();}
Change the Navigator configuration if you want to move the screen.
createStackNavigator({
A: {
screen: AScreen,
navigationOptions: () => ({
title: `A`,
headerBackTitle: 'A much too long text for back button from B to A',
headerTruncatedBackTitle: `to A`
}),
},
B: {
screen: BScreen,
navigationOptions: () => ({
title: `B`,
}),
}
});

Resources