Can't Rendering Anything in the Slides?

[anastely]

Hey, i have some issue when i use the example in the Repo,

so it's not Rendering anything else a "Button"

https://i.imgur.com/XWBa8Mr.png

Code

//import liraries
import React, { Component } from "react";
import { View, Text, StyleSheet, Image, Dimensions } from "react-native";
import AppIntroSlider from "react-native-app-intro-slider";
const { width, height } = Dimensions.get("window");
const styles = StyleSheet.create({
  mainContent: {
    flex: 1,
    alignItems: "center",
    justifyContent: "space-around"
  },
  image: {
    width: width,
    height: height
  },
  text: {
    // color: "rgba(255, 255, 255, 0.8)",
    color: "#00f",
    // backgroundColor: "transparent",
    textAlign: "center",
    paddingHorizontal: 16
  },
  title: {
    fontSize: 22,
    color: "#000",
    // 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!",
    image: require("../assets/1.png"),
    backgroundColor: "#febe29"
  },
  {
    key: "somethun1",
    title: "Super customizable",
    text:
      "The component is also super customizable, so you can adapt it to cover your needs and wants.",
    image: require("../assets/2.png"),
    backgroundColor: "#59b2ab"
  },
  {
    key: "somethun2",
    title: "No need to buy me beer",
    text: "Usage is all free",
    image: require("../assets/3.png"),
    backgroundColor: "#22bcb5"
  }
];
// create a component
class OnBoarding extends Component {
  constructor() {
    super();
    this.state = {
      showRealApp: false
    };
  }
  // componentDidMount() {
  //   firebase.auth().onAuthStateChanged(user => {
  //     if (user) {
  //       // User is signed in.
  //       this.props.navigation.navigate("Home");
  //     } else {
  //       // No user is signed in.
  //       setTimeout(() => {
  //         this.props.navigation.navigate("SignUp");
  //       }, 5000);
  //     }
  //   });
  // }
  _renderItem = item => {
    return (
      <View style={styles.mainContent}>
        <Text>Hello</Text>
        {/* <Image
          resizeMode="center"
          style={styles.image}
          source={require("../assets/2.png")}
        /> */}
        <Text style={styles.title}>{item.title}</Text>
        <Image style={styles.image} source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  };
  _onDone = () => {
    this.setState({ showRealApp: true });
  };
  render() {
    return (
      <AppIntroSlider
        style={{ backgroundColor: "#fff" }}
        slides={slides}
        renderItem={this._renderItem}
        onDone={this._onDone}
        showPrevButton
        showSkipButton
      />
    );
  }
}

//make this component available to the app
export default OnBoarding;

[Jacse]

Oops. Looks like the readme and examples haven't been properly updated for version 3.0.0. You would need to unpack the arguments for your renderItem-function like so:

_renderItem = ({ item }) => {
    return (
      <View style={styles.mainContent}>
        <Text>Hello</Text>
        {/* <Image
          resizeMode="center"
          style={styles.image}
          source={require("../assets/2.png")}
        /> */}
        <Text style={styles.title}>{item.title}</Text>
        <Image style={styles.image} source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  };

[anastely]

Yeah, That's work, and rendering everything but backgroundColor in every slide couldn't work :/

[Jacse]

That's because you didn't specify a backgroundColor anywhere in your render function. I expect you would probably want to do something like

_renderItem = ({ item }) => {
    return (
      <View style={[styles.mainContent, { backgroundColor: item.backgroundColor }]}>
        <Text>Hello</Text>
        {/* <Image
          resizeMode="center"
          style={styles.image}
          source={require("../assets/2.png")}
        /> */}
        <Text style={styles.title}>{item.title}</Text>
        <Image style={styles.image} source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  };