React Native - как сдвигать карточки по горизонтали и давать им запас

В приведенном ниже коде я пытаюсь сделать 2 вещи:

• дать маржу каждой карте со значением: 20
• поместите четыре карточки только в один ряд и позвольте пользователю двигать их по горизонтали

Ни одна из этих вещей не работает, и код предназначен для этого.

Вот площадка, где вы можете проводить свои собственные эксперименты: bit.ly/2V3KbKo

https://cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/

Вот код (который вы также можете скопировать / вставить по ссылке выше):

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

export default class App extends React.Component {
  render() {
    return (
      <ScrollView style = {stylesApp.cardContainer}>
        <MyCard index = "514" black text = "These are the news of Monday." style = {stylesApp.myCard} />
        <MyCard index = "514" black text = "These are the news of Tuesday." style = {stylesApp.myCard} />
        <MyCard index = "514" black text = "These are the news of Wednesday." style = {stylesApp.myCard} />
        <MyCard index = "514" black text = "These are the news of Thursday." style = {stylesApp.myCard} />
      </ScrollView>
    );
  }
}

const stylesApp = StyleSheet.create({
  cardContainer: {
    flexDirection: 'row',
    flexWrap: 'nowrap',
    overflow: 'scroll',
  },
  myCard: {
    margin: 20,
  },
});

//------

class MyCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.text,
        };
    }
    render() {
        return (
            <View style = {stylesMyCard.container}>
                <Text style = {stylesMyCard.text}>{this.state.text}</Text>
            </View>
        );
    }
}

const stylesMyCard = StyleSheet.create({
    container: {
        width: 80,
        minHeight: 40,
        padding: 10,
        backgroundColor: '#000',
        alignItems: 'center',
    },
    text: {
        color: '#fff',
        fontSize: 10,
    }
});

Есть идеи, как заставить эти две вещи работать правильно?

Если можете, предоставьте рабочий исходный код.

Спасибо!