React Native text string must be rendered within a text

Question

Hello the react native code below takes care of displaying a ui, when I run the code I get the following error? come I solve this? The text it indicates is already present within a component text

Error: text strings must be rendered within a text component.

React code:

 import * as React from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableHighlight
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import * as Location from 'expo-location';
import MapView, { Marker } from 'react-native-maps';
import { colors, device, fonts, gStyle } from '../constants';
import RequestRideType from '../components/RequestRideType';
import SelectRideType from '../components/SelectRideType';
import TouchIcon from '../components/TouchIcon';
import TouchText from '../components/TouchText';
import WhereTo from '../components/WhereTo';
import SvgCheckShield from '../components/icons/Svg.CheckShield';
import SvgMenu from '../components/icons/Svg.Menu';
import SvgQRCode from '../components/icons/Svg.QRCode';
import { getlist } from '../services/event';

const { PROVIDER_GOOGLE } = MapView;

export const types = {
  car: {
    image: 'carSm',
    imageLg: 'carLg',
    text: 'Soccer'
  },
  bike: {
    image: 'bikeSm',
    imageLg: 'bikeLg',
    text: 'Basket'
  },
  golf: {
    image: 'golfSm',
    imageLg: 'golfLg',
    text: 'Golf'
  },
  baseball: {
    image: 'golfSm',
    imageLg: 'golfLg',
    text: 'Baseball'
  }
};

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'car',
      selectType: false,
      showMap: false,
      userLat: null,
      userLon: null,
      events: []
    };

    this.toggleTypeModal = this.toggleTypeModal.bind(this);
    this.changeRideType = this.changeRideType.bind(this);
  }

  async loadvalues() {
    // get list of events
    const eventlist = await getlist();
    this.setState({
      events: eventlist
    });
  }

  async componentDidMount() {
    this.loadvalues();
    // Verifico se sono abilitati i permessi di geolocalizzazione
    const { status: existingStatus } =
      await Location.requestForegroundPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Location.requestForegroundPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      return;
    }
    const { coords } = await Location.getCurrentPositionAsync();
    this.setState({
      showMap: true,
      userLat: coords.latitude,
      userLon: coords.longitude
    });
  }

  toggleTypeModal() {
    this.setState((prevState) => ({
      selectType: !prevState.selectType
    }));
  }

  changeRideType(type) {
    this.setState({
      type
    });
  }

  render() {
    const { navigation } = this.props;
    const { type, selectType, showMap, userLat, userLon, events } = this.state;
    return (
      <View style={gStyle.container}>
        {showMap && (
          <React.Fragment>
            <MapView
              followsUserLocation
              minZoomLevel={4}
              provider={PROVIDER_GOOGLE}
              region={{
                latitude: userLat,
                longitude: userLon,
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
              }}
              showsUserLocation
              style={styles.map}
            >
              {events.length > 0
                ? this.state.events.map((object) => (
                    <Marker
                      key={Math.random()}
                      coordinate={{
                        latitude: object.latitudine,
                        longitude: object.longitudine
                      }}
                    >
                      <View style={styles.circle}>
                        <Text style={styles.pinText}>{1}</Text>
                      </View>
                    </Marker>
                  ))
                : ''}
            </MapView>
          </React.Fragment>
        )}

        {!showMap && (
          <View style={styles.containerNoLocation}>
            <Text style={styles.textLocationNeeded}>Search Fit Event...</Text>
            <TouchText
              // eslint-disable-next-line no-undef
              onPress={() => Linking.openURL('app-settings:')}
              style={styles.btnGoTo}
              styleText={styles.btnGoToText}
              text="Go To Permissions"
            />
          </View>
        )}

        {type === 'bike' && (
          <View style={styles.rightContainer}>
            <View style={styles.icon}>
              <TouchIcon
                icon={<SvgQRCode />}
                iconSize={20}
                onPress={() => navigation.navigate('ModalQRCode')}
                style={[styles.icon, styles.iconQRCode]}
              />
              <TouchIcon
                icon={<SvgCheckShield />}
                iconSize={20}
                onPress={() => navigation.navigate('ModalTutorialBike')}
                style={[styles.icon, styles.iconShield]}
              />
            </View>
          </View>
        )}

        <View style={styles.header}>
          <TouchIcon
            icon={<SvgMenu />}
            iconSize={32}
            onPress={() => navigation.toggleDrawer()}
          />
          <RequestRideType
            image={types[type].image}
            onPress={this.toggleTypeModal}
            text={types[type].text}
          />

          {type === 'car' && <View style={styles.placeholder} />}
          {type === 'bike' && (
            <TouchText
              onPress={() => navigation.navigate('ModalHelp')}
              style={styles.help}
              text="Info"
            />
          )}
        </View>

        <SelectRideType
          data={types}
          onClose={this.toggleTypeModal}
          onSelect={this.changeRideType}
          visible={selectType}
        />

        <WhereTo />
        <View style={styles.mainConatinerStyle} />
        <TouchableHighlight onPress={() => Actions.addactivity()}>
          <Image
            onPress={() => Actions.addactivity()}
            style={styles.image}
            source={require('../assets/images/add.png')}
          />
        </TouchableHighlight>
      </View>
    );
  }
}

