You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

BackButton.native.js 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. // @flow
  2. import React, { Component } from 'react';
  3. import { TouchableOpacity } from 'react-native';
  4. import styles from './styles';
  5. import { Icon } from '../../base/font-icons';
  6. import { Platform } from '../../base/react';
  7. /**
  8. * The icon glyph to be used on a specific platform.
  9. */
  10. const BACK_ICON = Platform.OS === 'android' ? 'arrow_back' : 'navigate_before';
  11. /**
  12. * The type of the React {@code Component} props of {@link BackButton}
  13. */
  14. type Props = {
  15. /**
  16. * The action to be performed when the button is pressed.
  17. */
  18. onPress: Function,
  19. /**
  20. * An external style object passed to the component.
  21. */
  22. style: Object
  23. };
  24. /**
  25. * A component rendering a back button that looks native on both platforms.
  26. */
  27. export default class BackButton extends Component<Props> {
  28. /**
  29. * Implements React's {@link Component#render()}, renders the button.
  30. *
  31. * @inheritdoc
  32. * @returns {ReactElement}
  33. */
  34. render() {
  35. return (
  36. <TouchableOpacity
  37. accessibilityLabel = { 'Back' }
  38. onPress = { this.props.onPress }>
  39. <Icon
  40. name = { BACK_ICON }
  41. style = { [
  42. styles.backIcon,
  43. this.props.style
  44. ] } />
  45. </TouchableOpacity>
  46. );
  47. }
  48. }