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>
