Top-Left of Storybook Navigator overlaps with the Notification bar of Android Emulator

Question

I am creating a storybook documentation of my custom App Components in 'react-native'.

The problem is, the top left of navigator is overlapping with the notification bar of android.

Although I can fix the stories itself by margins and all but the navigator seems to have no fix. I tried using SafeAreaView from react-native but it doesn't seem to fix it.

I have seen some similar issues like this but they are for app code. Can anyone point out a fix for Storybook?

I am also attaching screenshot of the problem and the code where I am looking for a fix.

Screenshot

Code:

import * as Font from 'expo-font'
import AppLoading from 'expo-app-loading'
import React, { useState } from 'react';
import Storybook from './storybook'
import { registerRootComponent } from 'expo';
import { SafeAreaView ,StyleSheet} from 'react-native';

const fetchFonts=()=>{
    return Font.loadAsync({

      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
      'open-sans': require('./assets/fonts/OpenSans-Regular.ttf')
    });
  };
 
  

function App(props) {
  const [dataLoaded,setDataLoaded] =useState(false);
    console.log('Data is Loadinggg...',dataLoaded)
  if(!dataLoaded){
    return (
      <AppLoading startAsync={fetchFonts} onFinish={()=> setDataLoaded(true)} onError={(err)=>{console.log(err)}}/> // donot proceed further until this is true -> render nothing
    );
  }
  else{
    return <SafeAreaView style= {styles.container} ><Storybook {...props}/></SafeAreaView>
  }
}
export default registerRootComponent(App);
const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

In place of <SafeAreaView></SafeAreaView> I am looking for a fix. Can someone help?

Kartikey · Accepted Answer · 2021-06-23T16:28:24.213

As the Docs says,

SafeAreaView is currently only applicable to iOS devices with iOS version 11 or later.

So what you can do is,

OPTION 1

import { View, StyleSheet, StatusBar } from 'react-native'; // At the top

Replace your return to this

return (
  <View style={styles.container}>
    <Storybook {...props} />
  </View>
);

And your stylesheet to this

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight // This wil give proper padding at the top
  },
});

OPTION 2

import { StyleSheet, StatusBar, Platform, SafeAreaView } from 'react-native';

Your return statement will be

return <SafeAreaView style= {styles.container} ><Storybook {...props}/></SafeAreaView>

and your stylesheet will be like this

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
  },
});

Option 1 worked, wrapping around with view was a good idea and then marginTop StatusBar Height, it is platform independent. Thanks a lot! — Ritika Gupta, Jun 23 '21 at 18:57
Hi, Do also know the reason why the left pane in web version of storybook keeps on loading infinite? — Ritika Gupta, Jun 23 '21 at 18:59

Top-Left of Storybook Navigator overlaps with the Notification bar of Android Emulator

1 Answers1