1
2npm install react-native-safe-area-context
3npx pod-install ios
4
5//add SafeAreaProvider to the app
6
7import { SafeAreaProvider } from 'react-native-safe-area-context';
8
9function App() {
10 return <SafeAreaProvider>...</SafeAreaProvider>;
11}
1
2Follow These Steps:
3
41. android/settings.gradle
5include ':react-native-safe-area-context'
6project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
7
82. android/app/build.gradle
9dependencies {
10 implementation project(':react-native-safe-area-context')
11 ...
12}
13
143. android/app/src/main/java/com/[APP_NAME]/MainApplication.java
15import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
16
174. android/app/src/main/java/com/[APP_NAME]/MainApplication.java (Add this code where the getPackages function exists)
18@Override
19protected List<ReactPackage> getPackages() {
20 return Arrays.asList(
21 ...
22 new MainReactPackage(),
23 new SafeAreaContextPackage()
24 );
25}
26
27OR if already a package is returned then this code
28
29@Override
30protected List<ReactPackage> getPackages() {
31 List<ReactPackage> packages = new PackageList(this).getPackages();
32 packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
33 ...
34 packages.add(new SafeAreaContextPackage());
35 return packages;
36}
37You can also get this for IOS https://github.com/th3rdwave/react-native-safe-area-context#linking-in-react-native--060-1
38
39