react-native-tiny-components

Getting started

$ npm install react-native-tiny-components

Usage

import { CheckBox, RadioButton, PopupComponent } from "react-native-tiny-components";


import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default class ExampleApp extends Component {

  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      active: false
    }
  }

  render() {
    return (
      <View style={{}} >
        <CheckBox
          name={"Select"}
          checked={this.state.checked}
          onChecked={(value) => {
            this.setState({ checked: value })
          }}
          textStyle={{ color: "black", fontSize: 16 }}
          color={"rgb(50, 168, 111)"}
          size={30} />

        <RadioButton
          textStyle={{ color: "black", fontSize: 16 }}
          name="Click Here"
          onChecked={(value) => {
            this.setState({ active: value })
          }}
          active={this.state.active}
          color={"#203546"}
          size={30} />

        <TouchableOpacity style={{
          padding: 5,
          backgroundColor: "#203546",
          margin: 10,
          height: 50,
          alignItems: "center",
          justifyContent: "center"
        }}
          onPress={() => {
            this.refs.popup.openDialog();
          }}>
          <Text style={{ color: "white", fontSize: 18 }}>{"Toggle Popup"}</Text>
        </TouchableOpacity>
        
        <PopupComponent ref="popup"
          components={
            <View style={{ backgroundColor: "white" }}>
              <Text>{"Message"}</Text>
            </View>
          }
          headerText="Click Here"
        />
      </View>
    )
  }
}

CheckBox

Props

Prop	Type	Optional	Default	Description
name	String	Yes		Title of checkbox.
checked	Boolean	No		value for the checkbox is checked or not .
onChecked	Function	No		Is called when an the checkbox is clicked .
color	String	Yes		Color for the check mark .
size	Integer	Yes		Size for the checkbox .
textStyle	Style	Yes		Style for the name .

RadioButton

Props

Prop	Type	Optional	Default	Description
name	String	Yes		Title for the radio button.
active	Boolean	No		value for the radio button is checked or not .
onChecked	Function	No		Is called when an the radio button is clicked .
color	String	Yes		Color for the radio button .
size	Integer	Yes		Size for the radio button .
textStyle	Style	Yes		Style for the name .

PopupComponent

Props

Prop	Type	Optional	Default	Description
ref	String	Yes		Will be used to toggle popup window.
components	JSX Components	No		Whatever is passed in the components prop will be show in the popup body.
headerText	String	No		Title for the popup .
headerStyle	Style	Yes		Style for the Title text .
headerTextStyle	Style	Yes		Style for the Title text container .

Note : This repo is still under construction