Создайте адаптивную сетку с React & Styled-Components

Question

Для создания адаптивной сетки CSS я использую реагирующие нативные веб-компоненты и стилизованные компоненты, однако кажется, что блоки компонентов Row не имеют свойств flex. Я хотел бы, чтобы все дети Row были Col компонентами. Наконец, свойство display:flex в Row должно заставить их всех сидеть рядом, как если бы у каждого из них было отображение inline-block. Я совершенно новичок в стиле компонентов и не уверен, где проблема. Я предполагаю, что это может быть потому, что я создаю компонент React, который отображает представление, а не div. Как я могу получить правильное поведение элементов в гибком контейнере?

Вот код:

import React from "react";
import ReactDOM from "react-dom";
import { StyleSheet, View, Text } from "react-native";
import styled from "styled-components/native";

import "./styles.css";

export const Grid = styled.View`
  border: 1px solid black;
`;

export const StandardText = styled.Text`
  font-size: 12;
`;

export const Row = styled.View`
  display: flex;
`;

export const Col = styled.View`
  padding: 0.5rem;
  border: 1px solid red;
  flex: ${props => props.size};
`;

function App() {
  return (
    <div className="App">
      <h1>CSS Grid</h1>
      <Grid>
        <Row>
          <Col size={1}>
            <StandardText>Some text</StandardText>
          </Col>
        </Row>
        <Row>
          <Col size={2}>
            <StandardText>Long</StandardText>
          </Col>
          <Col size={1}>
            <StandardText>Short</StandardText>
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вот результат, который я получаю:

Результат, который я ожидаю получить: