2
respostas

Textos do mock não aparece

Eu fiz o import do mock e passei os parâmetros com o spreed rest, mas os textos não aparecem na tela

App.js:

import React from 'react'
import { StatusBar, SafeAreaView, View } from 'react-native';

import Cesta from './src/screens/Cesta/index'
import mock from './src/mocks/cesta'

import { 
  useFonts,
  Montserrat_400Regular, 
  Montserrat_700Bold 
} from '@expo-google-fonts/montserrat'

export default function App() {

  const [loadedFont] = useFonts({
    "MontserratRegular": Montserrat_400Regular,
    "MontserratBold": Montserrat_700Bold
  });

  if(!loadedFont) {
    return <View/>
  }

  return (
    <SafeAreaView>
      <StatusBar/>
      <Cesta {...mock}/>
    </SafeAreaView>
  );
}

index.js:

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

import Detalhes from './components/Detalhes';
import Topo from './components/Topo';

export default function Cesta(topo, detalhes){
    return <>
        <Topo {...topo}/>
        <View style={styles.cesta}>
            <Detalhes {...detalhes}/>
        </View>
    </>
} 

const styles = StyleSheet.create({
    cesta: {
        paddingVertical: 8,
        paddingHorizontal: 16
    }
})

mocks/cesta.js:

const cesta = {
    topo: {
        title: "Detalhe da cesta",
    },
    detalhes: {
        name: "Cesta de Verduras",
        farmImage: logo,
        farmName: "Jenny Jack Farm",
        description: "Uma cesta com pordutos selecionados cuidadosamente da fazenda direto para sua cozinha",
        price: "R$ 40,00"
    }
}

export default cesta;

Detalhes.js:

import React from 'react'
import {View, StyleSheet, Image} from 'react-native'

import Texto from '../../../components/Texto'

export default function Detalhes({name, farmImage, farmName, description, price}){
    return <>
            <Texto style={styles.name}>{name}</Texto>
            <View style={styles.farm}>
                <Image style={styles.farmImage} source={farmImage}/>
                <Texto style={styles.farmName}>{farmName}</Texto>
            </View>
            <Texto style={styles.description}>{description}</Texto>
            <Texto style={styles.price}>{price}</Texto>
        </>
}

const styles = StyleSheet.create({
    name: {
        fontSize: 26,
        lineHeight: 42,
        color: '#464646',
        fontWeight: 'bold'
    },
    farm: {
        flexDirection: 'row',
        paddingVertical: 12
    },  
    farmImage: {
        width: 32,
        height: 32
    },
    farmName: {
        fontSize: 16,
        lineHeight: 26,
        marginLeft: 12
    },
    description: {
        color: '#A3A3A3',
        fontSize: 16,
        lineHeight: 26
    },
    price: {
        color: '#2A9F85',
        fontWeight: 'bold',
        fontSize: 26,
        lineHeight: 42,
        marginTop: 8
    }
})
2 respostas

Descobri o erro, onde não passei as chaves no parâmetro de objeto no index da cesta

Errado:

export default function Cesta(topo, detalhes){

Certo:

export default function Cesta({topo, detalhes}){

Nossa, eu estava com o mesmo problema! Vlwwwww!