Home.propTypes = {
  navigation: PropTypes.object.isRequired
};

const styles = StyleSheet.create({
  mainConatinerStyle: {
    flexDirection: 'row',
    flex: 1
  },
  image: {
    display: 'flex',
    flexDirection: 'row',
    height: 50,
    justifyContent: 'space-between',
    marginBottom: 10,
    marginLeft: 30,
    width: 50
  },
  floatingMenuButtonStyle: {
    alignSelf: 'flex-end',
    bottom: 35,
    position: 'absolute'
  },
  circle: {
    backgroundColor: 'red',
    borderRadius: 30 / 2,
    height: 30,
    width: 30
  },
  pinText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
    textAlign: 'center'
  },
  map: {
    flex: 1,
    height: device.height,
    position: 'absolute',
    width: device.width
  },
  containerNoLocation: {
    alignItems: 'center',
    height: device.height,
    justifyContent: 'center',
    position: 'absolute',
    width: device.width
  },
  textLocationNeeded: {
    fontFamily: fonts.uberMedium,
    fontSize: 16,
    marginBottom: 16
  },
  btnGoTo: {
    backgroundColor: colors.black,
    borderRadius: 3,
    paddingHorizontal: 16,
    paddingVertical: 8
  },
  btnGoToText: {
    color: colors.white,
    fontFamily: fonts.uberMedium,
    fontSize: 16
  },
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    paddingHorizontal: 20,
    paddingTop: device.iPhoneX ? 58 : 34
  },
  help: {
    textAlign: 'center',
    width: 32
  },
  placeholder: {
    height: 32,
    width: 32
  },
  rightContainer: {
    alignItems: 'center',
    height: '100%',
    justifyContent: 'center',
    position: 'absolute',
    right: 16,
    width: 40
  },
  icon: {
    borderRadius: 18,
    height: 36,
    shadowColor: colors.black,
    shadowOffset: { height: 2, width: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    width: 36
  },
  iconQRCode: {
    backgroundColor: colors.blue,
    marginBottom: 16
  },
  iconShield: {
    backgroundColor: colors.white
  }
});

export default Home;

Answer 1

   <View style={styles.circle}>
                    <Text style={styles.pinText}>{1}</Text>
                  </View>
                </Marker>
              ))
            : ''}

: ''} <= this part will be considered as text by system but no <Text> tag ,if you want to not return anything use null instead

   <View style={styles.circle}>
                    <Text style={styles.pinText}>{1}</Text>
                  </View>
                </Marker>
              ))
            : null}

Answer 2

With react-native you should use null or instead of ''.