1.4.3 • Published 3 years ago
rn-skrull v1.4.3
React Native Skrull
a complete ui library to react native
01 | 02 | 03 |
---|---|---|
Installation
yarn add rn-skrull
Usage
Theme
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>
);
}
Stack
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.
AppBar
import {AppBar, Button} from 'rn-skrull';
<AppBar
title="Minha tela inicial"
left={<CustomIconMenu />}
right={() => (
<>
<CustomIconSearch />
<CustomIconCart />
</>
)}
/>
Buttons
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 |
Inputs
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 |
Title
import { Title } from 'rn-skrull';
<Title>Text Title</Title>
Label
import { Label } from 'rn-skrull';
<Label>Outlined button Medium</Label>
IconButton
import { IconButton } from 'rn-skrull';
<IconButton icon={<CustomIcon />} variant="solid" />
Props | Value |
---|---|
icon | IconSource |
variant | outline / solid / default |
onPress | Function |
style | StyleSheet |
disabled | Boolen |
Paragraph
import { Paragraph } from 'rn-skrull';
<Paragraph>Text Paragraph</Paragraph>
Spacing
import { Spacing } from 'rn-skrull';
<Spacing />
Props | Value |
---|---|
width | Number |
height | Number |
ActivityIndicator
import { ActivityIndicator } from 'rn-skrull';
<ActivityIndicator />
Props | Value |
---|---|
color | String |
size | small / larger / Number |
animating | Boolean |
style | StyleSheet |
Contributing
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.
License
1.4.3
3 years ago
1.3.7
3 years ago
1.3.6
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.9
3 years ago
1.3.8
3 years ago
1.3.5
3 years ago
1.3.4
3 years ago
1.3.3
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.0
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.1
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.0
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago