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

🔗 Links

Usage/Examples

//APP.TSX config
import React, {memo} from 'react';
const ThemeProvider = require('./Styles/ThemeProvider').default;
const App = () => {
  return (
    <ThemeProvider value={theme}>
     <AllPack />
    </ThemeProvider>
  );
};
export default memo(App);

//BLOG CARD
const BlogCard = () => {
  return (
  <Layout>
      <Heading txp='center'>blog Cards</Heading>

<CardView bg={Theme.activeColors.light} ws={200} hs={200}
 el={10} sR={5} sc='red'style={{margin:10,alignSelf:'center'}}>
  <Images uri={'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg'} imgS={150} imgH={100} style={{margin:10}}/>
  <Heading  txp='center' cl={Theme.activeColors.success} >beauty of nature</Heading>
  <TextView numLine={1} cl={Theme.activeColors.primary} style={{padding: 10,}}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet pariatur officiis consequatur necessitatibus veritatis natus sit adipisci nisi enim quos!</TextView>
  <RoundedButton align='center' bw={0.2} bc={Theme.activeColors.info} Pressing={()=>console.log('helllooooo')}><TextView>more...</TextView></RoundedButton>
</CardView>
  </Layout>
  )
}

export default BlogCard

//ACCORDION BOX

const data = [
  {
    title: 'accordion1',
    name: 'Hussein ',
    lastName: 'Asadi',
    job: 'just nothing',
    jobImage:
      'https://media.licdn.com/dms/image/C4D08AQF7dT4Xu9Mdlw/croft-frontend-shrinkToFit1024/0/1598293904802?e=2147483647&v=beta&t=DNhQO0ro-yffBiu1QvhnBtt5IxzPpFPw19yUZXvE6ZA',
  },
  {
    title: 'accordion2',
    name: 'John ',
    lastName: 'Den',
    job: 'just working',
    jobImage:
      'https://assets-global.website-files.com/6509fe179d7033a278a05268/652771a2ad43d990a8837c07_Blog-feature-HR-Pillar.png',
  },
  {
    title: 'accordion3',
    name: 'Sara ',
    lastName: 'Alarez',
    job: 'just makeup',
    jobImage:
      'https://blog-imgs-169.fc2.com/g/i/a/giadinhdoisongvn/makeup-artist.jpg',
  },
];
const AccordionBox = () => {
  return (
       <Layout>
      <FlashScreen
        data={images}
        disableVertical
        style={{marginBottom: '15%'}}
        renderItem={item => (
          <View style={styles.container}>
            <Accordion
              title={item.title}
              style={styles.accordTitle}
              cl="white"
              icon={<Icon name="down" size={20} style={styles.icon} />}>
              <View style={styles.accordionButton}>
                <Images uri={item.image} style={styles.BackImg} />
                <View style={styles.viewInfo}>
                  <TextView style={styles.infoText}>{item.title}</TextView>
                  <TextView style={styles.infoText}>
                    {item.score}
                  </TextView>
                  <TextView style={styles.infoText}> {item.year}</TextView>
                  <TextView style={styles.infoText}>
                  {item.style}
                  </TextView>
                </View>
              </View>
             
            </Accordion>
          </View>
        )}
      />
    </Layout>
  );
};

export default AccordionBox;

//BUTTONS
const Buttons = () => {
  return (
    <Layout ws={'100%'} style={{flexDirection: 'row' , flexWrap:'wrap'}}>
      <Heading txp='center'>Buttons </Heading>
      <Button>
        <TextView cl={Theme.activeColors.light}>simple Button</TextView>
      </Button>
      <RoundedButton>
        <TextView>Rounded button</TextView>
      </RoundedButton>
      <LoadingButton>
        <TextView cl={Theme.activeColors.light}> loading </TextView>
      </LoadingButton>
      <IconButton><TextView cl={Theme.activeColors.light}>user (your icon)</TextView></IconButton>
    </Layout>
  );
};

export default Buttons;

//IMAGE GALLERY
const GalleryImages = () => {
  const objects =  [ {
        images:
          'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',
      },
      {
        images:
          'https://y4v9k2m9.rocketcdn.me/pictures/google-on-stock-photography-authenticity.jpg',
      },
      {
        images:
          'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',
      },
      {
        images:
          'https://y4v9k2m9.rocketcdn.me/pictures/google-on-stock-photography-authenticity.jpg',
      },
      {
        images:
          'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',
      },
      {
        images:
          'https://y4v9k2m9.rocketcdn.me/pictures/google-on-stock-photography-authenticity.jpg',
      },
      {
        images:
          'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',
      },]
  return (
    <Layout >
      <Heading>image gallery</Heading>
        <Gallery 
        data={objects}
        renderItem={(item:any)=>(
          <Images 
          uri={item.images}
          imgH={100}
          imgS={100}
          style={{margin:5}}
          />
        )}
        />
      
    </Layout>
  )
}

export default GalleryImages

//INPUTS
const Inputs = () => {
  return (
    <Layout>
      <LabelInput
        label="this is label"
        wsize={200}
        bg={Theme.activeColors.info}
      />
      <Input holder="simple form" />
    </Layout>
  );
};

export default Inputs;

