Uma biblioteca para estilização de componentes no React Native, inspirada no styled-components
. Permite a criação de componentes estilizados de forma modular e reutilizável.
Para instalar a biblioteca, use o npm ou yarn:
npm install native-styled-components
ou
yarn add native-styled-components
Importe os componentes e o ThemeProvider
da biblioteca:
import { styled, ThemeProvider, defaultTheme } from 'native-styled-components';
Você pode criar componentes estilizados usando a função styled
:
const StyledView = styled.View((props) => ({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: props.theme.colors.background,
}));
const StyledText = styled.Text((props) => ({
color: props.theme.colors.text,
fontSize: 16,
}));
Para aplicar um tema, envolva seus componentes com o ThemeProvider
:
const App = () => (
<ThemeProvider theme={defaultTheme}>
<StyledView>
<StyledText>Olá, mundo!</StyledText>
</StyledView>
</ThemeProvider>
);
Você pode definir temas personalizados e usar o tema padrão fornecido:
export const defaultTheme = {
colors: {
background: '#f0f0f0',
primary: '#6200ee',
text: '#000',
},
};
Contribuições são bem-vindas! Sinta-se à vontade para abrir um issue ou um pull request.
Este projeto está licenciado sob a MIT License - veja o arquivo LICENSE para mais detalhes.
Made with create-react-native-library