Refatoração para extrair um componente

Nesta aula veremos como extrair as informações do item, fazendo dele um componente, para utilizar na tela de detalhes.

Criando arquivo

Na pasta raiz do projeto, crie uma pasta com o nome de components, e dentro dela uma pasta blogpost com o seu respectivo index.js.

Veja a estrutura de pastas abaixo:

Estrutura de pastas

Criando o componente

Agora, em seu arquivo index.js devemos ter o código do componente. Siga o passo a passo da aula e implemente o código abaixo:

import React from 'react'
import { Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
import RenderHTML from 'react-native-render-html'

export default function BlogPost({ item, navigation, width }) {

    const previewText = item.texto.substring(0, 300) + '...'
    const source = { html: `<div style='color: white'>${previewText}</div>` }

    return (
        <TouchableOpacity onPress={() => navigation.navigate('BlogPost', { post: item })} style={styles.item}>
            <Image style={styles.img} source={{ uri: item.foto }}></Image>
            <Text style={styles.titulo}>{item.titulo}</Text>
            <RenderHTML contentWidth={width} source={source}></RenderHTML>
        </TouchableOpacity>
    )

}

const styles = StyleSheet.create({
    item: {
        backgroundColor: 'black'
    },
    img: {
        width: '100%',
        height: 250
    },
    titulo: {
        fontSize: 16,
        fontWeight: '700',
        marginVertical: 10,
        color: 'white'
    }
})

Utilizando o componente BlogPost

Com o componente quase pronto, já podemos utilizá-lo no nosso Home. Para isso, faça as alterações abaixo no arquivo:

import React, { useEffect, useState } from 'react'
import { View, StyleSheet, FlatList, ActivityIndicator, useWindowDimensions } from 'react-native'
import BlogPost from '../../components/blogpost'

export default function Home({ navigation }) {

    const [posts, setPosts] = useState([])
    const [isLoading, setLoading] = useState(true)
    const { width } = useWindowDimensions();

    const getPostsAPI = async () => {
        try {
            setLoading(true)
            const response = await fetch('https://dev-backend-imd.herokuapp.com/api/posts')
            const posts = await response.json()
            setPosts(posts.posts)
        } catch (error) {
            alert('Falha ao carregar postagens. Tente novamente mais tarde.')
            setPosts([])
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        getPostsAPI()
    }, [])

    return (
        <View style={styles.container}>
            {isLoading
                ? <ActivityIndicator />
                : <FlatList style={styles.lista} data={posts} renderItem={({ item }) => <BlogPost width={width} navigation={navigation} item={item} />} keyExtractor={(item) => "#" + item.id}></FlatList>
            }
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        backgroundColor: 'black'
    },
    lista: {
        flex: 1,
        marginTop: 44
    }
})