Quick UI - React Native

• @doj/quick-ui-rn is a powerful React Native npm package designed to streamline and accelerate UI designing in your React Native projects.
• With a collection of pre-built, customizable UI components and a suite of productivity-enhancing tools, this package aims to boost your development speed and efficiency.
• Create stunning, pixel-perfect user interfaces effortlessly using the rich library of pre-designed UI components.
• Our text, image, Buttons and all other components 100% rrsponsive in all devices of different sizes.
• Whether you're building a simple login screen, a complex dashboard, or a feature-rich mobile app, @doj/quick-ui-rn provides a wide range of beautifully crafted UI elements that can be easily integrated and customized to match your desired style and branding.
• Save valuable development time by leveraging the productivity tools included in this package. From layout templates and theme management to responsive design helpers and UI prototyping features, @doj/quick-ui-rn empowers you to iterate quickly, experiment with different designs, and deliver polished user interfaces in record time.

Key Features:

• Extensive library of pre-built,
• customizable UI components
• Efficient and intuitive layout templates for rapid UI creation
• Theme management for easy customization and consistent styling
• Responsive design helpers for seamless adaptation to various screen sizes
• UI prototyping features for quick experimentation and visualization

Take your React Native UI development to the next level with @doj/quick-ui-rn and experience a significant boost in your productivity while delivering stunning, professional-quality user interfaces.

All our components start with letter 'Q' which stands for Quick

Installation

npm install @doj/quick-ui-rn

Usage

import * as React from 'react';

import QuickUI, {
  QAvatar,
  QButton,
  QDialogModal,
  QImage,
  QModal,
  QRow,
  QScreen,
  QScrollView,
  QText,
  QBox,
  QTextInput,
  QPressableInput,
  QCard,
} from '@doj/quick-ui-rn';
const SampleImage = require('../assets/doj.jpeg');

