Adicionando RenderHTML e Navegação

Até o momento já estamos listando os itens na tela de Home, porém, ainda faltam alguns detalhes que daremos continuidade agora.

Loading da tela

Já foi criado o estado isLoading e ele já está sendo setado. Porém, ainda não o utilizamos na tela.

Para isso, utilizaremos o componente ActivityIndicator como se vê abaixo:

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

Instalando bibliotecas adicionais

Nosso texto do post vem no formato HTML e para manipulá-lo iremos precisar instalar uma biblioteca através do comando abaixo:

npm install react-native-render-html

Utilizando o RenderHTML

Com a biblioteca já instalada, utilizaremos esse componente em Item. Veja abaixo as modificações:

const Item = (props) => {

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

    return (
        <View style={styles.item}>
            <Image style={styles.img} source={{ uri: props.item.foto }}> </Image>
            <Text style={styles.titulo}>{props.item.titulo}</Text>
            <RenderHTML contentWidth={width} source={source}></RenderHTML>
        </View>
    )
}

Navegando entre as telas

Agora queremos que ao clicar em uma postagem o usuário seja direcionado para uma tela nova contendo mais informações sobre o post.

Para isso, utilizaremos o componente TouchableOpacity. Veja abaixo como fazer o uso desse componente:

const Item = ({ item, navigation }) => {

    const { width } = useWindowDimensions()
    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>
    )
}

E no componente FlatList:

<FlatList style={styles.lista} data={posts} renderItem={({ item }) => <Item navigation={navigation} item={item} />} keyExtractor={(item) => "#" + item.id}></FlatList>