Develop Reference

TypeError: undefined is not an object (evaluating'_order.default.addOrder')

I am trying to call the addOrder function from CartScreen to function located in my action folder.
the thing is whenever I pressed the OrderNow Button, the addOrder function should be triggered. But, I'm getting error like this.
CartScreen.js
import React from 'react';
import { View, Text, FlatList, Button, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as cartAction from '../../store/actions/cart';
import ordersAction from '../../store/actions/order';
import Colors from '../../constants/Colors';
import CartItem from '../../components/shop/CartItem';
const CartScreen = props => {
const dispatch = useDispatch();
const cartTotalAmount = useSelector(state => state.cart.totalAmount);
const cartItems = useSelector(state => {
const transformedCartItems = [];
for (const key in state.cart.items) {
transformedCartItems.push({
productId: key,
productTitle: state.cart.items[key].productTitle,
productPrice: state.cart.items[key].productPrice,
quantity: state.cart.items[key].quantity,
sum: state.cart.items[key].sum,
});
}
return transformedCartItems.sort((a, b) =>
a.productId > b.productId ? 1 : -1,
);
});
console.log('CATRITEM', cartItems);
return (
<View style={styles.screen}>
<View style={styles.summary}>
<Text style={styles.summaryText}>
Total:{' '}
<Text style={styles.amount}>${cartTotalAmount.toFixed(2)}</Text>
</Text>
<Button
color={'green'}
title="Order Now"
disabled={cartItems.length === 0}
onPress={() => {
dispatch(ordersAction.addOrder(cartItems, cartTotalAmount));
}}
/>
</View>
<FlatList
data={cartItems}
keyExtractor={item => item.productId}
renderItem={itemData => (
<CartItem
quantity={itemData.item.quantity}
title={itemData.item.productTitle}
amount={itemData.item.sum}
onRemove={() => {
dispatch(cartAction.removeFromCart(itemData.item.productId));
}}
/>
)}
/>
</View>
);
};
CartScreen.navigationOptions = {
headerTitle: 'Your Cart',
};
const styles = StyleSheet.create({
screen: {
margin: 20,
},
summary: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
padding: 10,
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: 'white',
},
summaryText: {
fontSize: 18,
},
amount: {
color: Colors.primary,
},
});
export default CartScreen;
order.js (in action Folder)
export const ADD_ORDER = 'ADD_ORDER';
export const addOrder = (cartItems, totalAmount) => {
return {
type: ADD_ORDER,
orderData: {
items: cartItems,
amount: totalAmount,
},
};
};

Use the import differently and call the function as:
import { addOrder } from '../../store/actions/order';
Then call as the following:
dispatch(addOrder(cartItems, cartTotalAmount));

your import is wrong . you imported orderAction like
import ordersAction from '../../store/actions/order';
what you should do is
import * as ordersAction from '../../store/actions/order';
things should work fine after

Why isn't the props/actions passed the first time?

