Invariant Violation: Invariant Violation: Text strings must be rendered within a <Text> component.

[m-ret]

I am having this weird error on this component:

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

This is the component:

import { View, Text } from 'react-native';
import React from 'react';
import { filter, size } from 'lodash';
import PropTypes from 'prop-types';
import { compose } from 'redux';
import { connect } from 'react-redux';
import PassengersInfo from './PassengerInfo';
import OptionsModal from '../PopupsModals/OptionsAlertPassenger';
import AllPassengersOptionsModal from '../PopupsModals/AllPassengersOptionsModal';

import { popupsModalsAction } from '../PopupsModals/actions/popupsModals';

const PassengerCardBasedOnRoute = ({
  navigationStore,
  passengersData,
  popupsModalsActionHandler,
  searchParam,
}) => {
  const filterBy = (key, val) => filter(passengersData, [key, val]);

  const search = searchParam.toLowerCase();

  const filteredData = filterByParam =>
    filterByParam.filter(obj =>
      Object.keys(obj).some(key =>
        String(obj[key])
          .toLowerCase()
          .includes(search),
      ),
    );

  const componentToRenderBasedOnParams = info => (
    <PassengersInfo
      key={info.id}
      id={info.id}
      cardinalpoint={info.cardinalpoint}
      name={info.name}
      address={info.address}
      datetime={info.timestamp}
      searchParam={searchParam}
      callModal={popupsModalsActionHandler}
    />
  );

  const showFeedbackIfNoLength = (filterByParam, value, indexRoute) => {
    if (size(filteredData(filterBy(filterByParam, value)))) {
      filteredData(filterBy(filterByParam, value)).map(info =>
        componentToRenderBasedOnParams(info),
      );
    } else {
      return indexRoute && <Text>No records found</Text>;
    }

    return filteredData(filterBy(filterByParam, value)).map(info =>
      componentToRenderBasedOnParams(info),
    );
  };

  return (
    <>
      <OptionsModal>{<AllPassengersOptionsModal />}</OptionsModal>
      <View>
        {!navigationStore.index &&
          passengersData &&
          showFeedbackIfNoLength('pickup', 1, !navigationStore.index)}

        {passengersData && navigationStore.index &&
           showFeedbackIfNoLength(
              'dropofftimestamp',
              null,
              navigationStore.index,
            )}
      </View>
    </>
  );
};

PassengerCardBasedOnRoute.propTypes = {
  navigationStore: PropTypes.shape({}).isRequired,
  passengersData: PropTypes.oneOfType([PropTypes.array]).isRequired,
  popupsModalsActionHandler: PropTypes.func.isRequired,
  searchParam: PropTypes.oneOfType([PropTypes.string]).isRequired,
};

export default compose(
  connect(
    store => ({
      navigationStore: store.homeScreen.navigation,
      passengersData: store.homeScreen.passengersData,
      searchParam: store.homeScreen.searchParam,
    }),
    dispatch => ({
      popupsModalsActionHandler: data => {
        dispatch(popupsModalsAction(data));
      },
    }),
  ),
)(PassengerCardBasedOnRoute);

The problem is right here:

        {passengersData && navigationStore.index &&
           showFeedbackIfNoLength(
              'dropofftimestamp',
              null,
              navigationStore.index,
            )}

I can get rid of that error by doing this:

      {passengersData && navigationStore.index
          ? showFeedbackIfNoLength(
              'dropofftimestamp',
              null,
              navigationStore.index,
            )
          : null}

But, why?

I checked my file and there is no whitespace or something similar.

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[ericlewis]

I have run in to this problem before with iOS, essentially what happens is when you do things like:

passengersData && navigationStore.index && <Component />

if the first condition fails, it returns false, which isn't valid to render- so you must return null to explicitly not render something. It seems to be something that happens when running in release mode for me, but I have also seen it when debugging.

[hramos]

Duplicate of #20764