backgroundColor for slides not working[Android]

[erhan355]

This property doesn't has an effect.I fixed as below.

const slides = [ { key: 1, backgroundColor: mainTheme.onBoardingScreen1Color, image: require('../../src/assets/onBoarding1.jpg'), title: strings.onBoardingScreen1Title, text: strings.onBoardingScreen1Subtitle, }, _renderItem = ({ item }) => { return ( <View style={[styles.slide, {backgroundColor: item.backgroundColor}]}> <Text style={styles.title}>{item.title}</Text> <Image source={item.image} /> <Text style={styles.text}>{item.text}</Text> </View> ); }

[Jacse]

Hi @erhan355 I think something went wrong when you tried posting the code?

[ShunyaWatanabe]

_renderItem = ({ item }) => {
    return (
      <View style={[styles.slide, {backgroundColor: item.backgroundColor}]}>
        <Text style={styles.title}>{item.title}</Text>
        <Image source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  }

[erhan355]

Hi @erhan355 I think something went wrong when you tried posting the code?

Yes some part of my answer was copied.I fixed it ,sorry for late reply

[Jacse]

Are you sure mainTheme.onBoardingScreen1Color is defined?

[erhan355]

Are you sure mainTheme.onBoardingScreen1Color is defined?

[erhan355]

Are you sure mainTheme.onBoardingScreen1Color is defined?

Yes it is defined.

[Jacse]

Hi @erhan355 is this still an issue for you?

[Stophface]

@Jacse I can confirm this. It does not work on iOS neither. Minimal example

import React from 'react';
import { View, Text, Image } from 'react-native';
import { StyleSheet } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';


const styles = StyleSheet.create({
    container: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
});

const slides = [
    {
        key: 'one',
        title: 'Title 1',
        text: 'Description.\nSay something cool',
        // image: require('./assets/1.jpg'),
        backgroundColor: 'red',
    },
    {
        key: 'two',
        title: 'Title 2',
        text: 'Other cool stuff',
        // image: require('./assets/2.jpg'),
        backgroundColor: 'green',
    },
    {
        key: 'three',
        title: 'Rocket guy',
        text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
        // image: require('./assets/3.jpg'),
        backgroundColor: 'pink',
    }
];

export default class App extends React.Component {
    _renderItem = ({ item }) => {
        return (
            <View
                style={styles.container}>
                <Text>{item.title}</Text>
                <Image source={item.image} />
                <Text>{item.text}</Text>
            </View>
        );
    }
    _onDone = () => {
        // User finished the introduction. Show real app through
        // navigation or simply by controlling state
    }
    render() {
        return <AppIntroSlider
            renderItem={this._renderItem}
            data={slides}
            onDone={this._onDone} />;
    }
}

However, the workaround from @ShunyaWatanabe works.