//LOADINGS
const Loadings = () => {
  return (
   <>
        <Heading txp='center'>Loading spinners</Heading>
    <Layout style={{flexDirection:'row' , flexWrap:'wrap' }}>
     <Spinner size={Theme.sizes.full} color={Theme.activeColors.danger}/>
     <Spinner size={Theme.sizes.xxl} color={Theme.activeColors.dark}/>
     <Spinner size={Theme.sizes.xl} color={Theme.activeColors.info}/>
     <Spinner size={Theme.sizes.lg} color={Theme.activeColors.primary}/>
     <Spinner size={Theme.sizes.md} color={Theme.activeColors.secondary}/>
     <Spinner size={Theme.sizes.sm} color={Theme.activeColors.danger}/>
    </Layout>
    </>
  )
}

export default Loadings

//MODAL
const Modal = () => {
    const [openModal ,  setOpenModal] = useState(false)
  return (
    <>
     <Button Pressing={()=>setOpenModal(true)}><TextView cl='white'>open modal</TextView></Button>
     <Window modalVisible={openModal} onRequestClose={()=>setOpenModal(false)}
     backStyle={'red'}
     animationType={'slide'}
     backgroundColor='green'
     modalBack={Theme.activeColors.secondary}
     >
        <Heading txp='center'>Hi! I'm Here </Heading>
        <Images uri={'https://th.bing.com/th/id/OIG4.LgUj9FIjzUbdTSMn0mRg'} imgS={200} imgH={200}/>

     </Window>
    </>
  )
}

export default Modal

//SELECTIONS


const Selection = () => {
  const [music, setMusic] = useState(false);
  const [dancing, setDancing] = useState(false);
  const [reading, setReading] = useState(false);
  const [pricing , setPricing] = useState(0)

  const price = [
    {
      name: 100,
      id: 1,
    },
    {
      name: 200,
      id: 2,
    },
    {
      name: 300,
      id: 3,
    },
  ];
  return (
    <>
    <Layout style={{flexDirection: 'row' ,flexWrap:'wrap'}}>
      <CheckBox
        onPress={() => setMusic(!music)}
        title="Music"
        isChecked={music}
        icons={<Text>icon</Text>}
      />
      <CheckBox
        onPress={() => setDancing(!dancing)}
        title="Dancing"
        isChecked={dancing}
        size={25}
        color="red"
      />
      <CheckBox
        onPress={() => setReading(!reading)}
        title="Reading"
        isChecked={reading}
        size={25}
        color="red"
      />
      {price.map((e, i) => (
        <Radio
        key={i}
        title={e.name}
        onPress={() => setPricing(e.id)}
        selected={e.id === pricing}
        />
      ))}
   
    </Layout>
      {price.map((e, i) => (
        <RadioButton
        label={e.name}
        key={i}
        selected={pricing === e.id}
        onSelect={() => setPricing(e.id)}
        />
      ))}
      <Toggle 
      trackColor={{false:'red', true:'green'}}
      thumbColor='red'
      value={'huuu'}
      
      />
    </>
  );
};

export default Selection;

//PRODUCT CARD


const SmallCard = () => {
  const product = [
    {
      name: 'T-shirt',
      price: 100,
      image:
        'https://a.cdn-hotels.com/gdcs/production157/d1079/b215ff33-0c46-4f08-8d34-cd992d722e9d.jpg?impolicy=fcrop&w=800&h=533&q=medium',
    },
    {
      name: 'jeans',
      price: 50,
      image:
        'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Souk_in_Tunisia_1.jpg/640px-Souk_in_Tunisia_1.jpg',
    },
    {
      name: 'shoes',
      price: 200,
      image:
        'https://a.cdn-hotels.com/gdcs/production157/d1079/b215ff33-0c46-4f08-8d34-cd992d722e9d.jpg?impolicy=fcrop&w=800&h=533&q=medium',
    },
    {
      name: 'Boot',
      price: 300,
      image:
        'https://www.cuddlynest.com/blog/wp-content/uploads/2022/08/shopping-in-san-francisco-scaled.jpg',
    },
  ];
  return (
    <Layout>
    <Heading txp='center'>Flash Screen and Small Cards</Heading>
    <FlashScreen
      data={product}
      horizontal
      disableHorizontal={false}
      renderItem={(item: any) => (
        <CardView el={4} sc="black" ws={100} ht="auto" style={{margin:10}}>
          <Images uri={item.image}  imgS={80} imgH={80} style={{margin:10,}} />
          <TextView txp='center' fs={14}>{item.name}</TextView>
          <TextView txp='center' fs={12}>{item.price}</TextView>
        </CardView>
      )}
    />
    </Layout>
  );
};

export default SmallCard;

//TOAST MESSAGE


const ToastMessage = () => {
  return (
    <View>
      <Toast
        long
        message="hi this is toast"
        style={{backgroundColor: 'red', width: 200, height: 50}}>
        <TextView>message</TextView>
      </Toast>
    </View>
  );
};

export default ToastMessage;

//TOAST MESSAGE
const ToastMessage = () => {
  return (
    <View>
      <Toast
        long
        message="hi this is toast"
        style={{backgroundColor: 'red', width: 200, height: 50}}>
        <TextView>message</TextView>
      </Toast>
    </View>
  );
};

export default ToastMessage;

//BACKGROUND IMAGE
<ImgBack
        require={require('./pepsi-messi-poster.png')}
        imgH={300}
        imgS={300}
      ><TextView>Hellooooo</TextView></ImgBack>

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