hyrwork / react-native-row

A wrapper around the react-native View component enabling concise assignment of flexbox properties
MIT License
51 stars 5 forks source link

Touchable #8

Open ssomnoremac opened 7 years ago

ssomnoremac commented 7 years ago

I'm finding more often than not that I do this:

<Row>
  <Touchable onPress={}>...</Touchable>
<Row>

Why not just toggle the Component type to Touchable (handling Platform differences as well) when onPress is present?

<Row onPress={}>...</Row>

and like so

const Component = !onPress
    ? View
    : Platform.OS === 'android'
        ? TouchableNativeFeedback 
        : TouchableHighlight

    <Component style={[_style, _shorthandStyles, style]} onPress={onPress || () => null} {...otherProps} >
        {props.children}
    </Component>

pass the empty function to View ? There might be a better way.

ssomnoremac commented 7 years ago

Might be better just as this

if(onPress) {
    return (
        <TouchableComponent style={[_style, _shorthandStyles, style]} onPress={onPress} {...otherProps} >
            {props.children}
        </TouchableComponent>
    )
} else {
    return (
        <View style={[_style, _shorthandStyles, style]} {...otherProps} >
            {props.children}
        </View>
    );
}

or actually back to the original

const Component = !otherProps.onPress
    ? View
    : Platform.OS === 'android'
        ? TouchableNativeFeedback 
        : TouchableHighlight

and remove onPress from the Component altogether. I think that would work, be the cleanest.

eightyfive commented 6 years ago

While TouchableHighlight does accept a style property, I believe TouchableNativeFeedback / TouchableWithoutFeedback does not.