Getting "not a function"error in React Native/Redux - react-native

My code is here
I am getting the error below.
I believe its something to do with the employee create line in the code below and i cannot figure out why this might be happening. I am doing this from a tutorial
import React, { Component } from 'react';
//import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { Picker, Text } from 'react-native';
import { employeeUpdate, employeeCreate } from '../actions';
import { Card, CardSection, Input, Button } from './common';
class EmployeeCreate extends Component {
onButtonPress() {
const { name, phone, shift } = this.props;
this.props.employeeCreate({ name, phone, shift: shift || 'Monday' });
}
render() {
return (
//
// <View>
// <Text>Employees</Text>
// </View>
<Card>
<CardSection>
<Input
label="Name"
placeholder="Jane"
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
/>
</CardSection>
<CardSection>
<Input
label="Phone"
placeholder="555-555-5555"
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'column' }}>
<Text style={styles.pickerLabelStyle}>Pick a Shift: </Text>
<Picker
//style={{ flex: 1 }}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday" />
<Picker.Item label="Wednesday" value="Wednesday" />
<Picker.Item label="Thursday" value="Thursday" />
<Picker.Item label="Friday" value="Friday" />
<Picker.Item label="Saturday" value="Saturday" />
<Picker.Item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button onPress={this.onButtonPress.bind(this)}>
Create
</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerLabelStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps = (state) => {
const { name, phone, shift } = state.employeeForm;
return { name, phone, shift };
};
export default connect(mapStateToProps, {
employeeUpdate, employeeCreate
})(EmployeeCreate);
Here is the error:

Folks- this is resolved. I found my answer.
In the
https://github.com/samrao2/manager-4/blob/master/src/actions/index.js
file. I was not exporting all the actions from the Employeeactions file and so was not exporting the employeeCreate action. i should have put a * there.
Issue is resolved! Thanks!

Related

React-Native: Picker can't select any other item. Error: Actions may not have and undefined "type" property. Have you misspelled a constant?

I'm learning React Native and I'm stuck on a Picker problem. On clicking it shows up but I can't select anything else other than "Monday". Whenever I do, I get an error
I've tried searching for the problem on the internet and worked with my action creators but nothing seems to work
import React, { Component } from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import { Card, CardSection, Input, Button } from './common';
class EmployeeCreate extends Component {
render() {
return (
<Card>
<CardSection>
<Input
label='Name'
placeholder='Jane'
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
/>
</CardSection>
<CardSection>
<Input
label='Phone'
placeholder='555-555-5555'
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'column' }}>
<Text style={styles.pickerTextStyle}>Shift</Text>
<Picker
style={{ alignItems: "center" }}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday" />
<Picker.Item label="Wednesday" value="Wednesday" />
<Picker.Item label="Thursday" value="Thursday" />
<Picker.Item label="Friday" value="Friday" />
<Picker.Item label="Saturday" value="Saturday" />
<Picker.Item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button>Create</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerTextStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps = (state) => {
const { name, phone, shift } = state.employeeForm;
return { name, phone, shift };
};
export default connect(mapStateToProps, { employeeUpdate })(EmployeeCreate);
Here is my EmployeeActions File:
import EMPLOYEE_UPDATE from './types'
export const employeeUpdate = ({ prop, value }) => {
return {
type: EMPLOYEE_UPDATE,
payload: { prop, value }
};
};
Here is the EmployeeFormReducer:
import EMPLOYEE_UPDATE from '../actions/types';
const INITIAL_STATE = { name: '', phone: '', shift: '' };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMPLOYEE_UPDATE:
//action.payload === { prop: 'name', value: 'jane' }
return { ...state, [action.payload.prop]: action.payload.value };
default:
return state;
}
}
I expect to select any day as per my choice
Solved. Did some changes in types.js file:
export const EMAIL_CHANGED = 'email_changed';
export const PASSWORD_CHANGED = 'password_changed';
export const LOGIN_USER_SUCCESS = 'login_user_success';
export const LOGIN_USER_FAIL = 'login_user_fail';
export const LOGIN_USER = 'login_user';
export const EMPLOYEE_UPDATE = 'employee_update';
export default {
EMAIL_CHANGED,
PASSWORD_CHANGED,
LOGIN_USER_SUCCESS,
LOGIN_USER_FAIL,
LOGIN_USER,
EMPLOYEE_UPDATE
}

React Native - Picker not showing up even after writing the correct code

