container.js

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

export function Post ({ title, embedded }) {
  return (
    <View style={styles.smallPost}>
      <View style={styles.smallTextBlock}>
        <H3>{title.rendered}</H3>
      </View>
      {embedded['wp:featuredmedia'] ? (
        <Image
          source={{
            uri:
              embedded['wp:featuredmedia'][0].media_details.sizes
                .thumbnail.source_url,
          }}
          style={styles.smallImage}
        />
      ) : null}
    </View>
  )        
}

export default class Home extends Component {
  state = {
    posts: [],
    page: 1,
    loading: true,
    refreshing: false
  }

  componentDidMount() {
    this.getPosts();
  }

  getPosts = async () => {
    const { page } = this.state;
    try {
      const response = fetch(
        `http://jayfonseca.mrddevelopment.com/wp-json/wp/v2/posts?&page=${page}&per_page=5&state=publish&_embed`,
      )
      const jsonData = await response.json()
      this.setState({posts: response,
        loading: false,
        page: page + 1,
        // refreshing: false,
      });
    } catch (e) {
      // haz algo con el error
      return
    }
  }

  loadMore = async () => {
    const {page, posts} = this.state;
    try {
      const response = await fetch(`http://jayfonseca.mrddevelopment.com/wp-json/wp/v2/posts?&page=${page}&per_page=5&state=publish&_embed`)
      const jsonData = await response.json()
      return jsonData // lo que vayas a hacer con la data del servidor va aqui
    } catch (e) {
      console.log(e) // lo que vayas a hacer con el error aqui
    }
  }

  render() {
    const {posts, loading} = this.state;
    return (
        <FlatList
          style={styles.listContainer}
          showsHorizontalScrollIndicator={false}
          onEndReached={loadMore}
          onEndReachedThreshold={0.8}
          data={posts}
          // keyExtractor={(item) => item.id}
          renderItem={({item}) => <Post title={item.title} embedded={item._embedded} />}
      />
    );
  }
}

const {width} = Dimensions.get('window');

const styles = StyleSheet.create({
  listContainer: {
    backgroundColor: '#fff',
    padding: 8,
    flex: 1,
  },
  smallPost: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    maxWidth: width - 16,
    maxHeight: 100,
    marginBottom: 8,
  },
  smallImage: {
    width: 100,
    height: 100,
    borderRadius: 4,
    backgroundColor: '#e1e1fc',
  },
  smallTextBlock: {
    width: width - 138, // medidas así exactas no son buenas, usa porcentajes or fracciones 
    margin: 8,
    paddingRight: 8,
  },
});