53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import {
|
||
|
|
Platform,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TouchableHighlight,
|
||
|
|
TouchableNativeFeedback,
|
||
|
|
View,
|
||
|
|
} from 'react-native';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Renders the right type of Touchable for the list item, based on platform.
|
||
|
|
*/
|
||
|
|
const Touchable = ({onPress, children}) => {
|
||
|
|
const child = React.Children.only(children);
|
||
|
|
if (Platform.OS === 'android') {
|
||
|
|
return (
|
||
|
|
<TouchableNativeFeedback onPress={onPress}>
|
||
|
|
{child}
|
||
|
|
</TouchableNativeFeedback>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<TouchableHighlight onPress={onPress} underlayColor='#ddd'>
|
||
|
|
{child}
|
||
|
|
</TouchableHighlight>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const ListItem = ({label, onPress}) => (
|
||
|
|
<Touchable onPress={onPress}>
|
||
|
|
<View style={styles.item}>
|
||
|
|
<Text style={styles.label}>{label}</Text>
|
||
|
|
</View>
|
||
|
|
</Touchable>
|
||
|
|
);
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
item: {
|
||
|
|
height: 48,
|
||
|
|
justifyContent: 'center',
|
||
|
|
paddingLeft: 12,
|
||
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||
|
|
borderBottomColor: '#ddd',
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
fontSize: 16,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
export default ListItem;
|