a complete ui library to react native
01 | 02 | 03 |
---|---|---|
yarn add rn-skrull
Applying a theme to the whole app
import { ThemeProvider } from 'rn-skrull';
export default function App {
const theme = {
colors: {
primary: '#00b894',
background: '#fffff',
text: '#2d3436',
label: '#636e72',
appBar: {
background: '#dfe6e9',
color: '#222'
}
},
components: {
input: {
unselectOutlineColor: '#ccc',
placeholderTextColor: '#ccc',
disabled: {
opacity: 0.5
},
variants: {
default: {
borderRadius: 8,
paddingHorizontal: 15,
paddingVertical: 14,
fontSize: 16
},
outline: {
borderWidth: 2,
borderRadius: 10
},
solid: {
borderRadius: 10,
borderWidth: 0,
backgroundColor: '#dfe6e9'
},
flat: {
borderRadius: 0,
borderBottomWidth: 2
}
}
}
...
}
};
return (
<ThemeProvider theme={theme}> // put your theme here
<App />
</ThemeProvider>
);
}
You can also use the useTheme hook:
import { useTheme, Button } from 'rn-skrull';
export default function App {
const { colors } = useTheme();
return (
<Button style={{ backgroundColor: colors.primary }}>
Button
</Button>
);
}
import { Stack, Box, Center, Title } from 'rn-skrull';
<Stack align="center" direction="row" padding={20} />
<Box w={20} h={100} p={20} bg="blue" borderColor="red" borderWidth={2} />
<Center>
<Title> is the center</Title>
</Center>
// You can use all the properties available in react-native's ViewStyle interface.
import {AppBar, Button} from 'rn-skrull';
<AppBar
title="Minha tela inicial"
left={<CustomIconMenu />}
right={() => (
<>
<CustomIconSearch />
<CustomIconCart />
</>
)}
/>
import { Button } from 'rn-skrull';
<Button icon={<CustomIcon />} size="small" variant="outline">Button</Button>
Props | Value |
---|---|
size | "small" / "larger" / "medium" |
icon | Jsx Icon |
variant | "outline" / "solid" / "text" |
onPress | Function |
style | StyleSheet |
disabled | Boolean |
isLoading | Boolean |
textStyle | StyleSheet |
import { Input } from 'rn-skrull';
<Input placeholder="Email" prefix={<CustomIconEmail />} />
Props | Value |
---|---|
placeholder | String |
prefix | JSX Element |
suffix | JSX Element |
variant | outline / solid / flat |
onChange | Function |
style | StyleSheet |
disabled | Boolean |
import { Title } from 'rn-skrull';
<Title>Text Title</Title>
import { Label } from 'rn-skrull';
<Label>Outlined button Medium</Label>
import { IconButton } from 'rn-skrull';
<IconButton icon={<CustomIcon />} variant="solid" />
Props | Value |
---|---|
icon | IconSource |
variant | outline / solid / default |
onPress | Function |
style | StyleSheet |
disabled | Boolen |
import { Paragraph } from 'rn-skrull';
<Paragraph>Text Paragraph</Paragraph>
import { Spacing } from 'rn-skrull';
<Spacing />
Props | Value |
---|---|
width | Number |
height | Number |
import { ActivityIndicator } from 'rn-skrull';
<ActivityIndicator />
Props | Value |
---|---|
color | String |
size | small / larger / Number |
animating | Boolean |
style | StyleSheet |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.