gs-akhan/react-native-chooser

problem with selected

panvourtsis opened this issue · 7 comments

panvourtsis commented

Hi guys,

Having a small issue working with the plugin

<Select
  selected='MALE'
>
  <Option value='FEMALE'>female</Option>
  <Option value='MALE'>male</Option>
  <Option value='UNKNOWN'>other</Option>
</Select>

this is not selecting by default the male. Any thoughts?

gs-akhan commented

Hi,
please use "defaultText" prop.. I will deprecate that soon.
Thanks

panvourtsis commented

thanks for the fast reply i appreciated.

In that scenario i must make the mechanism for every select to find the correct/selected string. What if you had only the value and based on that you decide the option?

gs-akhan commented
panvourtsis commented

ah sorry. i mean that with the defaultText i cannot decide based on the value can i? I can only show a "dummy" text

gs-akhan commented
  • 👍1
panvourtsis commented

Thanks for the help.
Just for any future use what I did was to make a custom input like the below and to feed the options and the text from the state or redux and it does the rest

import React from 'react';
import { Select, Option } from 'react-native-chooser';
import _ from 'lodash';
import {
  StyleSheet
} from 'react-native';

const SelectInput = ({text, options}) => {
  const {
    inputStyle,
    textStyle,
    optionListStyle
  } = styles;

  const defaultText = _.chain(options)
    .find({ 'value': text })
    .defaultTo({'value': ''})
    .get('text')
    .value();

  return (
    <Select
      defaultText={defaultText}
      indicator='down'
      indicatorStyle={{}}
      transparent={true}
      style={inputStyle}
      textStyle={textStyle}
      optionListStyle = {optionListStyle}
    >
      {options.map((item) => (
        <Option key={item.value} value={item.value}>{item.text}</Option>
      ))}
    </Select>
  );
};

const styles = StyleSheet.create({
  optionListStyle: {
    backgroundColor : '#fff'
  },
  inputStyle: {
    borderWidth: 0,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  textStyle: {
    color: '#000',
    marginTop: 5,
    marginBottom: 5,
    fontSize: 18,
    lineHeight: 23,
    flex: 1
  }
});

export { SelectInput };

and at your parent module you define the options and the state value

const ages = [
  {
	value: 1,
	text: 'under 18'
  },
  {
	value: 2,
	text: '18-24'
  },
  {
	value: 3,
	text: '25-39'
  },
  {
	value: 4,
	text: '40-54'
  },
  {
	value: 5,
	text: '55+'
  }
];

<SelectInput
  text={this.props.age.range} // using redux properties
  options={ages}
/>
gs-akhan commented

Super. That will work.

I just wanted to keep selectedText as only property. other authors made PRs and they added new properties and it made it ambiguous..
:(

However whatever you did should work. Again the <Select /> component doesn't hold any state. you set values from outside and get callback executed when you change.