Warnings

[renancaraujo]

I've keep receiving those warnings:
Warning? Failed prop type: Invalid props.style key "font-family":"montserrat_light" ....
That style is only applied to an <Text /> inside Appintro's slide.

[flybayer]

Same, but for fontSize

[trevor-coleman]

Same -- it seems to be coming renderChild() method in AppIntro.js

renderChild = (children, pageIndex, index) => {
      const level = children.props.level || 0;
    const { transform } = this.getTransform(pageIndex, 10, level);
    const root = children.props.children;
    let nodes = children;
    if (Array.isArray(root)) {
      nodes = root.map((node, i) => this.renderChild(node, pageIndex, `${index}_${i}`));
    }
    let animatedChild = children;
    if (level !== 0) {
      animatedChild = (
        <Animated.View key={index} style={[children.props.style, transform]}>
          {nodes}
        </Animated.View>
      );
    } else {

//This is the line where the error happens:

      animatedChild = (
        <View key={index} style={children.props.style}>
          {nodes}
        </View>

      );
    }
    return animatedChild;
  }

// And Here's the render method for my component:

render() {
    return (
      <View>
        <StatusBar />
        <AppIntro>
          <View style={[styles.slide, { backgroundColor: '#fa931d' }]}>
            <View style={{}} level={10}>
              <Image source={require('../../assets/dunbar-logo.png')} />
              <Text style={styles.text}>Page 1</Text>
            </View>
            <View level={15}>
              <Text style={styles.text}>Page 1</Text>
            </View>
            <View level={8}>
              <Text style={styles.text}>Page 1</Text>
            </View>
          </View>
          <View style={[styles.slide, { backgroundColor: '#fa931d' }]}>
            <View style={{}} level={10}>
              <Image source={require('../../assets/dunbar-logo.png')} />
              <Text style={styles.text}>Page 1</Text>
            </View>
            <View level={15}>
              <Text style={styles.text}>Page 1</Text>
            </View>
            <View level={8}>
              <Text style={styles.text}>Page 1</Text>
            </View>
          </View>
        </AppIntro>
      </View>
    );
  }

//And my styles object:
const styles = {
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
    padding: 15,
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: '300',
    fontFamily: 'Lato',
  },
};

[trevor-coleman]

I managed to stop this problem by checking if the component was a Text field.

if (children.type.displayName != 'Text') {
      if (level !== 0) {
        animatedChild = (
          <Animated.View key={index} style={[children.props.style, transform]}>
            {nodes}
          </Animated.View>
        );
      } else {
        animatedChild = (
          <View key={index} style={children.props.style}>
            {nodes}
          </View>
        );
      }
    } else {
      if (level !== 0) {
        animatedChild = (
          <Animated.View key={index} style={[transform]}>
            {nodes}
          </Animated.View>
        );
      } else {
        animatedChild = <View key={index}>{nodes}</View>;
      }
    }

This probably has a lot of unintended consequences, but it seems to be working for me.

[renancaraujo]

Since this repo is dead, I'm closing this issue due to visual pollution on a personal tracker