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

MIT