Comments (6)
Not currently but I could add that, or feel free to submit a PR
from react-native-picker-select.
Handled in #5
from react-native-picker-select.
Hi everyone.
This is not working for me and I do have the latest version.
I assigned to the items props of the picker, a value stored in the state object.
I update the state value after an axios GET request and the items don't update.
I can see through console log that the state value is update though but items don't update.
I'm I missing something here ?
from react-native-picker-select.
@maroparo you'll have to provide a repo example or reproduce it on snack.expo.io -- the example in the readme handles updating the items properly
from react-native-picker-select.
Hi @lfkwtz
I can't provide a repo as it is private.
Here is the full component though.
import React from 'react';
import {StyleSheet, View, TouchableOpacity, Text, ImageBackground, Dimensions} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import Image from 'react-native-scalable-image';
import axios from 'axios';
import backgroundImage from '../../assets/filterScreenBackground.jpg';
import logo from '../../assets/filterScreenLogo.png';
class FilterScreen extends React.Component {
state = {
selectedCity: null,
cities: [],
selectedSpecialty: null,
specialties: [],
};
componentDidMount() {
this.fetchCities();
setTimeout(() => {
this.setState({
selectedCity: '1',
});
}, 1000);
setTimeout(() => {
this.setState({
selectedSpecialty: '1',
});
}, 2000);
}
fetchCities() {
let baseURL = 'http://127.0.0.1:8000/app/cities';
return axios.get(baseURL).then(response => {
if (response.data.error === false) {
let cities = response.data.data.map(item => ({
label: item.name,
value: item.id
}));
this.setState({
cities:cities
});
}
}
).catch(
() => alert('Something went wrong! :(')
);
};
render() {
return (
<ImageBackground style={styles.backgroundImage} source={backgroundImage}>
<View style={[styles.container, styles.logoContainer]}>
<Image
width={Dimensions.get('window').width * 0.8}
source={logo}
style={styles.logo}
/>
</View>
<View style={[styles.container, styles.formContainer]}>
<RNPickerSelect
placeholder={{
label: 'Zgjidhni qytetin...',
value: null,
}}
items={this.state.cities}
onValueChange={(value) => {
this.setState({
selectedCity: value,
});
}}
style={{...pickerSelectStyles}}
value={this.state.selectedCity}
/>
<View style={{paddingVertical: 5}}/>
<RNPickerSelect
placeholder={{
label: 'Zgjidhni specialitetin...',
value: null,
}}
items={this.state.specialties}
style={{...pickerSelectStyles}}
onValueChange={(value) => {
this.setState({
selectedSpecialty: value,
});
}}
value={this.state.submitButtonContainer}
/>
<View style={[styles.submitButtonContainer]}>
<TouchableOpacity style={styles.submitButton} onPress={() => {
console.log(this.state.cities);
}}>
<Text style={styles.submitButtonText}> GJEJ DOKTORIN </Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
padding: 30,
backgroundColor: "rgba(8, 35, 79, 0.75)"
},
logoContainer: {
width: "100%",
height: "40%",
},
logo: {
width: '100%'
},
formContainer: {
height: "60%",
justifyContent: 'flex-start'
},
backgroundImage: {
flex: 1
},
submitButtonContainer: {
flex: 1,
width: '100%',
justifyContent: 'flex-end',
alignItems: 'center'
},
submitButton: {
width: "100%",
height: 50,
marginTop: 20,
alignItems: 'center',
backgroundColor: '#1aa2b3',
padding: 10,
justifyContent: 'center'
},
submitButtonText: {
color: "white",
fontSize: 15,
fontWeight: 'bold'
}
});
const pickerSelectStyles = {
inputIOS: {
fontSize: 16,
paddingTop: 13,
paddingHorizontal: 10,
paddingBottom: 12,
borderColor: 'gray',
borderRadius: 4,
backgroundColor: 'transparent',
color: 'white',
},
inputAndroid: {
color: 'white'
},
placeholderColor: 'white',
underline: {
borderTopWidth: 0
},
icon: {
position: 'absolute',
backgroundColor: 'transparent',
borderTopWidth: 5,
borderTopColor: 'white',
borderRightWidth: 5,
borderRightColor: 'transparent',
borderLeftWidth: 5,
borderLeftColor: 'transparent',
width: 0,
height: 0,
top: 20,
right: 15,
},
};
export default FilterScreen;
from react-native-picker-select.
@maroparo please let me know how below issue is fixed, I am also facing same problem where on click it is fetching the list from http GET.
"This is not working for me and I do have the latest version.
I assigned to the items props of the picker, a value stored in the state object.
I update the state value after an axios GET request and the items don't update.
I can see through console log that the state value is update though but items don't update.
I'm I missing something here ?"
from react-native-picker-select.
Related Issues (20)
- Release new version with changed package.json HOT 1
- Typing doesn't permit arrays when supplying style overrides HOT 2
- Not able to select Number values since @react-native-picker/picker upgrade to 2.6.1 HOT 9
- Picker item list not displaying items on Android HOT 5
- Backdrop doesnt show on Android
- How to set value initially? HOT 2
- When click on custom icon, drop down does not open. please someone provide me the solution, HOT 1
- unable to get the locator strategy for automation in the picker selector for ios HOT 1
- Is it possible to hide upArrow and downArrow in picker ? HOT 1
- InputAcessoryView section (bar with tabbing arrown and Done button) autoclose onChangeValue IOS HOT 2
- Add the correct interface arguments to the onClose prop
- ERROR Invariant Violation: requireNativeComponent: "RNCPicker" was not found in the UIManager. HOT 3
- Picker size changes according to content when minWidth, width and a custom placeholder is used.
- how to dim the background screen when the picker shows
- Type issue: `Item.value` type doesn't match that in @react-native-picker/picker
- togglePicker() function close then reopen modal HOT 1
- itemKey doesn't work HOT 2
- in IOS, onValueChange shouldn't be triggered when only scroll item list HOT 3
- Android not shown inputs HOT 1
- Android only: onValueChange not fired for placeholder item
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-picker-select.