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