I have a list of "comparators" that I can choose from. I want to show the amounts of accounts in one comparator just under the title.
I was able to make a function that fetch the accounts and get the size. However, it only works the second time I load the page. If I load it for the first time, the results always show 0.
How can I make sure that the the first time I load the page, the data is fetched and loading correctly?
Here is my code:
import React, {Component} from 'react';
import {TouchableOpacity, Image, StyleSheet, View} from 'react-native';
import {HardbaconText} from '../components';
import colors from '../../src/res/colors/index';
import next from '../../src/res/images/files/comparators/next.png';
import I18n from '../i18n/i18n';
import {connect} from 'react-redux';
import * as actions from '../actions';
export class ComparatorOption extends Component {
constructor(props) {
super(props);
this.state = {amount: 0};
}
componentDidMount() {
this.props.getAmount(this.props.type);
}
render() {
return (
<TouchableOpacity
style={styles.option}
onPress={(props, ref) => {
this.props.navigation.navigate(this.props.destination);
}}>
<View style={styles.leftSide}>
<Image
style={styles.image}
resizeMode={'contain'}
source={this.props.img}
/>
<View style={styles.textContainer}>
<HardbaconText style={styles.title}>
{I18n.t(this.props.type)}
</HardbaconText>
<HardbaconText style={styles.subtitle}>
{`${(this.props.amount && this.props.amount[this.props.type]) ||
'0'} ${I18n.t('products')}`}
</HardbaconText>
</View>
</View>
<View style={styles.nextContainer}>
<Image source={next} style={styles.next} resizeMethod="contain" />
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
option: {
marginHorizontal: 10,
backgroundColor: 'white',
borderRadius: 10,
height: 80,
padding: 10,
marginTop: 15,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
},
image: {
width: 25,
height: '100%',
marginRight: 20,
marginLeft: 20,
},
leftSide: {
display: 'flex',
flexDirection: 'row',
},
textContainer: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
},
title: {
fontSize: 14,
fontWeight: '700',
color: 'black',
},
subtitle: {
fontSize: 9,
color: colors.hardbaconDarkGray,
},
nextContainer: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
next: {
height: 24,
opacity: 0.3,
},
});
const mapStateToProps = ({comparators}) => {
return {
amount: comparators.accountsAmount,
};
};
export default connect(
mapStateToProps,
actions,
)(ComparatorOption);
import {
SET_COMPARATOR_PRODUCTS_AMOUNT,
GET_COMPARATORS_INSTITUTIONS,
GET_COMPARATOR_ACCOUNTS,
} from '../types/Comparators';
import Config from 'react-native-config';
import {AxiosInstance} from '../api/AxiosInstance';
export const getAmount = comparator => dispatch => {
AxiosInstance.get('/comparators/' + comparator, {
headers: {
'X-Comparator-API-KEY': Config.COMPARATOR_API_KEY,
'content-type': 'application/json',
},
}).then(res => {
dispatch({
type: SET_COMPARATOR_PRODUCTS_AMOUNT,
payload: {
comparator: comparator,
amount: res.data.length,
},
});
});
};
import {
SET_COMPARATOR_PRODUCTS_AMOUNT,
GET_COMPARATORS_INSTITUTIONS,
GET_COMPARATOR_ACCOUNTS,
} from '../types/Comparators';
const INITIAL_STATE = {
accountsAmount: {},
institutions: [],
accounts: [],
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case SET_COMPARATOR_PRODUCTS_AMOUNT:
var accountsAmount = state.accountsAmount;
accountsAmount[action.payload.comparator] = action.payload.amount;
return Object.assign({}, state, {accountsAmount: accountsAmount});
case GET_COMPARATORS_INSTITUTIONS:
return {
...state,
institutions: action.payload,
};
case GET_COMPARATOR_ACCOUNTS:
return {
...state,
accounts: action.payload,
};
default:
return state;
}
};

Could be because you mutating state try the following instead:
case SET_COMPARATOR_PRODUCTS_AMOUNT:
//make a shallow copy
var accountsAmount = {...state.accountsAmount};
//mutate the shallow copy
accountsAmount[action.payload.comparator] =
action.payload.amount;
return Object.assign({}, state, {
accountsAmount,
});

React-Native Jitsi Meet 'null is not an object (evaluating 'JitsiMeetModule.call)' Error

