ui lib for react-native

Related tags

Boilerplate tit-ui
Overview

tit-ui

tit-ui is a simple library that contains a set of UI components, functions and Form creating functionality.

Setup

To install lib open your project in command line and run:

npm install tit-ui

OR

yarn add tit-ui

Thats it!

Usage

For use you can import Functions, UI and Form:

import { Functions, UI, Form } from 'tit-ui'

UI

  • Switch - is UI component of switch:
import { UI } from 'tit-ui'

const [switchState, setSwitchState] = useState(false)

//...

return (
    <View style={styles.container}>
        <UI.Switch />
        <UI.Switch
            textStyle={{
                fontSize: 20
            }}
            containderStyle={{
                width: "50%",
                height: 50,
                marginTop: 15
            }}
            circleStyle={{
                width: "50%",
                height: 40,
                borderRadius: 20
            }}
            enabledCircleColor="#4DC861"
            disabledCircleColor="red"
            enabledText="On"
            disabledText="Off"
            enabledBackgroundColor="#ccc"
            disabledBackgroundColor="#ccc"
            onChangeState={switchState => setSwitchState(switchState)}
            initValue={true}
        />
    </View>
)

//...

Props

Name Description Default Type
value value of switch undefined bool
initValue initial position false bool
textStyle switch text style undefined style
containerStyle switch container style undefined style
circleStyle switch circle style undefined style
enabledCircleColor color for circle of switch when it is on '#fff' string
disabledCircleColor color for circle of switch when it is off '#fff' string
enabledText text of switch when it is on undefined string
disabledText text of switch when it is off undefined string
enabledBackgroundColor switch background color when it is on '#4666ff' string
disabledBackgroundColor switch background color when it is off '#ccc' string
onChangeState callback when switch is clicked (value) => {callback(value)} func

Methods

Name Description Return type
value value of switch bool
setValue() seting value none
  • TextInput - is UI component of text input.
//...
import { UI } from 'tit-ui'
//...
const [text, setText] = useState("")

return (
    <View style={styles.container}>
        <UI.Input
            placeholder='Some placeholder'
            label='This is label'
            note='This is note'
        />
    </View>
)
//...

Props

Name Description Default Type
value value of TextInput component "" string
containerStyle style of container that includes input container, label and note {} object
inputContainerStyle style of input container that includes TextInput, Left and Right components {} object
inputStyle style of TextInput component {} object
labelStyle style of label component on top of input that based on React-Native Text component {} object
noteStyle style of note component on bottom of input that based on React-Native Text component {} object
label text of label on top of input "" string
note text of note on bottom of input "" string
focusedBorderColor input container border color when TextInput is focused "#4666ff" string
focusedLabelColor label text color when TextInput is focused "#4666ff" string
Left component that will render on left side of input null React Component
Right component that will render on right side of input null React Component
and all TextInput component props any

Methods

Name Description Return type
inputRef reference of TextInput React-Native reference
focused true if TextInput focused and false if not bool
value value of TextInput string
setValue() seting value none
  • Button - is UI component of button.
//...
import { UI } from 'tit-ui'
//...
return (
    <View style={styles.container}>
        <UI.Button 
            text="Button"
        />
    </View>
)

Props

Name Description Default Type
style style of Button component object style
textStyle style of button text object style
onPress function that call when button pressed onPress={()=>{}} func
text text that will display on button "Button" string
loading boolean props that show or hide spinner, also if loading true function "onPress" will not be called false bool
loadingColor color of loading spinner "#ffffff" string
  • RadioButton - is UI component of radio button.
import { UI } from 'tit-ui'
//...
const [value, setValue] = useState(false)
const [value1, setValue1] = useState(false)
//...
return (
    <View style={styles.container}>
        <UI.Radio
            value={value}
            title="Title"
            onPress={() => setValue(!value)}
            activeColor="red"
            inactiveColor="black"
            containerStyle={{ marginBottom: 12 }}
        />
        <UI.Radio
            value={value1}
            title="Title 1"
            onPress={() => setValue1(!value1)}
            activeColor="red"
            inactiveColor="black"
        />
    </View>
)

Props

Name Description Default Type
containerStyle style of the component container object style
innerCircleStyle style of the inner circle object style
circleStyle style of the outer circle object style
value value of button, if true button is checked false bool
onPress function that call when button pressed onPress={()=>{}} func
title text that will display on right side of button "" string
titleStyle style of title component based on React-Native Text component {} object
activeColor color of circles when button is checked "#494043" string
inactiveColor color of circles when button is unchecked "#494043" string
initValue initial value of button false bool

Methods

Name Description Return type
value value of radio button bool
setValue() seting value none
  • Avatar - is UI component of image for lists to profile screens.
import { UI } from 'tit-ui'
//...
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width,
        alignItems: "center",
        justifyContent: "center"
    }
})
//...

