how to use images in full background?

how to set image in the background as a full image? I tried to use renderItem method for that, but it’s showing a blank screen.

------- Code ----------

import intro1 from '../../assets/images/intro1.png';
import intro2 from '../../assets/images/intro2.png';
import intro3 from '../../assets/images/intro3.png';
import intro4 from '../../assets/images/intro4.png';
import intro5 from '../../assets/images/intro5.png';
import logo from '../../assets/images/logo.png';


const styles = StyleSheet.create({
  mainContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  image: {
    width: 320,
    height: 320,
  },
  text: {
    color: 'rgba(255, 255, 255, 0.8)',
    backgroundColor: 'transparent',
    textAlign: 'center',
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 22,
    color: 'white',
    backgroundColor: 'transparent',
    textAlign: 'center',
    marginBottom: 16,
  },
});

const slides = [
  {
    key: 'somethun',
    title: 'Quick setup, good defaults',
    text:
      'React-native-app-intro-slider is easy to setup with a small footprint and no dependencies. And it comes with good default layouts!',
    icon: logo,
    backgroundImage: intro1,
  },
  {
    key: 'somethun1',
    title: 'Super customizable',
    text:
      'The component is also super customizable, so you can adapt it to cover your needs and wants.',
    icon: logo,
    backgroundImage: intro2,
  },
  {
    key: 'somethun2',
    title: 'No need to buy me beer',
    text: 'Usage is all free',
    icon: logo,
    backgroundImage: intro3,
  },
];

export default class App extends React.Component {
  _renderItem = props => (
    <ImageBackground
      style={[
        styles.mainContent,
        {
          width:'100%',
          height: '100%',
        },
      ]}
     source={props.backgroundImage}
    >
      <Image
        source={props.icon}
        style={styles.image}
      />
      <View>
        <Text style={styles.title}>{props.title}</Text>
        <Text style={styles.text}>{props.text}</Text>
      </View>
    </ImageBackground>
  );

  render() {
    return (
       <AppIntroSlider
           slides={slides}
           renderItem={this._renderItem}
          bottomButton />
     );
  }
}

Hmm… Render function is not empty, is not showing properly. Just updating the code of render function.

[Jacse]

Whoops my bad. Try this:

_renderItem = ({ item, dimensions }) => (
    <ImageBackground
      source={item.backgroundImage}
      style={[
        styles.mainContent,
        dimensions
      ]}>
      {item.title}
      {item.text}
    </ImageBackground>
  );

[creative-dev-lab]

Whoops my bad. Try this:

_renderItem = ({ item, dimensions }) => (
    <ImageBackground
      source={item.backgroundImage}
      style={[
        styles.mainContent,
        dimensions
      ]}>
      {item.title}
      {item.text}
    </ImageBackground>
  );

Wow Awesome! It’s working now! Thank you so much, @Jacse Appreciated!