ui-meter

React Native UI Meter

Introducing our comprehensive React Native UI library, designed to streamline your app development process. This library includes customizable App Themes, Cross-platform compatibility for both iOS and Android. It features a rich collection of pre-built components, powerful hooks for enhanced functionality, intuitive form state management, and integrated query handling for efficient data management. With this library, you can create beautiful, functional, and responsive applications effortlessly, providing a seamless and efficient development experience.

Installation

npm install ui-meter react-native-svg
// or
yarn add ui-meter react-native-svg

Usage

import { Box, Center, Text } from 'ui-meter';

export default function App() {
  return (
    <Box>
      <Center height="100%">
        <Text color="red" fontWeight="bold" fontSize={20}>
          Hello World
        </Text>
      </Center>
    </Box>
  );
}

Features

• App Theme
• Cross platform Universal
• Components
• Hooks
• From state handle
• Query support

API Reference

• Installation
• Usage
• Components
  • Layout
    • Box
    • Center
    • HStack
    • VStack
    • Divider
  • Typography
    • Text
    • Heading
  • From
    • Button
    • CheckBox
    • Radio
    • Switch
    • Input
• Props
  • Layout Props
  • Typography Props
• Contributing
• Support
• Feedback
• FAQ
• Links
• Authors
• License

Components

Introducing our comprehensive React Native UI library with customizable themes, universal components, powerful hooks, efficient form state handling, and integrated query support. Create beautiful, functional, and responsive applications effortlessly.

Layout

Box

import { Box, Text } from 'ui-meter';

export default function () {
  return (
    <Box backgroundColor="red" padding={50} borderRadius={10}>
      <Text textAlign="center">This is the Box</Text>
    </Box>
  );
}

Center

import { Box, Text, Center } from 'ui-meter';

export default function () {
  return (
    <Center>
      <Box backgroundColor="red" padding={50} borderRadius={10}>
        <Text textAlign="center">This is the Box</Text>
      </Box>
    </Center>
  );
}

HStack

import { Box, Text, HStack } from 'ui-meter';

export default function () {
  return (
    <HStack>
      <Box backgroundColor="red" padding={50} borderRadius={10}>
        <Text textAlign="center">This is the Box</Text>
      </Box>
      <Box backgroundColor="red" padding={50} borderRadius={10}>
        <Text textAlign="center">This is the Box</Text>
      </Box>
    </HStack>
  );
}

VStack

import { Box, Text, VStack } from 'ui-meter';

export default function () {
  return (
    <VStack>
      <Box backgroundColor="red" padding={50} borderRadius={10}>
        <Text textAlign="center">This is the Box</Text>
      </Box>
      <Box backgroundColor="red" padding={50} borderRadius={10}>
        <Text textAlign="center">This is the Box</Text>
      </Box>
    </VStack>
  );
}

Divider

import { Box, Text, Center, Divider } from 'ui-meter';

export default function App() {
  return (
    <Center height={'100%'}>
      <Box width={200}>
        <Box backgroundColor="red" padding={50} borderRadius={10}>
          <Text textAlign="center">This is the Box</Text>
        </Box>
        <Divider m={10} backgroundColor={'green'} orientation="horizontal" />
        <Box backgroundColor="red" padding={50} borderRadius={10}>
          <Text textAlign="center">This is the Box</Text>
        </Box>
      </Box>
    </Center>
  );
}

Typography

Text

import { Box, Center, Text } from 'ui-meter';

export default function App() {
  return (
    <Box>
      <Center height="100%">
        <Text color="red" fontWeight="bold" fontSize={20}>
          Hello World
        </Text>
      </Center>
    </Box>
  );
}

Heading

import { Box, Center, Heading } from 'ui-meter';

export default function App() {
  return (
    <Box>
      <Center height="100%">
        <Heading color="red">Hello World</Heading>
      </Center>
    </Box>
  );
}

Button

import { Button, ButtonText, Center } from 'ui-meter';

export default function App() {
  return (
    <Center flex={1} paddingHorizontal={10}>
      <Button variant="outline">
        <ButtonText color="black"> Click Me </ButtonText>
      </Button>
    </Center>
  );
}

CheckBox

import { Center, Checkbox } from 'ui-meter';

export default function App() {
  const handleCheck = (check: boolean) => {
    console.log(check);
  };

  return (
    <Center flex={1}>
      <Checkbox onCheck={handleCheck} label="Label" />
    </Center>
  );
}

Radio

import { Center, Radio, RadioGroup } from 'ui-meter';

export default function App() {
  const handleChange = (value: string) => {
    console.log(value);
  };

  return (
    <Center flex={1}>
      <RadioGroup onChange={handleChange} rowGap={10}>
        <Radio
          label="label1"
          value="change 1"
          isDisabled={false}
          isInvalid={false}
        />
        <Radio
          label="label2"
          value="change 2"
          isDisabled={false}
          isInvalid={false}
        />
      </RadioGroup>
    </Center>
  );
}

Switch

import { Center, Switch } from 'ui-meter';

export default function App() {
  const handleChange = (value: boolean) => {
    console.log(value);
  };

  return (
    <Center flex={1}>
      <Switch onChange={handleChange} />
    </Center>
  );
}

Input

import { Center, Input } from 'ui-meter';

export default function App() {
  return (
    <Center flex={1} paddingHorizontal={10}>
      <Input
        variant="underline"
        placeholder="Enter Your Password"
        type="password"
        passwordLockBg="#fff"
      />
    </Center>
  );
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Support

For support, email [e-mail]

Feedback

If you have any feedback, please reach out to us at [e-mail]

FAQ

Question 1

Answer 1

Question 2

Answer 2

🔗 Links

Authors

• @rezaulkarim

License

MIT