I'm new to React Native and learning from a course. Unfortunately, I'm stuck in a problem where my picker doesn't show up. Even after styling my CardSection, it is not working. Here is a the code. Please help
I've tried styling the CardSection but it doesn't seem to be working
import React, { Component } from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import { Card, CardSection, Input, Button } from './common';
class EmployeeCreate extends Component {
render() {
return (
<Card>
<CardSection>
<Input
label='Name'
placeholder='Jane'
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
/>
</CardSection>
<CardSection>
<Input
label='Phone'
placeholder='555-555-5555'
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'column' }}>
<Text style={styles.pickerTextStyle}>Shift</Text>
<Picker
style={{ flex: 1 }}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday" />
<Picker.Item label="Wednesday" value="Wednesday" />
<Picker.Item label="Thursday" value="Thursday" />
<Picker.Item label="Friday" value="Friday" />
<Picker.Item label="Saturday" value="Saturday" />
<Picker.Item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button>Create</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerTextStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps = (state) => {
const { name, phone, shift } = state.employeeForm;
return { name, phone, shift };
};
export default connect(mapStateToProps, { employeeUpdate })(EmployeeCreate);
Here is the CardSection
import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => {
return (
<View style={[styles.constainerStyle, props.style]}>
{props.children}
</View>
);
};
const styles = {
constainerStyle: {
bottomBorderWidth: 1,
padding: 5,
backgroundColor: '#FFF',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#DDD',
position: 'relative'
}
};
export { CardSection };
I expect the CardSection to show up like a Picker
Found the solution. Adding the following styling to the picker resolves it
style={{ alignItems: "center" }}

Anyone knows why the label of picker in react native doesn't work?

I was trying to solve the problem by removing the item from but it seems didn't work. i wonder, am i forgot to pass something into the command?
hopefully, the screen and my code will make my explanation more briefly
Here is my code
EmployeeCreate.js
import React,{Component} from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import {Card,CardSection,Input,Button} from './common';
class EmployeeCreate extends Component {
render () {
return (
<Card>
<CardSection>
<Input
label="Name"
placeholder="jane"
/>
</CardSection>
<CardSection>
<Input
label="Phone"
placeholder="08122030930"
/>
</CardSection>
<CardSection style={{flexDirection:'column'}}>
<Text style={styles.pickerTextStyle}>Select your shift</Text>
<Picker
selectedValue={this.props.shift}
onValueChange={day => this.props.employeeUpdate ({prop:'shift' , value: day})}
>
<Picker.item label="Monday" value="Monday" />
<Picker.item label="Tuesday" value="Tuesday" />
<Picker.item label="Wednesday" value="Wednesday" />
<Picker.item label="Thursday" value="Thursday" />
<Picker.item label="Friday" value="Friday" />
<Picker.item label="Saturday" value="Saturday" />
<Picker.item label="Sunday" value="Sunday" />
</Picker>
</CardSection>
<CardSection>
<Button>
create
</Button>
</CardSection>
</Card>
);
}
}
const styles = {
pickerTextStyle: {
fontSize: 18,
paddingLeft: 20
}
};
const mapStateToProps =(state) => {
const { name,phone,shift } = state.employeeForm ;
return {name,phone,shift};
};
export default connect (mapStateToProps,{employeeUpdate}) (EmployeeCreate)
;
here attached also the picture of it
enter image description here
If the function that you mean to call is employeeUpdate that you have imported from ./actions, then you should remove this.props.
Else, the function may need to be defined in the parent class of EmployeeCreate.

How to show selected item different in React Native

I'm using react-native's picker to pick an item from the list of items. What I want to ask is how can I make the selected item to look different may be with a different style or with an icon?
You can use library to get such functionality, Please take a look...
http://docs.nativebase.io/Components.html#picker-with-icon-style-headref
import React, { Component } from "react";
import { Container, Header, Content, Icon, Picker, Form } from "native-base";
class PickerWithIconStyle extends Component {
constructor(props) {
super(props);
this.state = {
selected: "key1"
};
}
onValueChange(value: string) {
this.setState({
selected: value
});
}
render() {
return (
<Container>
<Header />
<Content>
<Form>
<Picker
mode="dropdown"
iosHeader="Select your SIM"
iosIcon={<Icon name="arrow-dropdown-circle" style={{ color: "#007aff", fontSize: 25 }} />}
style={{ width: undefined }}
selectedValue={this.state.selected}
onValueChange={this.onValueChange.bind(this)}
>
<Picker.Item label="Wallet" value="key0" />
<Picker.Item label="ATM Card" value="key1" />
<Picker.Item label="Debit Card" value="key2" />
<Picker.Item label="Credit Card" value="key3" />
<Picker.Item label="Net Banking" value="key4" />
</Picker>
</Form>
</Content>
</Container>
);
}
}

Radio Buttons are not working on ios

I am trying to use Native-Base radio buttons. I've added some additional code to it for making radio buttons work. While it's still not working. Here is the code:
import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
super();
this.state = {
itemSelected: 'itemOne',
}
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem>
<Text>Daily Stand Up</Text>
<Right>
<Radio onPress={() => this.setState({ itemSelected: 'itemOne' })}
selected={this.state.itemSelected == 'itemOne'}
/>
</Right>
</ListItem>
<ListItem>
<Text>Discussion with Client</Text>
<Right>
<Radio onPress={() => this.setState({ itemSelected: 'itemTwo' })}
selected={this.state.itemSelected == 'itemTwo' }
/>
</Right>
</ListItem>
</Content>
</Container>
);
}
}
How can this code be fixed? What's wrong?
Handle the onPress event in the ListItem
import React, { Component } from "react";
import { Container, Header, Content, ListItem, Text, Radio, Right } from "native-base";
export default class RadioButtonExample extends Component {
constructor() {
super();
this.state = {
itemSelected: "itemOne",
};
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem onPress={() => this.setState({ itemSelected: "itemOne" })}>
<Text>Daily Stand Up</Text>
<Right>
<Radio selected={this.state.itemSelected == "itemOne"} />
</Right>
</ListItem>
<ListItem onPress={() => this.setState({ itemSelected: "itemTwo" })}>
<Text>Discussion with Client</Text>
<Right>
<Radio selected={this.state.itemSelected == "itemTwo"} />
</Right>
</ListItem>
</Content>
</Container>
);
}
}