1import * as React from 'react'; 2import { View, ViewStyle, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native'; 3 4import Colors from '../constants/Colors'; 5import { SectionLabelText } from './Text'; 6import { SectionLabelContainer } from './Views'; 7 8type Props = { 9 style?: ViewStyle; 10 title: string; 11 buttonLabel?: string; 12 leftContent?: React.ReactNode; 13 onPress?: () => any; 14 onLongPress?: () => any; 15}; 16 17export default function SectionHeader({ 18 title, 19 buttonLabel, 20 onPress, 21 onLongPress, 22 leftContent, 23}: Props) { 24 return ( 25 <SectionLabelContainer> 26 <View style={styles.textContainer}> 27 {leftContent} 28 <SectionLabelText>{title.toUpperCase()}</SectionLabelText> 29 </View> 30 {buttonLabel && ( 31 <TouchableOpacity 32 style={styles.buttonContainer} 33 onPress={onPress} 34 onLongPress={onLongPress}> 35 <Text style={styles.buttonText}>{buttonLabel.toUpperCase()}</Text> 36 </TouchableOpacity> 37 )} 38 </SectionLabelContainer> 39 ); 40} 41 42const styles = StyleSheet.create({ 43 textContainer: { 44 flexDirection: 'row', 45 alignItems: 'center', 46 }, 47 buttonContainer: { 48 alignItems: 'flex-end', 49 flex: 1, 50 }, 51 buttonText: { 52 color: Colors.light.greyText, 53 fontSize: 11, 54 letterSpacing: 0.92, 55 ...Platform.select({ 56 ios: { 57 fontWeight: '500', 58 }, 59 }), 60 }, 61}); 62