@doj/quick-ui-rn
v0.3.5
Published
a powerful React Native npm package designed to streamline and accelerate UI designing in your React Native projects.
Downloads
8
Readme
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-rnUsage
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