Search code examples
react-nativeaws-amplifyaws-appsync

React-Native assets not loading - errors not clear

I am using React-native along with AWS Amplify and AWS AppSync with GraphQL. When I load my app in the ios simulator with the command npx react-native ios the app loads, but it is not loading the assets.

If I inspect and click on something like App or Navigator I get the following errors. I'm not sure if they are related. I had this working and without changing any code this started happening.

Here is an example of how I'm trying to load an asset:

<TouchableOpacity style={styles.write} onPress={() => this.toggleWritePopup()}> <Image source={require('../assets/writeicon.png')} />

error in simulator from inspect element

Edit: Here is the output for react-native info

System:
OS: macOS 10.15.6
CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Memory: 6.88 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
 Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
  Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 12.0/12A7209 - /usr/bin/xcodebuild
Languages:
Java: 12.0.1 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.9.0 => 16.13.1
react-native: ^0.62.2 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found

Edit: This is another section of code where this png is also not loading. So even with the dimensions it does not work:

 <ImageBackground
      source={require('../assets/blue_ocean.png')}
      style={{width: '100%', height: '100%'}}>
Solution

  • Ok I finally figured it out. It was the iOS version that was running in the simulator. For whatever reason my code doesn't seem to work for iOS 14.0. If I set it to a earlier version my assets load with no issue.