I am new to react-native and Jitsi-Meet.
I a trying to develop a video-call app using Jitsi Meet.
I applied everything as in the descriptions on official website but I get the errors in the pics.
here are some of my codes
on my Jitsi.js component =
import React from 'react';
import { View } from 'react-native';
import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';
class VideoCall extends React.Component {
constructor(props) {
super(props);
this.onConferenceTerminated = this.onConferenceTerminated.bind(this);
this.onConferenceJoined = this.onConferenceJoined.bind(this);
this.onConferenceWillJoin = this.onConferenceWillJoin.bind(this);
}
componentDidMount() {
console.log(props);
const { username, roomname } = this.props;
setTimeout(() => {
const url = `https://your.jitsi.server/${roomname}`; // can also be only room name and will connect to jitsi meet servers
const userInfo = {
displayName: `${username}`,
email: 'user#example.com',
avatar: 'https:/gravatar.com/avatar/abc123' };
JitsiMeet.call(url, userInfo);
/* You can also use JitsiMeet.audioCall(url) for audio only call */
/* You can programmatically end the call with JitsiMeet.endCall() */
}, 1000);
}
onConferenceTerminated(nativeEvent) {
/* Conference terminated event */
}
onConferenceJoined(nativeEvent) {
/* Conference joined event */
}
onConferenceWillJoin(nativeEvent) {
/* Conference will join event */
}
render() {
return (
<View style={{ backgroundColor: 'black',flex: 1 }}>
<JitsiMeetView onConferenceTerminated={this.onConferenceTerminated} onConferenceJoined={this.onConferenceJoined} onConferenceWillJoin={this.onConferenceWillJoin} style={{ flex: 1, height: '100%', width: '100%' }} />
</View>
);
}
}
export default VideoCall;
on my App.Js where I import jitsi component =
import React, {useState} from 'react';
import { Platform, StyleSheet, Text, View, Button, TextInput } from 'react-native';
import JitsiMeet from './components/jitsi'
const instructions = Platform.select({
ios: `Şu anda IOS konfigürasyon`,
android: `Android Konfigürasyon`,
});
export default function App() {
const [Count, setCount] = useState(0);
const [value, SetValue] = React.useState('');
const [value2, SetValue2] = React.useState('');
const addJitsi = () => {
try {
if (value !== '' && value2 !== '' ) {
const roomname = value.replace(/ |,|\.|/g, "");
const username = value2.replace(/ |,|\.|/g, "");
return <JitsiMeet roomname={roomname} username={username}/>
}
return <Text style={styles.welcome}>Lütfen alanları doldurunuz</Text>
} catch (error) {
console.log(error);
}
}
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.welcome}>Deep Lab University</Text>
<TextInput
style={styles.TextInputStyle}
onChangeText={text => SetValue(text)}
value={value}
placeholder='Kanal adı: '
/>
<TextInput
style={styles.TextInputStyle}
onChangeText={text => SetValue2(text)}
value={value2}
placeholder='Kullanıcı adı: '
/>
<Button title={'Kanal Oluştur'} style={{ marginBottom: '3%' }} onPress={(e) => console.log(value, value2)}/>
</View>
<Text style={styles.welcome}>Sayımız: `${Count}`</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Button title={`${Count}`} onPress={(e) => setCount(prevstate => prevstate +1)}/>
{
addJitsi()
}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
header: {
backgroundColor: '#999',
color: 'red',
minHeight: '50%',
width: '90%',
top: '1%',
marginTop: '0%',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
TextInputStyle: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
backgroundColor: 'white',
margin: '2%',
}
});
I can not go further . Thanks in advance

Not able to navigate to other page in react native

