説明なし

index.tsx 1.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import * as React from 'react';
  2. import { StyleSheet } from 'react-native';
  3. import { EdgeInsets, InsetChangedEvent } from './SafeArea.types';
  4. import NativeSafeAreaView from './NativeSafeAreaView';
  5. const SafeAreaContext = React.createContext<EdgeInsets | null>(null);
  6. export interface SafeAreaViewProps {
  7. children?: React.ReactNode;
  8. }
  9. export function SafeAreaProvider({ children }: SafeAreaViewProps) {
  10. const [insets, setInsets] = React.useState<EdgeInsets | null>(null);
  11. const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
  12. setInsets(event.nativeEvent.insets);
  13. }, []);
  14. return (
  15. <NativeSafeAreaView style={styles.fill} onInsetsChange={onInsetsChange}>
  16. {insets !== null ? (
  17. <SafeAreaContext.Provider value={insets}>
  18. {children}
  19. </SafeAreaContext.Provider>
  20. ) : null}
  21. </NativeSafeAreaView>
  22. );
  23. }
  24. const styles = StyleSheet.create({
  25. fill: { flex: 1 },
  26. });
  27. export const SafeAreaConsumer = SafeAreaContext.Consumer;
  28. export function useSafeArea(): EdgeInsets {
  29. const safeArea = React.useContext(SafeAreaContext);
  30. if (safeArea == null) {
  31. throw new Error(
  32. 'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
  33. );
  34. }
  35. return safeArea;
  36. }
  37. export { EdgeInsets };