Background image not displayed when running on iPhone, but works on iPad (multiple real devices)

[chriswayg]

I am currently using react-native-external-display for an app and when testing it on physical devices it behaves differently than in the simulators/emulators. On iPad 4 (iOS 10 - 32 bit) and iPad mini 2 (iOS 12 - 64 bit) the app basically works as expected including showing the background image behind the text.

But on an iPhone 6 (iOS 12) and an iPhone XS Max (iOS 14) the background image is not shown at all. It shows the text only. - I can provide additional details if needed for tracking down the cause of the issue. The code below covers just the relevant portions:

import Markdown, {MarkdownIt} from 'react-native-markdown-display';
import ExternalDisplay, {
  getScreens,
  useScreenSize,
} from 'react-native-external-display';

// based on ScreenSize example in
// https://github.com/mybigday/react-native-external-display/blob/master/packages/RNExternalDisplayExample/js/ScreenSize.js
const [info, setInfo] = useState(getScreens());
const [on, setOn] = useState(true);
const [mount, setMount] = useState(true);

const InMarkdown = () => {
  const {id, width, height} = useScreenSize() || {};
  const scalingBase = 1024;
  const fontScale = width / scalingBase;
  return (
    <Markdown
      markdownit={MarkdownIt({breaks: true})}
      style={{
        paragraph: {
          textAlign: 'center',
          marginTop: 10,
          marginBottom: 10,
          justifyContent: 'center',
          paddingHorizontal: 50,
        },
        text: {
          fontSize: 55 * fontScale,
        },
      }}>
      {paragraphData[selectedId].lyricsParagraph}
    </Markdown>
  );
};
// example content of paragraphData[selectedId].lyricsParagraph:
//   `Through many dangers, toils, and snares
//   I have already come.
//   'Tis Grace that brought me safe thus far
//   And Grace will lead me home.`

// ...
// more code
// ...

// THIS IS THE MAIN VIEW
return (
  <View style={styles.container}>
    {mount && (
      <ExternalDisplay
        mainScreenStyle={{flex: 1}}
        /* fallbackInMainScreen */
        screen={on && Object.keys(info)[0]}
        onScreenConnect={setInfo}
        onScreenDisconnect={setInfo}>
        <View style={styles.mdContainer}>
          <Image
            source={require('../assets/worship-background-cross.png')}
            style={styles.image}
          />
          <InMarkdown />
        </View>
      </ExternalDisplay>
    )}
    <FlatList
      data={paragraphData}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      extraData={selectedId}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mdContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    backgroundColor: '#eee',
  },
  image: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    opacity: 0.8,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
});

SYSTEM INFO:

yarn react-native info
yarn run v1.22.5

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
    Memory: 241.48 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /var/folders/tz/bqv7md4d0_l85kb7bpxvshdr0000gq/T/yarn--1623332200406-0.09626359247705052/node
    Yarn: 1.22.5 - /var/folders/tz/bqv7md4d0_l85kb7bpxvshdr0000gq/T/yarn--1623332200406-0.09626359247705052/yarn
    npm: 6.14.13 - ~/.nodenv/versions/14.17.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-23 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7322048
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
    Python: 3.6.8 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found