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>
  );
}

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>

import { Input } from 'rn-skrull';

<Input placeholder="Email" prefix={<CustomIconEmail />} />

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" />

import { Paragraph } from 'rn-skrull';

<Paragraph>Text Paragraph</Paragraph>

import { Spacing } from 'rn-skrull';

<Spacing />

import { ActivityIndicator } from 'rn-skrull';

<ActivityIndicator />