I am not able to navigate to other page in react native.
Here is my App.js:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View,Dimensions,TextInput,TouchableOpacity,Button } from 'react-native';
import Camera from 'react-native-camera';
import ContactDetails from './Components/ContactDetails';
import Finalpage from './Components/Finalpage'
import { StackNavigator } from 'react-navigation';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
class HomeScreen extends Component {
_onPressButton = ()=> {
this.props.navigation.navigate('SignUp1');
}
render() {
return (
<View style={{ flex: 1 }}>
<TouchableOpacity
style={{
backgroundColor: '#f2f2f2',
paddingVertical: 10,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
marginTop: 35,
}}>
<Text style={{ color: '#010101' }}>Please Capture Image</Text>
</TouchableOpacity>
<Button
onPress={this._onPressButton}
title="Press Me"
/>
</View>
);
}
}
export default class App extends Component
<Props>
{
constructor(props) {
super(props);
this.state = {
path: null,
};
}
takePicture() {
this.method();
const { navigate } = this.props.navigation;
alert("HI");
this.camera.capture()
.then((data) => {
console.log(data);
alert("HI");
this.props.navigator.push({
component: ContactDetails,
});
})
.catch(err => console.error(err));
}
renderCamera() {
const { navigate } = this.props.navigation;
return (
<Camera
ref={(cam) =>
{
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
captureQuality={Camera.constants.CaptureQuality.medium}
captureTarget={Camera.constants.CaptureTarget.disk}
orientation={Camera.constants.Orientation.auto}
aspect={Camera.constants.Aspect.fill}
>
<TouchableHighlight
style={styles.capture}
onPress={this.takePicture()
}
underlayColor="rgba(255, 255, 255, 0.5)"
>
<View />
</TouchableHighlight>
</Camera>
);
}
renderImage() {
return (
<View>
<Image
source={{ uri: this.state.path }}
style={styles.preview}
/>
<Text
style={styles.cancel}
onPress={() => this.method()}
>Cancel
</Text>
</View>
);
}
method(){
alert("HI");
this.props.navigation.navigate('SignUp1');
}
render() {
return (
<RootStack />
)
}
}
const RootStack = StackNavigator({
Home: {
screen: HomeScreen,
},
SignUp1: {
screen: ContactDetails,
},
finalpage:{
screen:Finalpage,
}
});
Here is the style for App.js file
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
width: 70,
height: 70,
borderRadius: 35,
borderWidth: 5,
borderColor: '#FFF',
marginBottom: 15,
},
cancel: {
position: 'absolute',
right: 20,
top: 20,
backgroundColor: 'transparent',
color: '#FFF',
fontWeight: '600',
fontSize: 17,
}
});
List item: in contactDetails.js
import React, { Component } from 'react';
import {
View,
StyleSheet,
Dimensions,
TouchableHighlight,
Image,
Text,
} from 'react-native';
import Camera from 'react-native-camera';
import { StackNavigator } from 'react-navigation';
import {Finalpage} from'../Components/Finalpage';
const RootStack = StackNavigator({
SignUpMEW: {
screen: Finalpage,
},
});
class CameraRoute extends Component {
constructor(props) {
super(props);
this.state = {
path: null,
};
}
takePicture() {
this.camera.capture()
.then((data) => {
console.log(data);
this._onPressButton();
})
.catch(err => console.error(err));
}
renderCamera() {
return (
<Camera
ref={(cam) =>
{
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
captureTarget={Camera.constants.CaptureTarget.disk}
>
<TouchableHighlight
style={styles.capture}
onPressIn={() =>
this.takePicture()}
onPressOut={() => this._onPressButtonNEW()}
underlayColor="rgba(255, 255, 255, 0.5)"
>
<View />
</TouchableHighlight>
</Camera>
);
}
_onPressButton = ()=> {
this.props.navigation.push('SignUpMEW');
}
_onPressButtonNEW = ()=> {
alert("Thanks For Storing the data");
this.props.navigation.push('SignUpMEW');
alert(this.props.navigation);
}
renderImage() {
return (
<View>
<Image
source={{ uri: this.state.path }}
style={styles.preview}
/>
<Text
style={styles.cancel}
onPress={() => this.props.navigation.navigate('SignUpMEW')}
>Cancel
</Text>
</View>
);
}
render() {
return (
<View style={styles.container}>
{this.state.path ? this.renderImage() : this.renderCamera()}
</View>
);
}
}
Here is the style for contactDetails.js
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
width: 70,
height: 70,
borderRadius: 35,
borderWidth: 5,
borderColor: '#FFF',
marginBottom: 15,
},
cancel: {
position: 'absolute',
right: 20,
top: 20,
backgroundColor: 'transparent',
color: '#FFF',
fontWeight: '600',
fontSize: 17,
}
});
export default CameraRoute;
Page 2 - In final page
import React, {Component
} from 'react';
import {
Text,
View,StyleSheet
} from 'react-native';
export class Finalpage extends React.Component{
render() {
return (
<View style={styles.container}>
<Text>Thanks For Update</Text>
</View>
);
}
}
Here is the style for the final page
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
}
});
I cannot navigate to final page please help me out i am new to React so please help me out

First: your code is unreadable and not structured. It is horrible to read.
Second: As far as I can see, your usage of StackNavigator is wrong. Should be like this (you are missing create):
const RootStack = createStackNavigator({
Home: {
screen: HomeScreen,
},
SignUp1: {
screen: ContactDetails,
},
finalpage:{
screen:Finalpage,
}
});
Docs StackNavigator

React Native randomly errors: Can't find variable image after 30 - 90 seconds

