JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q88842F
  • License MIT

React Native Circle Button

Package Exports

  • react-native-circle-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-circle-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-circle-button

A Customizable React Native Circle Button, works on both Android and iOS.

demo

UPDATE v1.0.6: Support transparent background
note: It's lags due to gif recorder app, it actually works more smooth

Inspiration

Ux Concept by Nick Kumbari

Installation

  • npm install --save react-native-circle-button

Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import CircleButton from 'react-native-circle-button';

class MyExample extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <CircleButton size={45} />
            </View>
        );
    }
}

export default MyExample;

Props

Property Type Default Description
size number 40 Setting overall size
primaryColor string '#41727E' Color on inner button
secondaryColor string '#459186' Color on outer button
onPressButtonTop function () => {} Event onPress Button Top
onPressButtonRight function () => {} Event onPress Button Right
onPressButtonBottom function () => {} Event onPress Button Bottom
onPressButtonLeft function () => {} Event onPress Button Left
iconButtonCenter enum Source path to icon image on center
iconButtonTop enum Source path to icon image on top
iconButtonRight enum Source path to icon image on right
iconButtonBottom enum Source path to icon image on bottom
iconButtonLeft enum Source path to icon image on left

License

MIT