return (
    <View style={styles.container}>
        <UI.Avatar
            source={{ uri:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSsb3dnwW7TWK8zRGaCQ_ThqeLRWTZKXsWAL5z6rI_9UAwM0NqH" }}
            nameString="Tit Hardwood"
            badge={100}
            style={{ marginBottom: 15 }}
        />
        <UI.Avatar
            nameString="Tit Hardwood"
            badge={5}
        />
    </View>
)

Props

Name Description Default Type
source source to image undefined React-Native Image component source
nameString string of user name or description "" string
onPress function that call when avatar pressed onPress={()=>{}} func
badge used if you need to render badge on avatar 0 number
style style of the component container {} style
imageStyle style of the image {} style
badgeStyle style of the badge {} style
badgeTextStyle style of the badge {} style
imageProps React-Native Image component props undefined object
letterStyle style of letters of nameString when imageUrl is empty {} style
  • Badge - is UI component used to render a numerical value.
    import { UI } from 'tit-ui'
    //...
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            width,
            alignItems: "center",
            justifyContent: "center"
        }
    })
    //...
    return (
        <View style={styles.container}>
            <UI.Badge badge={1} />
            <UI.Badge badge={12} />
            <UI.Badge badge={123} />
        </View>
    )

Props

Name Description Default Type
badge used if you need to render badge on avatar 0 number
style style of the component container object style
textStyle style of the badge value object style
  • Image - Image component with scale.
import { UI } from 'tit-ui'

return (
    <UI.Image
        source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgrZ4O36TDysDmv3itq4KPoOVtE39kVgcC-NE0-iRp&s' }}
        style={{
            width: '100%',
            aspectRatio: 16 / 9
        }}
        canScale
    />
)

Props

Name Description Default Type
source source to image undefined React-Native Image component source
canScale props to enable or disable scale false bool
showLoading show spinner while image loading true bool
containerStyle style of component container {} object
imageStyle style of React-Native Image component {} object
loadingContainerStyle style of loading container {} object
loadingColor color of loading spinner {} string
loadingSize size of loading spinner "large" enum "large" or "small"
and all React-Native Image component props any
  • FlatList - is modified React-Native FlatList component.
import { UI } from 'tit-ui'

return(
    <UI.FlatList
        data={new Array(10).fill({})}
        style={{ flex: 1 }}
        contentContainerStyle={{ padding: 12, alignItems: 'center' }}
        loading={true}
        renderItem={() => (
            <UI.Image
                source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgrZ4O36TDysDmv3itq4KPoOVtE39kVgcC-NE0-iRp&s' }}
                style={{
                    width: width - 30,
                    aspectRatio: 16 / 9,
                    marginBottom: 12
                }}
                canScale
            />
        )}
    />
)

Props

Name Description Default Type
loading if this property is true refresh controll or LoadingConponent is showing up false bool
onRefresh RefreshControl onRefresh property () => {} function
LoadinComponent component that will be showing up instead of ListEmptyComponent if loading true null React-Native component
useRefreshControl if true used RefreshControll component to FlatList true bool
emptyComponenText Default ListEmptyComponent text "There is nothing here" string
and all FlatList component props any

Form

Form is wrapper component that can return all named components value like web forms. Working with UI components of this library. If you can use web forms you know how to use this Form. All you need is:

  1. Name your components - Provide a "name" props to component you want to take a value. This name will be key in returned result object

  2. Mark your trigger - Provide a "type" props with string "submit" value to mark trigger. All pressable component can be a trigger. Form put "onSubmit" function into "onPress" props of it. And when trigger pressed values will pass to "onSubmit" function arguments.

  3. Provide a "onSubmit" function - Provide a function in "onSubmit" props of Form compoent.

Thats it! Your form is ready. If you want to use your own component in Form, you should modify your component like this.

import { Form, UI } from 'tit-ui'

return (
    <Form
        onSubmit={(result) => { //onSubmit function
            console.log("result", result)
            alert(JSON.stringify(result))
        }}
        initValues={{
            name: "Tit",
            surname: "Hardwood",
            switch: true
        }}
    >
        <View style={{ flexDirection: "row", width: "100%", justifyContent: "space-between" }}>
            <UI.Input
                placeholder='name'
                containerStyle={{ marginBottom: 12, width: '48%' }}
                label='Name'
                name='name' //this name prop 
            />
            <UI.Input
                placeholder='surname'
                containerStyle={{ marginBottom: 12, width: '48%' }}
                label='Surname'
                name='surname' //this name prop 
            />
        </View>
        <UI.Input
            placeholder='pass'
            label='Pass'
            containerStyle={{ marginBottom: 12 }}
            name='pass' //this name prop 
        />
        <UI.Radio
            name='check-box' //this name prop 
            title='need your submition'
            containerStyle={{ marginBottom: 12 }}
        />
        <View style={{ flexDirection: 'row', width: "100%" }}>
            <UI.Switch
                name='switch' //this name prop 
                containerStyle={{ marginBottom: 12 }}
            />
            <Text style={{ marginLeft: 6 }}>wont to subscribe to notificattion</Text>
        </View>
        <UI.Button
            type='submit' //this is trigger props 
            text="Submit"
        />
    </Form>
)