So I'm building a React Native app using
React Native - Latest
MobX and MobX-React - Latest
Firebase - Latest
My app works fine. However, I can leave the app idle or play around with it and after 30-90 seconds I red screen with this error. Its not being very specific about what file is erroring! How can I debug this?
Firebase.js
export function getFeed(db,id,callback){
db.collection("posts").where("userId", "==", id)
.get()
.then(function (querySnapshot) {
callback(true,querySnapshot)
})
.catch(function (error) {
callback(false)
console.log("Error getting documents: ", error);
});
}
List.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
FlatList,
ActivityIndicator,
RefreshControl
} from 'react-native';
import Post from './Post';
import Spinner from 'react-native-spinkit';
import { Icon } from 'react-native-elements';
import { getFeed } from '../../network/Firebase';
import { observer, inject } from 'mobx-react';
#inject('mainStore')
#observer export default class List extends Component {
constructor(props) {
super(props)
this.state = {
dataSource: [],
initialLoad: true,
refreshing: false
}
this.getData = this.getData.bind(this)
}
componentWillMount() {
this.getData()
}
getData() {
this.setState({
refreshing: true
})
getFeed(this.props.screenProps.db, this.props.mainStore.userData.id, (status, res) => {
let tempArray = []
let counter = 0
res.forEach((doc) => {
let tempObj = doc.data()
doc.data().user
.get()
.then((querySnapshot) => {
tempObj.userData = querySnapshot.data()
tempArray.push(tempObj)
counter = counter + 1
if (counter === res.docs.length - 1) {
this.setState({
dataSource: tempArray,
initialLoad: false,
refreshing: false
})
}
})
});
})
}
renderRow = ({ item }) => {
return (
<Post item={item} />
)
}
render() {
if (this.state.initialLoad) {
return (
<View style={styles.spinner}>
<Spinner isVisible={true} type="9CubeGrid" size={40} color="white" />
</View>
)
} else {
return (
<FlatList
data={this.state.dataSource}
extraData={this.state}
keyExtractor={(_, i) => i}
renderItem={(item) => this.renderRow(item)}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.getData}
/>
}
/>
);
}
}
}
const styles = StyleSheet.create({
spinner: {
marginTop: 30,
alignItems: 'center'
}
});
Post.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
Image
} from 'react-native';
import moment from 'moment';
import { Icon } from 'react-native-elements';
export default class Post extends React.PureComponent {
render() {
let today = moment()
let date = this.props.item.date
if(today.diff(date, 'days') < 5){
date = moment(date).startOf('day').fromNow()
}else{
date = moment(date).format('DD MMM YYYY, h:mm a')
}
return (
<View
style={styles.container}
>
<View style={styles.top}>
<Image style={styles.profile} source={{uri: this.props.item.userData.image}} />
<Text style={styles.title}>{this.props.item.userData.firstName+' '+this.props.item.userData.lastName}</Text>
</View>
<View style={styles.descriptionContainer}>
<Text style={styles.description}>{this.props.item.description}</Text>
</View>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{uri: this.props.item.image}} />
</View>
<TouchableOpacity style={styles.commentsContainer}>
<View style={styles.timeFlex}>
<Text style={styles.title}>{date}</Text>
</View>
<View style={styles.commentFlex}>
<Text style={styles.title}>Comments (12)</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
title: {
color: 'white',
backgroundColor: 'transparent'
},
timeFlex: {
flex: 0.5,
alignItems: 'flex-start'
},
commentFlex: {
flex: 0.5,
alignItems: 'flex-end'
},
profile: {
width: 40,
height: 40,
borderRadius: 20,
marginRight: 10
},
descriptionContainer: {
marginBottom: 10,
marginHorizontal: 15,
},
description: {
color: 'rgba(255,255,255,0.5)'
},
commentsContainer: {
marginBottom: 10,
alignItems: 'flex-end',
marginHorizontal: 15,
flexDirection: 'row'
},
imageContainer: {
marginBottom: 10,
marginHorizontal: 15,
height: 180
},
image: {
height: '100%',
width: '100%'
},
top: {
justifyContent: 'flex-start',
margin: 10,
marginLeft: 15,
flexDirection: 'row',
alignItems: 'center'
},
container: {
margin: 10,
backgroundColor: '#243c5e',
borderRadius: 10,
shadowColor: 'black',
shadowOffset: {
width: 2,
height: 1
},
shadowRadius: 4,
shadowOpacity: 0.3
}
});