0

I tried exactly what is mentioned in react-native-safe-area-context I run the app in samsung android 9 and it was working as expected. But in my oppo device with android 8 insets were all 0. I'm using react native 0.61.

This is my root component.

import React from 'react';
import { StatusBar, Platform } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/es/integration/react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { store, persistor } from './common/StoreBuilder';
import Routes from './routes/index';


if (Platform.OS === 'android') StatusBar.setHidden(true);

const App = () => (

<Provider store={store}>
  <PersistGate persistor={persistor}>
  <SafeAreaProvider><Routes /></SafeAreaProvider>
  </PersistGate>
</Provider>

);

export default App;

This is my consumer, which is immediate child of above component.

<SafeAreaConsumer>
    {insets => {
      return  <View style={{
        flex: 1,
        paddingTop: insets.top,
        paddingLeft: insets.left,
        paddingBottom: insets.bottom,
        paddingRight: insets.right,
      }}>
        <Router>
          <Stack key="root" hideNavBar>
            ...
          </Stack>
        </Router>
        <MessageContainer />
      </View>
    }}

  </SafeAreaConsumer>
Lata Tiwari
  • 66
  • 6
  • 1
    Can you try it with another Android 8 or below device? If you do not have any, you can use Genymotion for that. It is working on my projects. – FreakyCoder Dec 20 '19 at 10:24
  • Was there anything additional needed ? Or did I miss any piece. Can you share your code ? – Lata Tiwari Dec 23 '19 at 07:29
  • https://github.com/WrathChaos/react-native-header-search-bar HeaderClassicSearchBar uses it :) You can check it out. – FreakyCoder Dec 23 '19 at 10:37
  • 1
    I figured out why behavior was different on two device. Here's a link to my solution: https://github.com/lata2694/RNSafeArea It is because of difference in android version below and above Android9. You may have a look at the readme file. – Lata Tiwari Jan 07 '20 at 03:26

0 Answers0