react-native some images are loaded, other not

Enviroment

• react-native 0.60

What happens:

I have an component, which create kind of Image-Buttons with <ImageBackground>.

If I bundle the App as debugRelease it works like a charm, and all Images of each Button are shown. If I bundle the App as releaseBundle there are missing 4 of 7 Images (all time the same images).

What I've tried

So Button 1 don't work, Button 2 - 4 work, and Button 5 - 7 even don't work. To be sure, that the Image-File isn't corrupted, I've copied the Image of Button 2 with a new name, and replace Image 1 by this one. The Image was not shown anyway!

So I've started Android Studio and opened the apk in debug-APK and release-APS to check the files inside. Here is the result:

Do you have any clue, why only some of the Image-Files are not bundled into the Release-APK in the right way (even if for example the file spenden.jpg is a copy of the working kontakt.jpg file like described above)?

And here is the way I've implemented it:

...

const getHomeButtonList = (data, dropdowns) => [
  {
    id: 'offer',
    bgImage: { uri: 'erwin' },
    btnText: 'ANGEBOTE \n DER SKG',
    navigateTo: 'Offer',
  },
  {
    id: 'contact',
    bgImage: { uri: 'kontakt' },
    btnText: 'KONTAKTE',
    navigateTo: 'Contact',
    data: {
      data,
      dropdowns,
    },
  },
  {
    id: 'videos',
    bgImage: { uri: 'videos' },
    btnText: 'VIDEOS',
    navigateTo: 'VideoList',
  },
  {
    id: 'innovationen',
    bgImage: { uri: 'innovationen' },
    btnText: 'INNOVATION IN MEDIZIN UND \nGESUNDHEITSWESEN',
    navigateTo: 'CategorizedPage',
    data: {
      headerTitle: 'Innovationen',
      headerImage: 'innovationen',
      data: data.innovations,
    },
  },
  {
    id: 'nebenwirkungen',
    bgImage: { uri: 'nebenwirkungen' },
    btnText: 'HILFE BEI NEBENWIRKUNGEN',
    navigateTo: 'CategorizedPage',
    data: {
      headerTitle: 'Nebenwirkungen',
      headerImage: 'nebenwirkungen',
      data: data.sideeffects,
    },
  },
  {
    id: 'beratung',
    bgImage: { uri: 'consultation' },
    btnText: 'BERATUNG UND BEGLEITUNG',
    navigateTo: 'CategorizedPage',
    data: {
      headerTitle: 'Beratung',
      headerImage: 'consultation',
      data: data.advice,
    },
  },
  {
    id: 'spenden',
    bgImage: { uri: 'spenden' },
    btnText: 'SPENDEN',
    navigateTo: 'Browser',
    navigateUrl: url.donateUrl,
  },

];
...

Grid = (props) => {
    const { columns, orientation } = this.state;
    return (
      <FlatList
        data={props}
        key={orientation}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={(orientation === 'portrait') ? [
            styles.btn,
            styles.btnFirst] : [landscape.btn, styles.btnFirst]}
          >
            <TouchableOpacity
              style={[styles.touchBtn, styles[item.id]]}
              onPress={() => this.pressImageButton(item)}
            >
              <ImageBackground
                resizeMode="cover"
                style={styles.imageBackground}
                source={item.bgImage}
              >
                <View style={styles.imageOverlay} />
                <Text style={[styles.btnText]}>
                  {item.btnText}
                </Text>
              </ImageBackground>
            </TouchableOpacity>
          </View>
        )}
        numColumns={columns}
      />
    );
  };

...

        <View style={(orientation === 'portrait')
          ? styles.btnContainer
          : landscape.btnContainer}
        >
          {this.Grid(getHomeButtonList(data, dropdowns))}
        </View>

I've figured out, that the cause of the Issue is shrinkResources true in build.gradle.

ProGuard don't recognize that I need those files. To check which resources are removed, if you have shrinkResources true enabled, check your <build-directory>/build/outputs/mapping/release/resources.txt.

In my case, there are entries like the following ones:

Skipped unused resource res/drawable/consultation.jpg: 55893 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/angebote.jpg: 71099 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/nebenwirkungen.jpg: 57250 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/redbox_top_border_background.xml: -1 bytes (replaced with small dummy file of size 104 bytes)
Skipped unused resource res/drawable/signet_sachsen.gif: 1925 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/spenden.jpg: 68376 bytes (replaced with small dummy file of size 0 bytes)

How to fix it

Create an File named keep.xml and put it in the directory /android/app/src/main/res/raw. (If directory raw didn't exist, create it.

Put this into the file:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
           tools:keep="@drawable/spenden,@drawable/angebote" />

IMPORTANT: Don't write the filetype like this: @drawable/spenden.jpg. This won't work like expected. But you can use wildcard for the filenames like this: @drawable/img_ as little workaround to keep all images by one command.

Sources of Information:

Troubleshooting shringResources

Customize which resources to keep