React – Styled Components library

La libreria Styled components è una libreria che consente di applicare stili all’interno di componenti React Native, definendoli all’interno di plain css.

Utilizzando questa libreria, infatti, non è necesario definire gli stili tramite oggetti e utilizzarli tramite props. I css sono definiti tramite template che prendono il nome di styled-components.

La documentazione ufficiale della libreria è presente a questo link.

Per poter utilizzare styled-components è necessario installarli utilizzando:

npm install --save styled-components

Dopo l’installazione possiamo definire i template nel seguente modo:

import styled from "styled-components/native";

const Box = styled.View'
	width: 100px;
	height: 100px;
	justify-content: center;
	align-items: center;
	background-color: lightgray;
';

const BoxText = styled.Text'
	color: darkslategray;
	font-weight: bold;
';

Nell’esempio precedente sono stati definiti due template Box e BoxText. In particolare si riferiscono rispettivamente a View e Text. A questo punto possiamo utilizzare i styled-component all’interno della nostra applicazione :

const App = () => {
	return (
		<Box>
			<BoxText>I'm in a box</BoxText>
		</Box>
	);
};

Come si può notare, la scrittura dell’applicazione e la definizione del relativo foglio di stile risulta molto chiara ed ordinata.