AppIntroSlider returns a white screen

[mateusnunesnunes]

I had a problem here in AppIntroSlider, its returns a white screen, I already set data as slides but it doesn't works. Here is my code:

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

export default class IntroSlider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slides : [ 
        {
            key: 1,
            title: 'Title 1',
            text: 'Description.\nSay something cool',
            image: require('./../../src/assets/abertura-1.png'),
            backgroundColor: '#59b2ab',
          },
        {
            key: 2,
            title: 'Title 1',
            text: 'Description.\nSay something cool',
            image: require('./../../src/assets/abertura-2.png'),
            backgroundColor: '#59b2ab',
          },
        {
            key: 3,
            title: 'Title 1',
            text: 'Description.\nSay something cool',
            image: require('./../../src/assets/abertura-3.png'),
            backgroundColor: '#59b2ab',
          }
      ],
    };
  }

  _renderItem = ({ item }) => {
    return (
      <View >
        <Text >{item.title}</Text>
        <Image source={item.image} />
        <Text >{item.text}</Text>
      </View>
    );
  }

  render() {
    return (
      <View>
        <AppIntroSlider renderItem={this._renderItem} data={this.state.slides} keyExtractor={this._keyExtractor} />
      </View>
    );
  }
}

[sainiankit]

Seems like the View wrapping the AppIntroSlider Component must have height defined in its style.

<View style={{ height: '100%' }}>
        <AppIntroSlider renderItem={this._renderItem} data={this.state.slides} keyExtractor={this._keyExtractor} />
</View>

[jingeekim9]

You need to add the background color to the View in _renderItem.

So the _renderItem function will become:

_renderItem = ({ item }) => { return ( <View style={{backgroundColor: item.backgroundColor}}> ... ); }

[borgogelli]

👍

[Jacse]

Closing since it seems answered.