Props

Name Description Default Type
onSubmit Function that return values by object undefined function
initValues object of initial values of form undefined object

Methods

Name Description Return type
submit() Method to trigger "onSubmit" function none

Functions

  • normalize - is a function which normalizes the font size of the text relative to the screen size.
import { Functions } from 'tit-ui'

//...

return (
    <View style={styles.container}>
        <Text style={{ fontSize: Functions.normalize(14), color: "#000000", marginBottom: 15 }}>Some text</Text>
    </View>
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});
  • wordsFromUpperCase - is a regex function that replace words first lower case character to upper.
import { Functions } from 'tit-ui'

//...

return (
    <View style={styles.container}>
        <Text style={{ fontSize: 14, color: "#000000" }}>{"some text without upper case"}</Text>
        <Text style={{ fontSize: 14, color: "#000000" }}>{Functions.wordsFromUpperCase("some text without upper case")}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

  • hexToRgba - is a function that can convert color hex value to rgb or rgba.
import { Functions } from 'tit-ui'
//...
const color = "#c260b5"
const alpha = 0.2
return (
    <View style={styles.container}>
        <Text>{color}</Text>
        <Text>{Functions.hexToRgba(color)}</Text>
        <Text>{Functions.hexToRgba(color, alpha)}</Text>
    </View>
)

You might also like...
StarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL.
StarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL.

StarHackIt StarHackIt is a fullstack starter kit composed of: React web frontend Node backend React native mobile app Infrastructure as code with GruC

Boilerplate to build Cross-Platform Apps with Expo and React Native

Boilerplate to build Cross-Platform Apps with Expo and React Native

React native boilerplate with formik, ui kittens, eslint setup, and expo

Boilerplate for React native project All you need to make an app for react native application This project is a template starter kit with expo. Have .

👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets
👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

React Native UIKit

Usage npx react-native init MyApp --template react-native-template-components Get started Run cmd Step 1: npm uninstall -g react-native-cli Step 2: np

Get your simple but strongly structured react native starter template
Get your simple but strongly structured react native starter template

React-Native-Starter-Template Simple but strongly structured react native starter template 🚀 Why should i use this? It helps you to easily start your

Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

React Native Web Advanced Template

🛸 react-native-web-advanced-template ⭐ Features: React Native Web TypeScript React Navigation React Native Elements React Native Vector Icons Other ?

Small ES6 Native Speed jQuery for Svelte, Vue3, React, Angular, and WEB

sQuery This is a Very Small ES6 Native Speed jQuery for Svelte, Vue3, React, Angular, and WEB. Are you fed up with the modern js frameworks? But you'r

Owner
Tit Hardwood
React-Native, React JS, Node JS
Tit Hardwood
React Native Expo: App Restaurantes realizada con React Hooks, React Native, Firebase

React Native Expo: App Restaurantes realizada con React Hooks, React Native, Firebase Proyecto completo desarrollado con React Native. La app cuenta c

Joaquin Suarez 3 Sep 4, 2022
Template combile React Native and react-native-web with same structure

React Native Web Template 同构react-native和react-native-web的一个template 为什么要用我 react-native-web官方没有集成react-native的正式方案 这个template是用react-native init创建的项目

Theo 4 Sep 5, 2022
Docusaurus-react-native-plugin - A plugin to enable React Native Web and Reanimated on Docusaurus.

Docusaurus React Native Plugin A plugin to enable React Native Web and Reanimated on Docusaurus. Installation yarn add @gorhom/docusaurus-react-native

Mo Gorhom 29 Apr 30, 2022
A template for React-Native | Typescript | Redux | React-Navigation

ReactNativeTemplate A template for React-Native. Folder Structure src api apiHelpers - includes helper functions like parsing api data config - contai

Nikhil B Kuriakose 5 Sep 4, 2022
A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Inderpal Singh 19 Oct 11, 2022
Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

React Template A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template cus

Ibrahim Elaradi 12 Aug 18, 2022
Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

React Template A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template cus

Ibrahim Elaradi 12 Aug 18, 2022
Template react native typescript project with Redux, Saga, React Navigation

React Native TypeScript Template Description Template react native typescript project with Redux, Saga, React Navigation. How to run Clone this projec

null 8 Nov 17, 2022
Projeto desenvolvido com React.js React Native Node.js TypeScript

World Cup Pré-Requisitos. React.js, React Native, Node.js, JavaScript, TypeScript. Node.js Site: https://nodejs.org/en/ React.js Site: https://pt-br.r

Daniel Oliveira 4 Dec 7, 2022
Build themeable React & React Native applications with your Bumbag 👝

Warning This library is currently unmaintained. You may want to look at a similar alternative like Chakra UI, Material UI or Mantine. ?? Bumbag Build

jxom 1k Dec 6, 2022