Not support iPhone 14

[ryskin]

There are virtual "notch"

[samuelbeaulieu]

I think this PR (or this one) needs to be merged before the fix can be applied in this package.

[lucasferreira]

Hi @samuelbeaulieu you're right on that. We rely on this external lib to calculate status bar height...

If you guys could ask there also to adapt this, we will be safe here too.

[swey]

The approach to manually adjust the padding based on isIPhoneX is not flexible anyway.

The better approach is using useSafeAreaInsets/SafeAreaInsetsContext.Consumer to determine the needed extra padding.

I have something like:

import React from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context/src/SafeAreaContext';
import { EdgeInsets } from 'react-native-safe-area-context/src/SafeArea.types';
import FlashMessage, { FlashMessageProps, Position } from 'react-native-flash-message';

const SafeAreaFlashMessage = (props: FlashMessageProps, ref: any) => {
	const insets: EdgeInsets = useSafeAreaInsets();

	let position: Position = props.position ?? 'top';

	if (props.position === 'top') {
		position = { top: insets.top };
	} else if (props.position === 'bottom') {
		position = { bottom: insets.bottom };
	}

	return <FlashMessage ref={ref} {...props} position={position} />;
};

export default React.forwardRef(SafeAreaFlashMessage);

(Please note that I use it with floating: true)

[hbiede]

I agree that converting to react-native-safe-area-context seems like the best move here. The developer of react-native-iphone-x-helper themselves even says to make the move because that package is dead.

[lucasferreira]

Hi guys @hbiede @swey @samuelbeaulieu and @ryskin,

For now we had changed to a fork of original react-native-iphone-x-helper called react-native-iphone-screen-helper that has the same API and nothing will changed for usa internally.

As I could look into react-native-iphone-screen-helper code their supports iPhone 14 so by now this problem are solved (I guess).

In a near future we will look into changed everything to use react-native-safe-area-context because it's seems to be more robust for this measures of notch devices.

Could you help us to test this currently new version?

[hbiede]

Hi guys @hbiede @swey @samuelbeaulieu and @ryskin,

For now we had changed to a fork of original react-native-iphone-x-helper called react-native-iphone-screen-helper that has the same API and nothing will changed for usa internally.

As I could look into react-native-iphone-screen-helper code their supports iPhone 14 so by now this problem are solved (I guess).

In a near future we will look into changed everything to use react-native-safe-area-context because it's seems to be more robust for this measures of notch devices.

Could you help us to test this currently new version?

We switched to passing a statusBarHeight prop equal to useSafeAreaInsets().top with showMessage and that works as expected

[dkjeune]

Hi,
The version 4.0.0 seems to solve the problem.
How to install it ?
on NPM, the last version is 0.3.1

[lucasferreira]

Hi @dkjeune that's was my bad, I really forgot to publish on npm registry.

Now it's seems to be OK, could try to update again?

[dkjeune]

Hi @dkjeune that's was my bad, I really forgot to publish on npm registry.

Now it's seems to be OK, could try to update again?

yes it work fine, thanks

[johnny-washswat]

I solved this issue by adding

import {getStatusBarHeight} from 'react-native-iphone-x-helper';
Code:
        <FlashMessage
                position={'top'}
                statusBarHeight={statusHeight + 20}
              />

[samuelbeaulieu]

@johnny-washswat you shouldn't add a static value to adjust the status bar height, it will not work properly on other devices. You should use the latest version of this library instead which is already fixed for the iPhone 14 pro.