No Description

App.tsx 1.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import * as React from 'react';
  2. import { View, Text, StatusBar } from 'react-native';
  3. // import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context'; in your app.
  4. import {
  5. SafeAreaProvider,
  6. useSafeArea,
  7. initialWindowSafeAreaInsets,
  8. } from '../src';
  9. const Screen = () => {
  10. const insets = useSafeArea();
  11. return (
  12. <>
  13. <StatusBar
  14. barStyle="dark-content"
  15. translucent
  16. backgroundColor="transparent"
  17. />
  18. <View
  19. style={{
  20. flex: 1,
  21. backgroundColor: 'red',
  22. paddingTop: insets.top,
  23. paddingLeft: insets.left,
  24. paddingBottom: insets.bottom,
  25. paddingRight: insets.right,
  26. }}
  27. >
  28. <View
  29. style={{
  30. flex: 1,
  31. backgroundColor: 'white',
  32. alignItems: 'center',
  33. justifyContent: 'center',
  34. }}
  35. >
  36. <Text>Insets: {JSON.stringify(insets, null, 2)}</Text>
  37. <Text>
  38. Initial insets:{' '}
  39. {JSON.stringify(initialWindowSafeAreaInsets, null, 2)}
  40. </Text>
  41. </View>
  42. </View>
  43. </>
  44. );
  45. };
  46. export default function App() {
  47. return (
  48. <SafeAreaProvider>
  49. <Screen />
  50. </SafeAreaProvider>
  51. );
  52. }