React - SafeAreaView not working for iPhone

zuZuu 0
Viewed 12

My App has no color left and right from the notch, when using iPhone horizontal and when I refresh the site (move down then there is no color over the navbar).

I tried to fix this by

Anyone knows how to make area around notch same color as navbar and why SafeAreaView not working for me?

import { SafeAreaView } from 'react-native';


function App() {
  return (
    <SafeAreaView>
      <Router>
        <ScrollToTop />
        <Header />
        <Pages />
        <Footer />
      </Router>
    </SafeAreaView>
  );
}

export default App;
iphone reactjs javascript
1 Answers

use the react-native-safe-area-context library like this :

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

function App() {
    return (
        <SafeAreaView>
            <Router>
                <ScrollToTop />
                <Header />
                <Pages />
                <Footer />
            </Router>
        </SafeAreaView>
    );
}

export default App;
toutpuissantged0
Related