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

[Darkaiden]

Hello, I followed the tutorial and i'm always getting this error :"Invariant Violation: Text strings must be rendered within a component.". I don't know how resolve this error if someone can help me. I'm using this code for my react native app. This is my code :

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image, ScrollView } from 'react-native';
import ProduitDuPanier from '../Components/ProduitDuPanier';
import { connect } from 'react-redux'
import PaypalExpressBtn from 'react-paypal-express-checkout';

class PagePanier extends React.Component {
  constructor(props) {
   super(props);

   this.state = {
    Panier : [],
    Total:0,
   }

  }

_display = (id) => {
    this.props.navigation.navigate(id);
  }

  componentDidMount(){

 var that = this;
 const { navigation } = this.props.navigation;

}

  render() {
    const { navigate } = this.props.navigation;
    console.log(this.props.Panier)
    let Total=0;
    const onSuccess = (payment) => {

                    console.log("Payment successful!", payment);

        }

        const onCancel = (data) => {

            console.log('Payment cancelled!', data);

        }

        const onError = (err) => {

            console.log("Error!", err);

        }

        let env = 'sandbox';
        let currency = 'EUR';
        let total = 1;

        const client = {
            sandbox:    'AYpbUdPYabvLHBhczTzg-Z1kVUDJhKg6JJYHHVnRcPrDcIkEhvP2t5abhbZSo0xm9epZHR1m2fyL75lb',
            production: 'YOUR-PRODUCTION-APP-ID',
        }
    return (
       <View style={styles.container}>
         <ScrollView style={styles.scroll}>
         <Text style={{fontSize:18, textAlign:'center', marginTop:'3%', marginBottom:'3%'}}> Votre panier contient les produits suivants : </Text>
            <View style={styles.items}>
              {this.props.Panier.map((Key,i) => {
                Total = Total + (this.props.Panier[i][1]*this.props.Panier[i][3]);
                 return (
                    <ProduitDuPanier navigate={this.props.navigation}
                    key={i} ID={this.props.Panier[i][0]}
                    Quant={this.props.Panier[i][1]}
                    NomProduit={this.props.Panier[i][2]}
                    Prix={this.props.Panier[i][3]}
                    Poids={this.props.Panier[i][4]}
                    Description={this.props.Panier[i][5]} />
                  )
                })
              }
            </View>
          </ScrollView>

          <TouchableOpacity style={styles.Confirmation}>
            <PaypalExpressBtn style={styles.fullWidthButtonText} env={env} client={client} currency={currency} total={total} onError={onError} onSuccess={onSuccess} onCancel={onCancel} >Confirmer - {Total}€</PaypalExpressBtn>
          </TouchableOpacity>
        </View>
      );
    }
  }

const styles = StyleSheet.create({
  container:
  {
    flex:1,
    flexDirection:'column',
    alignItems:'center'

  },
  scroll:
  {
    width:'100%',
  },
  items:{
    flex:1,
    flexDirection:'column',
    alignItems:'center'
  },
  Confirmation:
  {
    backgroundColor: 'blue',
    height:75,
    width:'100%',
    marginTop:10,
    justifyContent:'center',
    alignItems:'center'
  },
  fullWidthButtonText:
  {
    fontSize:28,
    color: 'white',
    fontWeight:'bold'
  }
});

const mapStateToProps = (state) => {
  return {
    Panier : state.Panier
  }
}
export default connect(mapStateToProps)(PagePanier)

Error:

Do you know why i have this error ?