Header.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @flow strict-local
  8. * @format
  9. */
  10. 'use strict';
  11. import Colors from './Colors';
  12. import type {Node} from 'react';
  13. import {Text, StyleSheet, ImageBackground} from 'react-native';
  14. import React from 'react';
  15. const Header = (): Node => (
  16. <ImageBackground
  17. accessibilityRole={'image'}
  18. source={require('./logo.png')}
  19. style={styles.background}
  20. imageStyle={styles.logo}>
  21. <Text style={styles.text}>Welcome to React</Text>
  22. </ImageBackground>
  23. );
  24. const styles = StyleSheet.create({
  25. background: {
  26. paddingBottom: 40,
  27. paddingTop: 96,
  28. paddingHorizontal: 32,
  29. backgroundColor: Colors.lighter,
  30. },
  31. logo: {
  32. opacity: 0.2,
  33. overflow: 'visible',
  34. resizeMode: 'cover',
  35. /*
  36. * These negative margins allow the image to be offset similarly across screen sizes and component sizes.
  37. *
  38. * The source logo.png image is 512x512px, so as such, these margins attempt to be relative to the
  39. * source image's size.
  40. */
  41. marginLeft: -128,
  42. marginBottom: -192,
  43. },
  44. text: {
  45. fontSize: 40,
  46. fontWeight: '600',
  47. textAlign: 'center',
  48. color: Colors.black,
  49. },
  50. });
  51. export default Header;