Lary

A utility-first style library for React Native on top of Dripsy.

If you are too lazy, use lary ;)

Read the doc

import { laryfy, Element, Container, useBreakPoints } from '@_ricecooker/lary';
import { Text as NativeText } from 'react-native';
import { Image as NativeImage } from 'react-native';
import { TouchableOpacity as PaperButton } from 'react-native';

const Text = laryfy < typeof NativeText > NativeText;
const Image = laryfy < typeof NativeImage > NativeImage;
const Button = laryfy < typeof PaperButton > PaperButton;

const Card = (): JSX.Element => {
  const { isSm } = useBreakPoints();
  return (
    <Container row justifyCenter>
      <Element m1 r4 bgWarning maxWidth={500} widthFull>
        <Container column widthFull>
          <Image
            height={400}
            r4
            source={{
              uri: 'https://img.freepik.com/free-vector/animal-doing-dabbing-movement_23-2147851266.jpg'
            }}
          />
          <Container row m6 alignCenter justifyCenter>
            <Text f3 inWhite bold textCenter text2xl>
              {isSm ? 'Unicorn' : 'Dabbing Unicorn'}
            </Text>
            <Text f1 inWhite bold textCenter text2xl>
              $5.6
            </Text>
            <Button f1 bgSecondary onPress={() => console.log('Pressed')} r4>
              <Container row m1>
                <Text f3 inWhite bold textCenter>
                  Buy
                </Text>
              </Container>
            </Button>
          </Container>
        </Container>
      </Element>
    </Container>
  );
};

export default Card;

📥 Installation

With npm

npm i @_ricecooker/lary

With yarn

yarn add @_ricecooker/lary

🧐 Features

Here're some of the project's best features:

• Boolean props for load style on your component
• Laryfy components from your favorite library sutch as react-native-paper
• Overload the default Lary's theme configuration with your own one
• Support media queries

🔗 Deps

Dependencies required in this project:

• React
• React-Native

💻 Built with

Technologies used in this project:

• Dripsy
• React-Native

🛡️ License:

This project is licensed under the Beerware