Styled Components + React Native

И так мы уже установили RN. Сделали навигацию по приложению. На чем писать стили?

А почему бы не попробовать styled-components?

Ну и как всегда максимально короткая заметка как это все получить у себя на борту.

Устанавливаем:

yarn add [email protected]

Теперь импортим и начинаем использовать

import styled from 'styled-components/native';

Например мы хотим сделать View, который будет контейнером для нашего текста, а также сделать стилизованный текст:

const Container = styled.View`
  flex: 1;
  background-color: white;
  align-items: center;
  justify-content: center;
`;
const Text = styled.Text`
  font-size: 18px;
  color: blue;
  font-weight: 500;
`;

Все вместе выглядит вот так:

import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  background-color: white;
  align-items: center;
  justify-content: center;
`;
const Text = styled.Text`
  font-size: 18px;
  color: blue;
  font-weight: 500;
`;

const StyledComponentExamplePage = () => {
  return (
    <Container>
      <Text>Open up App.js to start working on your app!</Text>
    </Container>
  );
};

export default StyledComponentExamplePage;

По сути мы оборачиваем стандартные элементы и стилим перед использованием.

Более развернутое объяснение можно посмотреть пожалуй тут или в документации.