Documentation about the use of react-native-safe-area-context

[jcubic]

Ask your Question

It seems that in documentation there are no information what to do after installing react-native-safe-area-context. I would expect that you need to import it in your code and use it.

Getting started guide only show that you need to install but no mention where to use it.

[Alanmc021]

good question!

[jcubic]

This is the code I used:

import { View, StyleSheet } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
import {
  PaperProvider,
  MD3DarkTheme,
  useTheme,
  Text
} from 'react-native-paper';

function App() {
  const theme = useTheme();
  const backgroundColor = theme.colors.background
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={[{ backgroundColor }, styles.containers]}> 
        <Text>React Native Paper</Text>
      </View>
    </SafeAreaView>
  );
}

export default function Main() {
  const { theme } = useMaterial3Theme();
  return (
    <SafeAreaProvider>
      <PaperProvider theme={{ ...MD3DarkTheme, colors: theme.dark }}>
        <App />
      </PaperProvider>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  containers: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

I can create a PR with updated docs. Not sure how much should I leave out for getting started guide.

[seb-zabielski]

Hey @jcubic
Can you check what happens if you just install the library and do nothing else?
As far as I know, there is no need to do anything (unless you want some custom configuration), because SafeAreaProvider is initialized in PaperProvider
Here is the link to the PaperProvider implementation https://github.com/callstack/react-native-paper/blob/main/src/core/PaperProvider.tsx

[jcubic]

Oh, ok. So this should be written in docs. If Provider is not needed, then you only need to show how the App component should look like:

import { View, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Text } from 'react-native-paper';

function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}> 
        <Text>React Native Paper</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

This should show how to get started and show familiar React Native elements.

[seb-zabielski]

Yes, I agree with you, this might help new users

[Wurushu]

Forgive me if I ask a stupid question.
Why is there a need to install react-native-safe-area-context manually, even though it is already dependency of react-native-paper and it is exactly a part of PaperProvider that we can't change it?

PaperProvider.tsx

const PaperProvider = (props: Props) => {
  // ...
  return (
    <SafeAreaProviderCompat>
      <PortalHost>
         {/* ... */}
      </PortalHost>
    </SafeAreaProviderCompat>
);

SafeAreaProviderCompat.tsx

import {
  initialWindowMetrics,
  SafeAreaInsetsContext,
  SafeAreaProvider,
} from 'react-native-safe-area-context';

export default function SafeAreaProviderCompat({ children, style }: Props) {
  return (
    <SafeAreaInsetsContext.Consumer>
        {/* ... */}
          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
            {children}
          </SafeAreaProvider>
        {/* ... */}
    </SafeAreaInsetsContext.Consumer>
  );
}
```