Icon in initValue instead of a string

[georgeMorales]

Would it be possible to set an icon as initialValue? A few months ago, thanks to your help, I was able to put it in the drop-down list but now I also need it in initValue. It works but an warning appears... Warning: Failed prop type: Invalid prop initValue of type object supplied to ModalSelector, expected string.

[peacechen]

The warning should be a simple fix. The propType needs to change to accept either a string or object.

Looking through the code, I'm surprised that an icon works for initValue. Would you mind posting a code snippet?

[georgeMorales]

This is an example... I don't know what version I use of this library ... I think you sent me this update last time "git + https: //github.com/peacechen/react-native-modal-selector.git" Thank you `import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; import ModalSelector from 'react-native-modal-selector'; import Icon from 'react-native-vector-icons/Ionicons'; import { fonts } from '../baseStyles/base';

const FieldPickerCategoryRecipe = props => {

const { input: { onChange, value }, children, meta: { touched, error } } = props;

const category = <Icon name="md-contrast" size={40} color="lightgrey" />;
let initialValue = category;
if (value !== '') {
    initialValue = value;
}

let index = 0;
const data = [
    //{ key: index++, label: 'Aperitivos' },
    { key: index++, label: 'Almuerzo' },
    { key: index++, label: 'Cena' },
    //{ key: index++, label: 'Postres' },    
];
return (
    <View style={{flex:1, padding:5, alignItems: 'center'}}>

        <ModalSelector
            data={data}
            initValue={initialValue}
            initValueTextStyle={{color: 'grey', fontFamily: fonts.secundary}}
            onChange={(option) => onChange(option.label, option.index)}
            //supportedOrientations={['landscape']}
            accessible={true}
            scrollViewAccessibilityLabel={'Scrollable options'}
            cancelButtonAccessibilityLabel={'Cancel Button'}
            //style={{backgroundColor: '#F05451'}}
            //selectStyle={{borderColor: '#F05451'}}
            selectTextStyle={{fontSize: 16, fontFamily: fonts.secundary}}
            //overlayStyle={{flex: 1, padding: '5%', justifyContent: 'center', backgroundColor:'#F05451'}}
            //sectionStyle={{borderColor: '#F05451'}} // no hace nada
            sectionTextStyle={{fontFamily: fonts.primary}} 
            optionTextStyle={{color: 'grey', fontFamily: fonts.primary}}
            optionContainerStyle={{backgroundColor:'#fff'}}
            //onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} 
            cancelStyle={{backgroundColor:'#fff'}}
            cancelTextStyle={{color: 'grey', fontFamily: fonts.terciary}}
            cancelText="Cancelar"
        />
        {touched && error && <View style={styles.containerErrors}><Text style={styles.errors}>{error}</Text></View>}
    </View>
);

}

[peacechen]

I see, a <Text> component can have an Icon within it 😄

All that needs to be changed is the propType for initValue, along with the documentation. Would you be interested in submitting a PR? This line should be modified: https://github.com/peacechen/react-native-modal-selector/blob/master/index.js#L32

... to

    initValue:                      PropTypes.oneOf([PropTypes.string, PropTypes.object]),

... and the Readme updated to show initValue supports both String and Object types.

[georgeMorales]

What is a PR? I don't understand very well what you mean ... If in the index file of the library I change initValue: PropTypes.string, to initValue: PropTypes.oneOf ([PropTypes.string, PropTypes.object]), Is the problem fixed?

[peacechen]

Fork this project, make the changes to the code & Readme, then create a pull request. https://help.github.com/en/articles/creating-a-pull-request