export default function App() {
  const [openModal, setOpenModal] = React.useState(false);
  const [openDialog, setOpenDialog] = React.useState(false);
  return (
    <QScreen bg="lightblue" qs={{ px: 10 }}>
      <QuickUI.QText size="h3" ta="center" mb={15}>
        Quick UI - React Native
      </QuickUI.QText>
      <QScrollView showScrollbar>
        <QBox>
          <QText
            size="h1"
            color="#B90000"
            bw={1}
            bs="dashed"
            ta="center"
            bc="#B90000"
            mb={20}
          >
            Typography
          </QText>
          <QText size="h1">Heading 1</QText>
          <QText size="h2">Heading 2</QText>
          <QText size="h3">Heading 3</QText>
          <QText size="h4">Heading 4</QText>
          <QText size="h5">Heading 5</QText>
          <QText size="h6">Heading 6</QText>
          <QText>Normal Text</QText>
          <QText size="label">Label</QText>
          <QText size="sm">Small Text</QText>
          <QText size="xs">Extra Small Text</QText>
          <QText muted>Muted Text</QText>
          <QText bold>Bold Text</QText>
          <QText color="red">Colored Text</QText>
          <QText qs={{ fs: 20, fw: 'bold' }}>Text with QuickStyles</QText>
        </QBox>
        <QBox my={10}>
          <QText
            qs={{
              color: '#B90000',
              bw: 1,
              bc: '#B90000',
              mb: 20,
              bs: 'dashed',
              ta: 'center',
            }}
            size="h1"
          >
            Inputs
          </QText>
          <QTextInput
            label="Fullname"
            placeholder="Enter fullname"
            // leftIcon={<QAvatar source={SampleImage} />}
          />
          <QPressableInput
            label="Open Dialog"
            placeholder="Pressale Input"
            leftIcon={<QAvatar source={SampleImage} size={20} />}
            onPress={() => setOpenDialog(true)}
          />
        </QBox>
        <QBox my={10}>
          <QText
            qs={{
              color: '#B90000',
              bw: 1,
              bc: '#B90000',
              mb: 20,
              bs: 'dashed',
              ta: 'center',
            }}
            size="h1"
          >
            Cards
          </QText>
          <QCard h={100} jc="center" ai="center" mb={10}>
            <QText>Normal Card</QText>
          </QCard>
          <QCard h={100} jc="center" ai="center" mb={10} rounded={10}>
            <QText>Rounded Card</QText>
          </QCard>
          <QCard
            jc="center"
            ai="center"
            mb={10}
            rounded={50}
            w={100}
            h={100}
            as="center"
          >
            <QText>Circle Card</QText>
          </QCard>
          <QCard
            h={100}
            jc="center"
            ai="center"
            isPressable
            onPress={() => console.warn('Pressable Card')}
          >
            <QText>Pressable Card</QText>
          </QCard>
        </QBox>
        <QBox my={10}>
          <QText
            qs={{
              color: '#B90000',
              bw: 1,
              bc: '#B90000',
              mb: 20,
              bs: 'dashed',
              ta: 'center',
            }}
            size="h1"
          >
            Layouts
          </QText>
          <QText size="h4">1. DScreen</QText>
          <QText>{`<DScreen>\n A component that wraps it's children below the statusbar for both android and ios\n</DScreen>`}</QText>
        </QBox>
        <QBox fld="row" ai="center" jc="space-between" gap={30} mx={15} my={10}>
          <QButton
            title="Open Modal"
            _textStyle={{ color: 'blue' }}
            _textProps={{ fs: 20, bold: true }}
            onPress={() => setOpenModal(true)}
            shadow="2xl"
            bw={0}
            bg={'white'}
            flex={1}
            isLoading
          />
          <QButton
            flex={1}
            title="Open Dialog"
            color="red"
            onPress={() => setOpenDialog(true)}
            rightIcon={<QAvatar source={SampleImage} size={25} />}
          />
        </QBox>

        <QModal
          visible={openModal}
          setVisible={setOpenModal}
          onOpen={() => console.log('Modal Opened')}
          onClose={() => console.log('Modal Closed')}
        />

        <QDialogModal
          visible={openDialog}
          title="Quick UI"
          message="Welcome to Quick UI"
          setVisible={setOpenDialog}
          closeModalOnOutSidePress={false}
          onOutSidePressed={() => console.log('Outside Press!')}
        />

        <QRow ai="center" jc="center" my={20} gap={60}>
          <QBox ai="center">
            <QImage source={SampleImage} rounded={10} />
            <QText size="sm" bold>
              Image
            </QText>
          </QBox>
          <QBox>
            <QAvatar source={SampleImage} />
            <QText size="sm" bold>
              Avatar1
            </QText>
          </QBox>
          <QBox>
            <QAvatar source={SampleImage} size={60} />
            <QText size="sm" bold>
              Avatar2
            </QText>
          </QBox>
        </QRow>
      </QScrollView>
    </QScreen>
  );
}

Props

fs: fontSize

Types => number | string | undefined

fw: fontWeight

Types => 'bold' | 'normal' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined

ta: textAlign

Types =>

h: height

Types => number | string | undefined

w: width

Types =>

minH: minHeight

Types =>

minW: minWidth

Types =>

bg: backgroundColor

Types =>

m: margin

Types =>

mb: marginBottom

Types =>

mt: marginTop

Types =>

ml: marginLeft

Types =>

mr: marginRight

Types =>

my: marginVertical

Types =>

mx: marginHorizontal

Types =>

p: padding

Types =>

pb: paddingBottom

Types =>

pt: paddingTop

Types =>

pl: paddingLeft

Types =>

pr: paddingRight

Types =>

py: paddingVertical

Types =>

px: paddingHorizontal

Types =>

position: position

Types =>

color: color

Types =>

flex: flex

Types =>

gap: gap

Types =>

gapX: gap from left to right

Types =>

gapY: gap from top to bottom

Types =>

fld: flexDirection

Types =>

jc: justifyContent

Types =>

ai: alignItems

Types =>

as: alignSelf

Types =>

bw: borderWidth

Types =>

bs: borderStyle

Types =>

bc: borderColor

Types =>

bbw: borderBottomWidth

Types =>

btw: borderTopWidth

Types =>

blw: borderLeftWidth

Types =>

brw: borderRightWidth

Types =>

rounded: borderRadius

Types =>

roundedTop: roundedTop

Types =>

roundedBottom: roundedBottom

Types =>

roundedTopLeft: borderTopStartRadius

Types =>

roundedTopRight: borderTopEndRadius

Types =>

roundedBottomLeft: borderBottomStartRadius

Types =>

roundedBottomRight: borderBottomEndRadius

Types =>

shadow: shadow and elevation for both ios and android,

Types =>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT