iOS - thumbImage crashes the app only on release: component, components, or pathExtension cannot be nil

[papigers]

Environment

info Fetching system and libraries information...
System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 317.93 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.6.0 - ~/.nvm/versions/node/v13.6.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.6.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.1 => 0.62.1 
  npmGlobalPackages:
    *react-native*: Not Found

Description

Setting thumbImage causes the app to crash on iOS release mode. I didn't test on android yet. In development the thumb image shows correctly and has no problem.
This is the exception I'm seeing on XCode:

[error][tid:main][RCTUIManager.m:1183] Exception thrown while executing UI block: *** -[NSURL URLByAppendingPathComponent:]: component, components, or pathExtension cannot be nil.

Reproducible Demo

this is a reusable slider component I'm using in my project:

import React from 'react';
import Slider from '@react-native-community/slider';
import {useThrottle} from 'use-throttle';
import useTheme from '../../hooks/useTheme';
import Box from './Box';

const thumbImage = require('shared/img/slider-thumb.png');

console.log('thumbImage', thumbImage);

const SliderInput = ({
  min,
  max,
  initialValue = min,
  onChange,
  label,
  step,
  ...props
}) => {
  const theme = useTheme();
  const initialValueRef = React.useRef(initialValue);
  const [innerValue, setInnerValue] = React.useState(initialValue);
  const throttledInnerValue = useThrottle(innerValue, 1000);

  React.useEffect(() => {
    onChange?.(throttledInnerValue);
  }, [onChange, throttledInnerValue]);

  return (
    <Box {...props}>
      <Slider
        minimumValue={min}
        maximumValue={max}
        step={step}
        value={initialValueRef.current}
        onValueChange={setInnerValue}
        onSlidingComplete={setInnerValue}
        minimumTrackTintColor={theme['color-primary-default']}
        maximumTrackTintColor={theme['color-off-white']}
        thumbImage={thumbImage}
      />
    </Box>
  );
};

export default SliderInput;

[papigers]

Nevermind, found out the issue was metro not including external assets in watchFolders, which causes the image to not load - which is what caused this exception probably.
For more info see facebook/metro#290

[EgorZotov]

@papigers I got similar problem only in production App too. I got custom metro config, but I never had problems with sources in the same folder with thumbImage (so assume metro configured properly). So i think that we can reopen this.