Functional, simple and customizable UI buttons for react native.

Overview

React Native UI Buttons

npm npm

Installation

If you want to use icons make sure you have react-native-vector-icons installed in your project.

npm install --save react-native-ui-buttons

⚙️ Getting started

🚀 Solid Button

import {ButtonSolid} from 'react-native-ui-buttons';


   

🚀 Dual Tone Outline Button

import {ButtonOutline} from 'react-native-ui-buttons';


   

NOTE: See TestApp for more examples.

💡 Props

  1. All TouchableOpacityProps are valid.
  2. All props are optional.

🎨 Props to customize container styles

Attributes Type Description Default
title string Name of the button -
useColor string rgb() format required rgb(235, 52, 122)
style ViewStyle style will be applied to button container -

🎨 Props to customize container styles (utils)

Attributes Type Description Default
opacityReducer number ButtonSolid: amount by which opacity of disabled button should be reduced, ButtonOutline: ammount by which background of button should be reduced ButtonSolid 5, ButtonOutline 3
padding number padding of button ButtonOutline 18, ButtonSolid 19
borderRadius number Border Radius of button 4
noDisabledStyle boolean if true disabled button will be styled same as enabled button false

🎨 Props to customize text styles

Attributes Type Description Default
textStyle TextStyle style will be applied to text -
textOpacityReducer number (ButtonOutline only) amount by which opacity of text should be reduced, when button is disabled 5
textColor string (ButtonSolid only) color of text rgb(255,255,255)

🎨 Props to manage state of button

Attributes Type Description Default
disabled boolean set it to true when button is disabled false
buttonLoading boolean set it to true when button is loading false

🎨 Props for Icon

Attributes Type Description Default
materialIconRight string name field for MaterialIcon component -
materialIconLeft string name field for MaterialIcon component -
iconColor string Color of icon ButtonOutline useColor, ButtonSolid rgb(255,255,255)
iconSize number Size of icon 18

📦 (Optional) react-native-vector-icons Installation

  1. Install package
npm install --save react-native-vector-icons

IOS

  1. In your Info.plist add

   
    UIAppFonts
   

   
    
    
     MaterialIcons.ttf
    

   
  1. Install pods and reinstall app
npx pod-install
npx react-native run-ios

Android

  1. In your android/app/build.gradle add
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf' ]
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  1. Reinstall app
npx react-native run-ios

📝 Authors

Releases(v2.1.1)
Bringing Material Design to React Native

A set of UI components, in the purpose of introducing Material Design to apps built with React Native, quickly and painlessly. Getting Started First,

Yingxin Wu 4.8k Oct 9, 2021
[DEPRECATED] A Radio-button like logic wrapper for React Native

react-native-radio-buttons IMPORTANT this package is deprecated and no longer maintained in favor of the official SegmentedControlIOS component. A rea

Arnaud Rinquin 418 Sep 26, 2021
A lightweight, customizable and haptic Gradient Button component for React Native

React Native Gradient Buttons Lightweight, customizable and haptic Gradient Buttons for React Native. Requirements Requires React and React Native. Fo

Thomas Wang 180 Oct 4, 2021
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.7k Oct 12, 2021
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.

Customizable, lightweight React Native carousel component with accessibility support. Pinar is a lightweight and customizable React Native carousel co

Krister Kari 147 Oct 15, 2021
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Patrick Puritscher 406 Oct 3, 2021
🔔 Customizable modal components with ✔️check options in React Native

NOTICE This package was created just when I started react-native. And I thought I had to fix a lot of this package, and I decided to put a new named m

Yeongsu Han 50 Dec 28, 2020
Animated radio buttons component for react native

radio-buttons-react-native Animated radio buttons component for react native 4 types animation when click on any items of radio button DEMO install np

Siamak Ramezani 61 Sep 22, 2021
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 85 Aug 30, 2021
The best Swiper component for React Native.

The best Swiper component for React Native. react-native-swiper Roadmap see: ROADMAP.md Changelogs [1.6.0-rc] Dependency Remove ViewPagerAndroid, use

斯人 9.7k Oct 12, 2021
⚛ Cross-platform React Native dialogs based on the Modal component

React Native Simple Dialogs ⚛ Cross-platform React Native dialogs based on the Modal component. Features Custom Dialog Confirm Dialog Progress Dialog

Douglas Nassif Roma Junior 234 Oct 3, 2021
Pixel–perfect, native–looking typographic styles for React Native ✒️

Pixel–perfect, native–looking typographic styles for React Native. Why Creating great Text Styles in React Native is not a simple task, it requires a

Hector Garcia 3.3k Oct 14, 2021
A simple animated transition based on the dribble from invision.

react-native-md-motion-buttons (iOS / Android) I wanted to re-create this animation with react-native (https://dribbble.com/shots/1945593-Login-Home-S

Steeve Pitis 84 Aug 11, 2021
A simple and fully customizable React Native component that implements a progress stepper UI.

react-native-progress-steps A simple and fully customizable React Native component that implements a progress stepper UI. Each steps content is displa

Colby Miller 227 Oct 10, 2021
A fully customizable navigation bar in React Native.

react-native-pure-navigation-bar 中文说明 Here is a fully customizable navigation bar in React-Native. You can set the global unified style of navigation

shallot 92 Jul 1, 2021
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 15.2k Oct 12, 2021
Handy toolbelt to deal nicely with offline/online connectivity in a React Native app. Smooth redux integration ✈️

react-native-offline Handful of utilities you should keep in your toolbelt to handle offline/online connectivity in React Native. It supports iOS, And

Raúl Gómez Acuña 2k Oct 19, 2021
⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

React-Native Keyboard Manager Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects ⚛ . Thanks to awesome IQK

Douglas Nassif Roma Junior 611 Oct 14, 2021