azir's Introduction

Azir Framework

Please dont install azir-core, we recommend you to install whatever component you need into your app, if you want to install the core components please check this Example

Azir is one of the coolest React Native libraries you could ever use, licensed under MIT. Carefully crafted by developers for developers. Ready-made components, typography, and a gorgeous base theme that is easily adaptable to each project.

The Idea Behind Azir Framework is to Collect and Refactor popular react native open source modules in One Place Under One theme and also to avoid multiple dependencies and out of dated packages.

Azir core build using Galio Structure which will help us to unit all azir components under one theme .

Quick Start

SDK library instructions

Azir Goal is to give users the ability to download their favourite components when they need. you can directly download the core ui components you may always need in your app:

installation

npm install azir-theme azir-icon azir-text azir-input azir-button azir-radio azir-avatar azir-badge azir-hr --save

yarn add azir-theme azir-icon azir-text azir-input azir-button azir-radio azir-avatar azir-badge azir-hr

Import our UI component to your screens:

import Input from "azir-input";

Components

Azir Theme
Icon
Button
Text
Text Typography
Input
Radio
Radio Group
Checkbox
Checkbox Group
Switch
View More Text
Hr
Avatar
Badge
Slider
Flash Message

Documentation

The documentation for azir is hosted at our our website

Resources

Website: azir.io
Expo: expo.io
Issues: GitHub Issues Page

Licensing

Licensed under MIT

azir's People

Contributors

Stargazers

Watchers

azir's Issues

Invalid Hooks Handling

There is a bug resulting from the following code:
https://github.com/abodehq/azir/blob/master/azir-core/azir-slider/index.tsx

In the UseEffect you don't put the functions as a dependencies. As a result, the functions are not updating, although props such as disabled does update. For example, if you will create a disabled slider, you can't enable it.

You need to use useCallback and to add methods to the dependency list of the useEffects

azir-Slider does not update after the first render

When using the example for the azir-slider:

import Slider from "azir-slider";
---
<Slider
  value={30}
  step={10}
  minimumValue={0}
  maximumValue={100}
  onStart={value => console.log(value)}
  onChange={value => console.log(value)}
  onComplete={value => console.log(value)}
  trackColor="red"
  thumbColor="blue"
  progressTrackColor="green"
  thumbSize={50}
  trackSize={30}
/>

it works like in the example.
when changing the value field to this.state.position the slider is stuck at the first value given.
logging the this.state.position in the render function shows it gets updated.

abodehq / azir Goto Github PK