Invariant Violation: Text strings must be rendered within a Text component

Question

I am trying to add my CardsSection component into my Card component however I keep getting this error about a Text Violation but I'm not even using any Text within my Tournament, Card, or CardSection .js files. I don't see why I'm getting this error. Can someone tell me what to do and why?

Tournament.js

import React from "react";
import { View, Text, Image, ScrollView } from "react-native";
import { Card, Button, Spinner, CardSection } from "../common";

class Tournaments extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Tournaments"
  };
  render() {
    return (
      <View style={styles.containerStyle}>
        <Card>
          <View style={styles.logoContainer}>
            <Image
              style={styles.logo}
              source={require("../../Images/ShoeJackCityLogo.png")}
            />
          </View>
          <View style={styles.formContainer} />
        </Card>
        <ScrollView horizontal>
          <Card>
            <View style={{ flex: 1, flexDirection: "row" }}>
              <CardSection>
                <Image
                  style={styles.product}
                  source={require("../../Images/aj_4_toro.png")}
                />
              </CardSection>
              <CardSection>
                <Image
                  style={styles.product}
                  source={require("../../Images/aj_4_toro.png")}
                />
              </CardSection>
              <CardSection>
                <Image
                  style={styles.product}
                  source={require("../../Images/aj_4_toro.png")}
                />
              </CardSection>
            </View>
          </Card>
        </ScrollView>
      </View>
    );
  }
}
const styles = {
  containerStyle: {
    flex: 1,
    backgroundColor: "#F13C20",
    paddingBottom: 20
  },
  logoContainer: {
    alignItems: "center",
    flexGrow: 1,
    justifyContent: "flex-start",
    paddingBottom: 15
  },
  logo: {
    paddingTop: 15,
    width: 50,
    height: 50
  },
  product: {
    width: 100,
    height: 100,
    paddingBottom: 15,
    marginRight: 50
  }
};
export default Tournaments;

CardSection.js

import React from 'react';
import { View } from 'react-native';

const CardSection = (props) => (
    <View style={styles.containerStyle}>
    {props.children};
    </View>
  );

const styles = {
  containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: 'white',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};

export { CardSection };

Card.js

import React from 'react';
import { View } from 'react-native';

const Card = (props) => (
    <View style={styles.containerStyle}>
      {props.children}
    </View>
  );

const styles = {
  containerStyle: {
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 30,
}
};

export { Card };

Solution 1

You have a semicolon concatenated right after your children in CardSection component. This semicolon is interpreted as text and since every text must be within a <Text> component, the error is thrown.

To fix the issue, simply change

const CardSection = (props) => (
  <View style={styles.containerStyle}>
    {props.children};
  </View>
);

to

const CardSection = (props) => (
  <View style={styles.containerStyle}>
    {props.children}
  </View>
);

Solution 2

Try removing all whitespaces (and possibly line endings) from inside your parent tag.

Facebook says it's not a bug and working as intended(in a related bug report) and that they haven't introduced any changes into .56, but that's not how it actually works and it is working apparently differently from previous versions.

Also Expo has no problem with extra whitespaces there. How you're supposed to intend it now I can't tell you.

Comments

[Tasos Anesiadis]

I made exactly the same mistake.. Thank you so much!