SafeAreaView ref generates a Typescript error-CodePudding

I'm getting a stragne error in TypeScript SafeAreaView component. I crated other refs for WebView and it doesn't fail, only seems to fail when assigned to the SafeAreaView component.

import { useRef, MutableRefObject } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
...
...
const topSafeAreaViewRef = useRef(null);
...
...
<SafeAreaView ref={topSafeAreaViewRef} style={styles.container} edges={['top', 'right', 'left']} >

TS2322: Type '{ children: Element; ref: MutableRefObject; style: { flex: number; backgroundColor: any; }; edges: ("top" | "right" | "left")[]; }' is not assignable to type 'IntrinsicAttributes & ViewProps & { children?: ReactNode; mode?: "padding" | "margin" | undefined; edges?: readonly Edge[] | undefined; }'. Property 'ref' does not exist on type 'IntrinsicAttributes & ViewProps & { children?: ReactNode; mode?: "padding" | "margin" | undefined; edges?: readonly Edge[] | undefined; }'.

I need ref because I need to set setNativeProps on an external function

const handleOnLoadEnd = (
    syntheticEvent: WebViewNavigationEvent | WebViewErrorEvent,
    topSafeAreaViewRef: MutableRefObject<any>,
) => {
  topSafeAreaViewRef.current.setNativeProps({
    style:{
      backgroundColor: Constants?.manifest?.extra?.webViewBackground,
    }
  });

};

CodePudding user response：

The react-native-safe-area-context's SafeAreaView component doesn't support ref prop.

If you need the ref to calculate width, height, etc., you can try a workaround like this (Untested):

import { useRef } from 'react';
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function App() {
  const ref = useRef();
  const insets = useSafeAreaInsets();

  return (
    <View
      ref={ref}
      style={{
        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingBottom: insets.bottom,
        paddingRight: insets.right,
      }}
    />
  );
}

CodePudding user response：

SafeAreaView is the preferred way to consume insets. This is a regular View with insets applied as extra padding or margin. It offers better performance by applying insets natively and avoids flickers that can happen with the other JS based consumers.

SafeAreaView is a regular View component with the safe area insets applied as padding or margin.

Padding or margin styles are added to the insets, for example style={{paddingTop: 10}} on a SafeAreaView that has insets of 20 will result in a top padding of 30.

Example:

import { SafeAreaView } from 'react-native-safe-area-context';

function SomeComponent() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
      <View style={{ flex: 1, backgroundColor: 'blue' }} />
    </SafeAreaView>
  );
}

Edges:

Optional, array of top, right, bottom, and left. Defaults to all.

Sets the edges to apply the safe area insets to.

For example if you don't want insets to apply to the top edge because the view does not touch the top of the screen you can use:

<SafeAreaView edges={['right', 'bottom', 'left']} />

For further Details or Documentation you can check Here

You should remove useRef() because useRef is not Sported in SafeAreaView.