apple-pay-example/components/Header.js

import React, { PropTypes } from 'react'
import { View, Text, Image, TouchableOpacity, Platform, StyleSheet } from 'react-native'
import testID from '../utils/testID'

export default function Header({ title, onMenuPress }) {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={onMenuPress}
        {...testID('toggleDrawerButton')}>
        <Image style={styles.buttonImage} source={require('../assets/menu.png')} />
      </TouchableOpacity>
      <View style={styles.title}>
        <Text style={styles.titleText}>
          {title}
        </Text>
      </View>
    </View>
  )
}

Header.propTypes = {
  title: PropTypes.string.isRequired,
  onMenuPress: PropTypes.func.isRequired,
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Platform.select({ ios: '#efeff2', android: '#ffffff' }),
    borderBottomColor: 'rgba(0,0,0,.15)',
    borderBottomWidth: Platform.select({ ios: StyleSheet.hairlineWidth, android: 0 }),
    elevation: 4,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    height: Platform.select({ ios: 44, android: 56 }),
  },
  title: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    marginHorizontal: 16,
    marginRight: Platform.select({ ios: 44, android: 0 }),
  },
  titleText: {
    flex: 1,
    fontSize: 18,
    fontWeight: '500',
    color: 'rgba(0,0,0,.9)',
    textAlign: Platform.select({ ios: 'center', android: 'left' }),
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonImage: {
    height: 24,
    width: 24,
    margin: Platform.select({ ios: 10, android: 16 }),
    resizeMode: 'contain',
  },
})