TouchableWithoutFeedback children

[mmarovich]

This isn't really an issue with the code itself, just the first example that was used. My apologies if this has already been covered. In the example:

function renderOption(option, selected, onSelect, index){
    const style = selected ? { fontWeight: 'bold'} : {};

    return (
      <TouchableWithoutFeedback onPress={onSelect} key={index}>
        <Text style={style}>{option}</Text>
      </TouchableWithoutFeedback>
    );
  }

will throw the warning: TouchableWithoutFeedback does not work well with Text Children. Changing it to:

renderOption(option, selected, onSelect, index) {
        const style = selected ? { fontWeight: 'bold' } : {};

        return (
            <TouchableWithoutFeedback onPress={onSelect} key={index}>
                <View>
                    <Text style={style}>{option}</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }

fixes it.

Also, the optionContainerStyle prop doesn't appear to pass effectively. But if I pass the styles traditionally using the above added , it will work:

renderOption(option, selected, onSelect, index) {
        const style = selected ? { fontWeight: 'bold' } : {};

        return (
            <TouchableWithoutFeedback onPress={onSelect} key={index}>
                <View style={styles.optionContainer}>
                    <Text style={style}>{option}</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }