React-native-slider: thumbImage isn't showing up on Android builds

[pdandradeb]

Environment

Expo CLI 3.27.10 environment info:
System:
OS: macOS Mojave 10.14.6
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
npm: 6.14.8 - ~/.nvm/versions/node/v12.18.2/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.3, 30.0.0
System Images: android-28 | Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 11.3.1/11C505 - /usr/bin/xcodebuild
npmPackages:
expo: ~39.0.2 => 39.0.3
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.14
npmGlobalPackages:
expo-cli: 3.27.10
Expo Workflow: managed

Description

It looks like that this issue is not new (#119 #114 #125).

It works fine on both iOS Simulator and Android physical devices during development. When I build the App, it won't show up.

I've tried many different things so far without success:

• Preloading the images with <AppLoading />;
• Using images without @2x / @3x;
• Defining Slider size with style={{ width: , height: }}

Reproducible Demo

Here's a sample repo:

https://github.com/pdandradeb/expo-slider/

Or follow the steps below:

1. expo init expo-slider-test
2. expo install @react-native-community/slider
3. update App.tsx to use Slider (below)
4. expo build:android -t apk

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import Slider from '@react-native-community/slider';

const thumb = require('./assets/drag-button.png');

export default function App() {
  return (
    <View style={styles.container}>
      {/* placing image above the slider just to prove that it exists */}
      <Image source={thumb} />
      <Slider
        style={{ width: '100%' }}
        thumbImage={thumb}
        minimumValue={0}
        maximumValue={100}
        step={1}
        value={50}
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[ozanhonamlioglu]

Yep, thumb image don't show up.

[SofianeToumert]

Same here, Thumb image only showing up on iOS. Using last version 3.0.3

[tomsdob]

Same issue here.

[zenabus]

I have the same issue, the thumb image is showing in development but not showing after the build.

[mosoakinyemi]

To solve this issue, kindly remove this line from your app.json file

    "assetBundlePatterns": [
      "**/*"
    ],

You can check here and here for more information