MainComponent.tsx is always visible on iPhone 5

[damian-balas]

Bug report

Environment

OS: macOS 10.15.3

tested device: iPhone 5 iOS 10.3.1 Simulator

Node: 12.16.1

npm: 6.13.4

react: 16.9.0

react-native: 0.61.5

How do I use Notifier

I wrap my AppNavigator with NotifierWrapper.

const root = () => (
  <SafeAreaProvider>
    <StatusBar barStyle="dark-content" translucent />
    {!!i18n.isInitialized && (
      <NotifierWrapper>
        <AppNavigator
          ref={navigatorRef => {
            setTopLevelNavigator(navigatorRef);
          }}
        />
      </NotifierWrapper>
    )}
  </SafeAreaProvider>
);

I have made an util function where I call

Notifier.showNotification({
      title: text,
      description: desc,
      Component: Notification,
      duration: 2500,
      showAnimationDuration: 400,
      showEasing: Easing.quad,
    });

Expected Behavior

Notifier should not be visible until I call showNotification()

How to fix it

The simplest solution I found is removing SafeAreaView from MainComponent.tsx You should probably use some other SafeAreaView. I'm using it from: react-native-safe-area-context and it's working as expected.

   <View style={s.container}>
      {!!imageSource && <Image style={s.image} source={imageSource} />}
      <View style={s.content}>
        {!!title && <Text style={s.title}>{title}</Text>}
        {!!description && <Text style={s.description}>{description}</Text>}
      </View>
    </View>

Actual Behavior

MainComponent.tsx is always visible. After I call showNotification(), MainComponent.tsx disappears and it's working as expected.

[seniv]

Hello @damian-balas, thank you for the detailed report! I'm going to find a solution to the issue.

[seniv]

I've tested it on different versions of iOS and it seems like it's related to a problem with SafeAreaView on iOS 10.* (maybe below too). iOS versions 11+ works correctly.

Removing SafeAreaView is not a solution because without SafeAreaView it will be broken on iPhone 10 and above. I think that the best solution is to remove SafeAreaView only on iOS version 10. I will release the fix soon

[damian-balas]

I've tested it on different versions of iOS and it seems like it's related to a problem with SafeAreaView on iOS 10.* (maybe below too). iOS versions 11+ works correctly.

Removing SafeAreaView is not a solution because without SafeAreaView it will be broken on iPhone 10 and above. I think that the best solution is to remove SafeAreaView only on iOS version 10. I will release the fix soon

Couldn't you just use SafeAreaView from react-native-safe-area-context? It worked for me. Or you could add some props like disableSafeArea and marginTop, so we can manualy change the position.

Good luck and thanks :smile:

[seniv]

I would use react-native-safe-area-context, but I don't want to add any new Peer dependency to the library.

[seniv]

I've released v0.2.2 with the fix. Also, add the ability to pass ContainerComponent to MainComponent through componentProps which will replace SafeAreaView container. E.g:

Notifier.showNotification({
  title: 'title',
  componentProps: {
    ContainerComponent: ({ children }) => <View style={{}}>{children}</View>,
  }
});

@damian-balas can you check that the problem completely fixed?

[damian-balas]

@seniv Awesome! :) Thanks for the fix. It's working :)