react-native-modal-selector

react-native-modal-selector copied to clipboard

The selected element (data: label & key) is adopted, but not displayed in the selector field. The style properties are also not adopted!!!

The code for the selector: <ModalSelector data={data} ref={selector => {this.selector = selector;}} overlayStyle={styles.dropdownselector} caseSensitiveSearch={true} initValue="Bitte Artikeltyp auswählen!" supportedOrientations={['landscape']} accessible={true} cancelText="zurück" scrollViewAccessible={true} scrollViewAccessibilityLabel={'Scrollable options'} searchText="Suche" searchTextStyle={{ fontFamily: 'sans-serif', fontSize: 18, textAlign: 'center'}} onChange={(item)=> this.handleChange(item.label, 'itemcat') }>

                </ModalSelector>

Style properties: const styles = StyleSheet.create({ ... dropdownselector: { borderColor: 'deepskyblue', borderRadius: 8, borderWidth: 1, height: 40, padding: 10, marginBottom: 15, backgroundColor: '#fafafa', }, ...

Would it possible for you to link an Expo Snack (https://snack.expo.dev/) with a reproducible example of the error you are experiencing? Then it will be easier to see out what could be causing the error.

I have the same issue which occur only when I do a this.setState({ myvar: option.key }) in the onChange callback

<ModalSelector  data={data}  onChange={(option) => { console.log(option) }} />

works fine but

<ModalSelector   data={data}  onChange={(option) => { this.setState({ myvar: option.key }) } />

Don't display the selected value

Actually when I run a setState it erase the selector

I fixed my issue by using selectedKey={this.state.myvar}

For thoose who had the same problem, but already had a selectedKey prop, on ios, if you do : onChange={(option) => setModalSelector(option.id)}

go check the issue : https://github.com/peacechen/react-native-modal-selector/issues/140 and change the onChange props into onModalClose : onModalClose={(option) => setModalSelector(option.id)}

or if you don't use the hooks onModalClose={(option) => {this.setState({ modalSelector: option.id }) }

I fixed my issue by using selectedKey={this.state.myvar}

This solution works fine to me! Thank you so much @solisoft

I fixed my issue by using selectedKey={this.state.myvar}

Thank you so much, it works fine!