React-native-composer NPM

Example image

React Native UI Components

React Native Stuff is a mobile-first, accessible component library for building a consistent design system across android & iOS.Its collection of high-quality UI components for React Native mobile apps.

Introduction
Motivation
Features
Dependencies
Installation
Components
Properties
Contributors
Contact
License

1.Introduction?

A collection of high-quality UI components for React Native mobile apps, designed to help you build amazing apps quickly and easily. This package provides both basic and advanced components, including buttons, inputs, forms, navigation, and more.

2.Motivation

"Empowering developers with reusable components and streamlining their workflow" "Building a library of commonly used components to save time and effort for the community" "Making a lasting impact on the React Native ecosystem by sharing your skills and knowledge" "Improving consistency and reliability in projects by using a centralized library of components" "Being a part of something greater and contributing to the growth and success of the React Native community".

3.Features

Available for Mobiles

React-Native-Stuff 1.0 is powered by ittechxpert so you can build consistent UIs across Web, Android and iOS.

Responsiveness Made Easy

Instead of manually adding responsiveness, React-Native-Stuff 1.0 allows you to provide object and array values to add responsive styles.

Highly Personalizable

Highly Personalizable is one of the core elements of React Native Stuff. You can customise your app theme and component styles to your development used content.

4.Dependencies

React Native Bare, Expo Cli

5.Installation

yarn add react-native-stuff
&
npm i react-native-stuff

6.Components

React-Native-Stuff 1.0 is a Intro component library with nearly 5 basic components.

7.Properties

Btn

import React from "react";
import { StyleSheet } from "react-native";
import Btn from "react-native-stuff";

const Login = () => {
  return (
    <>
      <Btn BgColor="warning" title={"Login"} />
    </>
  );
};

Property	Type	Description
`onPress`	`any`	Make any Event fire
`disabled`	`boolean`	Make your Btn disabled or nor
`buttonStyle`	`any`	Style your Btn
`textStyle`	`any`	Style your Btn's text
`title`	`any`	Show your title

Default Props

Property	Type	Description
`disabled`	`boolean`	false

Badge

import React from "react";
import { StyleSheet } from "react-native";
import Badge from "react-native-stuff";

const Login = () => {
  return (
    <>
      <Badge fillBg={false} Boundry={"success"} description={"New Feature"} />
    </>
  );
};

Property	Type	Description
`boundry`	`string`	only if fillBg is false
`fillBg`	`boolean`	Show BGColor or nor
`description`	`any`	Description for badge
`badgeStyle`	`any`	Style your Badge
`textStyle`	`any`	Style your Badge's text
`BgColor`	`String`	Direct BgColor change