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>
);
}
}
Related
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" }}
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.
I wants to change button when I clicked on button. I have list of users. I want when I clicked on follow button the button change to following button. Right now when I clicked on button my all button changes to following button. I want to change current button. Here is my code.
import React, { Component } from "react";
import { TouchableOpacity,StatusBar,View,Modal,
TouchableHighlight,StyleSheet,Image } from "react-native";
import { connect } from "react-redux";
import { DrawerNavigator, NavigationActions } from "react-navigation";
import {} from 'react-native-elements';
import ls from 'react-native-local-storage';
import {
Container,
Header,
Title,
Content,
Text,
Button,
Footer,
FooterTab,
Left,
Body,
Right,
Input,
Item,
List,ListItem,Thumbnail
} from "native-base";
import axios from 'axios';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class Search extends Component {
static navigationOptions = {
header: null
}
constructor(props) {
super(props);
this.state = {
getAllUsers:'',
checkResponce:false,
userID:'',
changeButtons:false,
};
}
componentDidMount(){
ls.get("savedata").then(data => {this.setState({ userID: data.user.id })});
axios.get( "http://172.104.217.178/api/get_users" )
.then(response => {
//alert(JSON.stringify(response));
this.setState({getAllUsers:response.data,})
// alert(JSON.stringify(this.state.getAllUsers));
})
.catch(error => alert(error.response.data));
}
Donefollow(getuserId){
axios.post( "http://172.104.217.178/api/follow_user/"+this.state.userID,{
user_id:getuserId
} )
.then(response => {
//alert(JSON.stringify(response));
if(response.data.status===1){
this.changebutton(getuserId)
}
})
.catch(error => alert(error.response.data));
}
async changebutton(followid){
this.setState({changeButtons:true})
await alert("here can i change ?")
}
render() {
let GetUersData=[];
let UsersState=this.state.getAllUsers;
for(let property in UsersState.result){
GetUersData.push( <ListItem avatar style={{height:71}}>
<Left>
<Thumbnail source={{uri:UsersState.result[property].profile_photo}} />
</Left>
<Body >
<Text style={{marginTop:15}}>{UsersState.result[property].name}</Text>
<Text note></Text>
</Body>
<Right >{this.state.changeButtons?
<Button rounded warning onPress={this.Donefollow.bind(this,UsersState.result[property].id)}>
<Text>Following</Text>
</Button>: <Button rounded warning onPress={this.Donefollow.bind(this,UsersState.result[property].id)}>
<Text>Follow</Text>
</Button>}
{/* <Button rounded warning onPress={this.Donefollow.bind(this,UsersState.result[property].id)}>
<Text>Follow</Text>
</Button> */}
</Right>
{/* <Right style={{paddingTop:10}}>
</Right> */}
</ListItem>)
}
return (
<Container style={styles.container}>
<Header>
{/* <Left>
<Text>Search</Text>
</Left> */}
<Body >
<Item rounded style={{width:"100%",height:35}}>
<Icon active color='#f39c12' size={24} style={{marginLeft:12}}name='search' />
<Input placeholder='Search'/>
</Item>
</Body>
{/* <Right>
<Button style={{backgroundColor:'transparent'}}>
<Icon style={{color:'#000'}} name="search" />
</Button>
</Right> */}
</Header>
{/*End Header*/}
<Content>
<List style={{marginTop:15}}>
{/* <ListItem avatar style={{height:71}}>
<Left>
<Thumbnail source={require('../../../images/profile_1x.png')} />
</Left>
<Body >
<Text style={{marginTop:15}}>Name</Text>
<Text note></Text>
</Body>
<Right >
<Button rounded dark>
<Text>Follow</Text>
</Button>
</Right>
<Right style={{paddingTop:10}}>
</Right>
</ListItem> */}
{GetUersData}
</List>
</Content>
<Footer>
<FooterTab>
<Button >
<Icon size={24}name="home" onPress={() =>this.props.navigation.navigate('Home') }/>
</Button>
<Button >
<Icon color='#f39c12' name="search" size={20}/>
</Button>
<Button onPress={() =>this.props.navigation.navigate('Gallery') }>
<Icon name="plus"size={20} />
</Button>
<Button onPress={() =>this.props.navigation.navigate('Following') }>
<Icon name="heart" size={20} />
</Button>
<Button onPress={() =>this.props.navigation.navigate('Profile') }>
<Icon name="user" size={20}/>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
},
topTabs:{
borderBottomWidth: 2,
width:180
},
borderLine:{
borderWidth: 1,
marginTop:10,
marginHorizontal: 40,
},
imageStyle:{
paddingTop: 10,
},
})
Here is my output before clicked
and after clicked output looks like that
I want when I clicked on whatever button just that button will change not all buttons help me please
add another state like buttonChangedUserID and set that in following method
async changebutton(followid){
this.setState({changeButtons:true, buttonChangedUserID:followid })
....
then use it to get selected user id to change button while rendering it after state change
I want to change the border size of an input, the color, etc. For some reason when I stack 2 inputs on top of each other, and I add marginTop to the input underneath, or attempt to resize the inputs, and then center them in the page, the borders on either the left or the bottom disappear.
<View style={styles.formAlign}>
<Item regular style={styles.email}>
<Input placeholder='Email' />
</Item>
<Item regular style={styles.password}>
<Input placeholder='Password' />
</Item>
</View>
email:{
borderWidth:4,
color:'red'
},
password:{
},
formAlign:{
justifyContent:'center',
alignItems:'center'
},
tried your code, modified a bit
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native'
import { Item, Input } from 'native-base';
export default class App extends Component {
render() {
return (
<View style={styles.formAlign}>
<Item style={styles.email}>
<Input placeholder='Email' style={styles.input} />
</Item>
<Item style={styles.password}>
<Input placeholder='Password' style={styles.input} />
</Item>
</View>
);
}
}
const styles = StyleSheet.create({
email: {
width: 300,
},
password: {
width: 300,
marginTop: 15,
},
formAlign: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
borderWidth: 1,
borderColor: 'blue'
}
});
Got this result
<Input
size="lg"
colorScheme="gray"
placeholder="Search"
variant="filled"
py="2"
px="2"
fontFamily="body"
style={styles.input}
borderRadius="20"
_focus={{
backgroundColor: "gray.200",
borderColor: "none",
}}
InputLeftElement={
<Icon
ml="2"
size="5"
color="gray.400"
as={<Ionicons name="ios-search" />}
/>
}
/>
In case you want to change when focused, I think this might help. Add this as an input attribute.
import React, { Component } from 'react';
import { Input, Button, Item, Text, Icon } from 'native-base';
export default class App extends Component{
render(){
return(
<Item rounded style={styles.itemStyle}>
<Icon active style={styles.iconstyle} name='navigate' />
<Input keyboardType="default"
getRef={(input) => this.nameInput = input}
returnKeyType='next'
placeholder="Enter Trip Name"
placeholderTextColor="#FFFFFF"
style={{ color: '#ffffff' }}
onSubmitEditing={() => this._focusInput('dayInput')}
value={this.state.tripName}
defaultValue={this.state.tripName}
onChangeText={tripName => this.setState({ tripName })} />
</Item>
)
}
}
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!