react-native-spinner-button - React Native button component with multiple animated spinners

  •        20

This is a pure javascript and react-native Button component with a Spinner embeded in it. In many of the react-native projects we have worked on required the button to be disabled when app is processing something on tap of that button, and a loading indicator on it or beside it, so the user can be made aware of app doing some processing. From a developer perspective, it is very painful to manage two different components: a button and a spinner for lots of buttons! So when we came accross this beautiful component SSspinnerButton, we decided to do something like that in react-native.

https://github.com/simformsolutions/react-native-spinner-button#readme

Dependencies:

react-native-animatable : ^1.3.0
react-native-indicators : ^0.13.0
babel-jest : 23.0.1
babel-preset-react-native : 4.0.0
jest : 23.1.0
react-test-renderer : 16.3.1

Tags
Implementation
License
Platform

   




Related Projects

react-native-button-component - A Beautiful, Customizable React Native Button component for iOS & Android

  •    Javascript

React Native Button component for iOS & Android. CircleButton, RoundButton, RectangleButton is on top of ButtonComponent. So I recommend you should use CircleButton, RoundButton, RectangleButton, rather than directly use ButtonComponent because those button components may have preset some options.

react-native-image-progress - Progress indicator for networked images in React Native

  •    Javascript

Note: Progress indicators has been broken out to a separate component; react-native-progress. To use them, please follow installation instructions for that package. Note: onLoad* events are bubbled up, so if you want to do some custom thing when the image is loaded for example.

react-native-progress-hud - A clean and lightweight progress HUD for your React Native app.

  •    Javascript

React Native Progress HUD is a React Native port of the popular SVProgressHUD. It is a clean and easy-to-use HUD meant to display the progress of an ongoing task. Are you using React? Check out React Progress HUD.


react-native-spinkit - A collection of animated loading indicators for React Native

  •    Objective-C

A collection of animated loading indicators React native port of SpinKit. Check index.ios.js in the Example folder.

react-native-button - A button for React apps

  •    Javascript

Install the button from npm with npm install react-native-button --save. Then, require it from your app's JavaScript files with import Button from 'react-native-button'. The React packager will include the Button component in your app's JS package and make it available for your app to use.

react-native-facebook-login - React Native component wrapping the native Facebook SDK login button and manager

  •    Objective-C

<FBLogin /> provides a React Native component wrapping the native Facebook SDK login button and manager. Note: Demo above includes debug text to confirm login (i.e. user name, email and access token). <FBLogin />, by default, will only display the native blue 'Log in with Facebook' button.

react-native-progress - Progress indicators and spinners for React Native using ReactART

  •    Javascript

Progress indicators and spinners for React Native using ReactART. To use the Pie or Circle components, you need to include the ART library in your project on iOS, for android it's already included.

react-native-button - A React Native button component customizable via props

  •    Javascript

A React Native button component customizable via style props. Renders a TouchableOpacity under iOS and a TouchableNativeFeedback under Android.

argon-react-native - Argon React Native

  •    Javascript

Argon React Native is a fully coded app template built over Galio.io, React Native and Expo to allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components in Galio to make it look like Argon's Design System, minimalistic and easy to use. Start your development with a badass Design System for React Native inspired by Argon Design System. If you like Argon's Design System, you will love this react native app template! It features a huge number of components and screens built to fit together and look amazing.

react-native-action-button - customizable multi-action-button component for react-native

  •    Javascript

to link all libraries with native dependencies in your project. ActionButton component is the main component which wraps everything and provides a couple of props (see Config below).

react-native-simple-radio-button - Simple and handy animated radio button component for React Native

  •    Javascript

callback when radio button clicked. The index of selected radio button. This is used when this component is activated. If you want to pass initial as asynchronous, you can use updateIsActiveIndex function.

react-native-platform-touchable - A wrapper around the various Touchable* components built into React Native core with platform defaults

  •    Javascript

A wrapper around the various Touchable* components built into React Native core in order to use TouchableNativeFeedback whenever possible, provide an easier interface to using it, and flatten out API differences between the Touchable components. iOS: Defaults to TouchableOpacity with default activeOpacity.

react-native-mask-loader - React Native App Loader that shows an expanding image as a mask on your app

  •    Javascript

This component provides a loading screen for React Native apps that is meant to reproduce Twitter's app loading animation. There is an accompanying blog post at https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html.

react-native-magic-move - Create magical move transitions between scenes in react-native 🐰🎩✨

  •    Javascript

A follow up project called react-native-shared-element has been created which can be considered the successor to react-native-magic-move. It it an all native solution that provides superior performance (no more passes over the react-native bridge) and transitions. It however does not support some of the more exotic transition types (flip, shrinkAndGrow) that Magic Move does. It also doesn't support the web-platform yet and requires native extensions to run. New users are advised to use react-native-shared-element when possible. As for Magic Move, no more new developments will be started for Magic Move, merely critical bug-fixes. This notification will be updated as development on react-native-shared-element progresses. * The native extensions are recommended to get the best performance, but they are not required. This makes it possible to use react-native-magic-move with expo or react-native-web. If you're having trouble installing the native extensions, please see this guide on how to install them manually.

native-starter-kit - React Native Starter App with NativeBase + CodePush + Redux

  •    Javascript

Note: Shifted to React Navigation from React Native Router Flux in the master branch. React Navigation has become standard for navigation solution in React Native. We are just keeping up with the current trend. No need of reinventing the wheel. To have immediately something to continue building on, it would be best to start from some starter kit for getting React Native - based applications off the ground in a hurry.

noder-react-native - The mobile app of cnodejs.org written in React Native

  •    Javascript

A new cnodejs.org mobile & web app powered by react-native and react-web and CodeceptJS . Click the run button in Xcode, if something went wrong, you need to rebuild all packages that be used in this project with Xcode (Just select the package and press command+B to run compile).

react-native-apple-authentication - A React Native library providing support for Apple Authentication on iOS and Android

  •    Javascript

A well typed React Native library providing support for Apple Authentication on iOS and Android, including support for all AppleButton variants. You are using React Native version 0.60 or higher.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.