react-native-horror-ui

react-native-horror-ui package as component and style base component

Installation

Install my-project with npm

npm i react-native-horror

Documentation

Documentation hi everyone this is base ui component and section to defined pre complete ui structure and and ui components for you you can use this package for your application in react-native

Tips

1:use react-native vector icon if you want to add icons

2:more styles are available on source of component and will update soon 3:This package try to give you best and best 4:This package made by love for you 5:do not compare this package with other I'll do my best to keep this package uptodate

Example and Documentation

example and documentation is in this link or you can click on in right side link

https://husseinpenart.github.io/horror-ui-doc/

🔗 Links

Tech Stack

Tech: react-native, language: typescript,

API Reference

components

| Parameter | Type | Description | | :-------------- | :--------------------- | :----------------------------------------------------------------------------- | | Toast | Alert | name of using components . | | CardView | View for cards | name of using components . | | ThemeProvider | theme | this need to be in App.js or tsx or jsx to access colors and themes and more . | | ImageAvatar | profile | name of using components . | | Button | components | name of using components . | | IconButton | button with icons | name of using components . | | LoadingButton | button with loading | name of using components . | | RoundedButton | border button | name of using components . | | Divider | line | name of using components . | | ImagesGallery | galllery | name of using components . | | Layout | SafeArea | name of using as SafeArea . | | Spinner | loading | Loading components . | | FloatInput | textinput | animation float input . | | Input | textinput | simple input . | | accordion | Accordion box | accordion element with animation | | FlashScreen | flatlist | flashscreen to scroll like a flatlist but with more speed . | | Scroll | scrollView | as scroll View with more speed and flexability. | | window | Modal | widnow use as modal . | | checkbox | checkbox | using this require a icon of checked . | | radio | radio | customize radio but with choosing value. | | RadioButton | Radio Button | customized radio button . | | Heading | imageBackground | for background images and element inside. | | ImgBack | Text | for titles and headers . | | TextView | Text | as a text . | | Theme | cusomize theme usage | customized sizes by percentage and dp active colors gradient colors . |

and more components

Get styles

| Parameter | Type | Description | | :------------- | :---------------- | :------------------------------------------------------------------- | | style | styles | optional. all styles are optional | | blur | styles | optional.blur view for images | | theme | ThemeProvider | optional. sizes, percentSizes, activeColors, Gradient | | Gradient | array of colors | optional. primarysecondarysuccess,danger,warning,info,light,dark | | colors | colors | optional. primarysecondarysuccess,danger,warning,info,light,dark | | sizes | size dp | optional.sm,md,lg,xl,xxl,full | | percentSizes | size percent | optional.sm,md,lg,xl,xxl,full |

Color Reference

| Color | Hex | | --------------- | ---------------------------------------------------------------- | | primary Color | #726EFF | | secondary Color | #00E676 | | success Color | #00E676 | | danger Color | #FF5252 | | warning Color | #FFC107 | | info Color | #2196F3 | | light Color | #F5F5F5 | | lightBlue Color | #8CCEFF | | orange Color | #FF812B | | pink Color | #FF2BC5 | | darkGreen Color | #003901 | | yellow Color | #FFE033 |

Authors

• @husseinAsadi

License

MIT