jacklam718 / react-native-button-component

A Beautiful, Customizable React Native Button component for iOS & Android

React Native Button component

React Native Button component for iOS & Android.

Provided Components

This library provided the following button components:

ButtonComponent
CircleButton
RoundButton
RectangleButton

Installation

1. npm install --save react-native-button-component
2. react-native link react-native-button-component

Note

If you didn't see this item libART.a under the Link Binary With Libraries or you get this error No component found for view with name "ARTSurfaceView" Please open Xcode project and add libART.a under Build Phases -> Link Binary With Libraries

The detailed steps:

1. Open Xcode project
2. Build Phases -> Link Binary With Libraries
3. Click the + button and Click Add Other...
4. Open with node_modules/react-native/Libraries/ART/ART.xcodeproj
5. Click the + and select the libART.a and click Add

Some Simple Examples

One State Button
Multiple States Button
Spinner Button
Progress Button
Circle Button

Documents

Props & Button Options
Options for Progress Button
Options for Spinner Button
Options for Circle Button

Usage - Basic

Button with one state

import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent
<ButtonComponent
  onPress={() => {}}
  image={require('button-image.png')}
  text="Button"
>
</ButtonComponent>

Button with multiple states

import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent
<ButtonComponent
  buttonState={this.state.buttonState} // "upload" or "uploading"
  states={{
    upload: {
      onPress: () => {
        this.imageUploader.upload();
        this.state.setState({ buttonState: 'uploading' });
      },
      image: require('upload-image.png'),
      text: 'Upload Image',
    },
    uploading: {
      onPress: () => {
        this.imageUploader.cancelUpload();
        this.state.setState({ buttonState: 'upload' });
      },
      spinner: true,
      text: 'Uploding Image...',
    },
  }}
>
</ButtonComponent>

Usage - With Your Configurations

Button with one state

<ButtonComponent
  text="Button"
  type="primary"
  shape="rectangle"
  backgroundColors={['#4DC7A4', '#66D37A']}
  gradientStart={{ x: 0.5, y: 1 }}
  gradientEnd={{ x: 1, y: 1 }}
  height={80}
  onPress={() => {}}
  image={require('button-image.png')}
>
</ButtonComponent>

Button with multiple states - different config for different states

import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent
<ButtonComponent
  buttonState={this.state.buttonState} // "upload" or "uploading"
  gradientStart={{ x: 0.5, y: 1 }}
  gradientEnd={{ x: 1, y: 1 }}
  states={{
    upload: {
      text: 'Upload Image',
      backgroundColors: ['#4DC7A4', '#66D37A'],
      image: require('upload-image.png'),
      onPress: () => {
        this.imageUploader.upload();
        this.state.setState({ buttonState: 'uploading' });
      },
    },
    uploading: {
      text: 'Uploding Image...',
      gradientStart: { x: 0.8, y: 1 },
      gradientEnd: { x: 1, y: 1 },
      backgroundColors: ['#ff4949', '#fe6060'],
      spinner: true,
      onPress: () => {
        this.imageUploader.cancelUpload();
        this.state.setState({ buttonState: 'upload' });
      },
    },
  }}
>
</ButtonComponent>

Button with multiple states - one config for different states

<ButtonComponent
  buttonState={this.state.buttonState} // "upload" or "uploading"
  gradientStart={{ x: 0.5, y: 1 }}
  gradientEnd={{ x: 1, y: 1 }}
  backgroundColors={['#4DC7A4', '#66D37A']}
  states={{
    upload: {
      text: 'Upload Image',
      image: require('upload-image.png'),
      onPress: () => {
        this.imageUploader.upload();
        this.state.setState({ buttonState: 'uploading' });
      },
    },
    uploading: {
      text: 'Uploding Image...',
      spinner: true,
      onPress: () => {
        this.imageUploader.cancelUpload();
        this.state.setState({ buttonState: 'upload' });
      },
    },
  }}
>
</ButtonComponent>

License

MIT

react-native-button-component's Issues

try experiment feature

is this ready to support off loading animation with the native driver?

react-native link doesn't work properly

After installing your lib, then I ran "react-native link" but seems it doesn't work.
"Spin-kit" was not linked and I have to do manually after headache hours.

Can you please check again this feature?

Couldn't find preset "react-native-stage-0"

Error: Couldn't find preset "react-native-stage-0" relative to directory "/Users/kaelthas/****/node_modules/react-native-button-component"

Error linking module

Hi, I tried to use this package but when I do the link it throws this error and it won't build

child_process.js:526
    throw err;
    ^

Error: Command failed: node node_modules/react-native/local-cli/cli.js link react-native-spinkit && node node_modules/react-native/local-cli/cli.js link react-native-linear-gradient
rnpm-install info Linking react-native-spinkit android dependency
rnpm-install info Android module react-native-spinkit has been successfully linked
rnpm-install ERR! Something went wrong while linking. Error: Expected "/*" or ";" but "\"" found.

I'm using RN Version 0.44 on Android 6.0

mimick a light switch style button

hey there, came across your component, thanks for creating it!

before i dive into some testing of the api etc i thought I'd post this as you will have an immediate idea whether this is possible. we've got the following button mockup. when the user presses it, we want it to animate to an "on" switch state where the button looks like its been physically pressed inwards. to get the effect we're after it looks like the button itself, would be 2 Views (the light green View on top of the dark green view which would be positioned with 'absolute' & zIndex). that's just one approach tho, perhaps a different way is fine too..

if the user taps the button again, the it would return back to the "off" state (as per this example image)

Cannot apply styles in text of the button by buttonStyle

I have this component:
`<ButtonComponent

      text="LOG IN"
      type="primary"
      shape="rectangle"
      backgroundColors={['#F9D218', '#FF9D5D']}
      gradientStart={{ x: 0.5, y: 1 }}
      gradientEnd={{ x: 1, y: 1 }}
      height={60}
      buttonStyle={styles.btnLogin}
      onPress={() => {alert('pressed me')}}
    >
    </ButtonComponent>`

and its styles :
btnLogin:{ fontSize:30, borderRadius:8, fontWeight: "700", color:'#000' }

Button just apply borderRadius property but the rest (fontSize, fontWeight, color) is not.

Buttons disappear when being in a row oriented container.

Whenever I put multiple buttons next to each other in one row using
flexDirection: 'row'
on the view surrounding them they just disappear.

Normal column alignment works fine.

Native component for "BVLinearGradient" does not exist

I installed the component but it is giving the following error.

"Invariant Violation: Native component for "BVLinearGradient" does not exist"

I have also run the following commands

react-native link react-native-spinkit
react-native link react-native-linear-gradient

The projects uses latest version of RN - 0.51
react-native-linear-gradient - version - 5.6.0

font size??

how to changue the size to the text?

Dependencies don't support React Native >= 0.40

React Native's 0.40.0 release included breaking changes for iOS.

This package has a dependency on react-native-linear-gradient at ^1.5.15, which works for previous versions of React Native but not on the current one. Version 2.0.0 of react-native-linear-gradient has been updated to work with React Native 0.40.0, though.

This package also depends on react-native-spinkit at ^0.1.5. React Native 0.40 support was added in version 1.0.0 of the package.

Diagonal gradient

Hi , How to create Diagonal gradient. I cat just create horizontal gradient
this is my result . But i want diagonal button

An issue on android

Hi, I run into some issue when try to use this in android, I imported the component and my app starts with no error, but the buttons are not showing. Should I run react-native link first? Many thanks.

when I run react-native link I got error:

events.js:141
throw er; // Unhandled 'error' event
^

Error: spawn bash ENOENT
at exports._errnoException (util.js:870:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:442:9)
at process._tickCallback (node.js:356:17)
at Function.Module.runMain (module.js:443:11)
at startup (node.js:139:18)
at node.js:968:3

blank screen

i install the module and linked successfully with the libART.a file but it is still not working.
current versionL: 0.1.13
RN: 0.41.2

怎么设置backgroundColor渐变色

怎么设置backgroundColor渐变色

react-native link failed

Hi) I want to thank you for your awesome component, but i have error when i tried to link:

Scanning 759 folders for symlinks in .../node_modules (8ms)
[react-native-button-component] - linking native dependencies
.../node_modules/react-native-spinkit/scripts/rnpm-prelink.js:21
var str = depStr[0];
^

TypeError: Cannot read property '0' of null
at Object. (.../node_modules/react-native-spinkit/scripts/rnpm-prelink.js:21:17)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
.../node_modules/react-native/local-cli/core/makeCommand.js:29
throw new Error(Error occured during executing "${command}" command);

it's like react-native-spinkit/scripts/rnpm-prelink.js:21 -> depStr doesn't have elements inside and it caused errors, that's why i don't see button.
Could you resolve this bug or tell me what to do?
OS: Ubuntu 17.04
RN: 0.46
react-native-button-component: 0.1.18 (latest)

Dependencies react-native-circular-progress will crash app

The dependencies in package.json with cconstantinescu/react-native-circular-progress has a bug will crash the app when build with 'release'.

Please check: bartgryszko/react-native-circular-progress#86 (comment)

How to create disabled state?

I tried setting opacity to .5. It didnt work. Any other way?

Error Occurred in the new version: In this environment the sources for assign MUST be an object.

This exception is occurred on both platform. I think it should be the new version bugs since i used react-native-button-component for 3 weeks before and it works normally .

Initially disabled button won't enabled after

  OS: Windows 10
  Node: 8.11.3
  Yarn: 1.9.2
  npm: 6.2.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

react-native-button-component: 0.2.28

Using this code:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  TextInput,
} from 'react-native';
import { RoundButton } from 'react-native-button-component';

export default class App extends Component<Props> {
  constructor(props){
	  super(props);
	  this.state = {password:''};
  }
  render() {
	let {password} = this.state;
    return (
      <View style={styles.container}>
        <TextInput onChangeText={(password) => this.setState({password})} value={password}/>
	<RoundButton text='Submit' disabled={!password}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
}});

When state is initiated with empty value, the RoundButton get disabled but won't become enabled after.
However, if you set initial state to non-empty, it works as expected(disabled when input become empty)
Edit: Tested on Android
Edit 2 : same as #26 but it's not fixed(as discussed there)

Problems in props

In the readme page, the basic example is working without problem, but the example named as "Button with one state" can not work, and the problem lines in the commas in the example (<ButtonComponent , , >), which prevented my application from rendering.

same applies to other examples with commas

boxShadow is not applied to buttonStyle prop

My test code :

const styles = StyleSheet.create({
  button: {
    shadowColor: "red",
    shadowOffset: {
    width: 0,
    height: 9,
    },
    shadowOpacity: 0.8,
    shadowRadius: 12.35,

    elevation: 19,
  }
});

<ButtonComponent
      buttonStyle={styles.button}
>
</ButtonComponent>

p.s: wonderful job :)

Is it possible to disable the changing text spinning animation?

As title.
I am just wondering if it's possible to disable the changing text spinning animation?
I couldn't find any props to do this.

Thank you.

__DEV__ is not defined

error
react-native-button-component/index.js:DEV is not defined

The button is not visible.

I just installed it via npm and run "react-native link" and everything worked fine.
and I tried to render this component but it's not visible on the screen.
I tried to inspect the component by Toggle Inspector on developer menu but I can't touch anything.

platform

Android, IOS

package version

"react": "15.4.2",
"react-native": "^0.42.3",
"react-native-button-component": "^0.1.16"

code

import RoundButton from 'react-native-button-component';

...

render() {
  const { err1, err2, orientation } = this.state;

  return (
    <Container style={{ backgroundColor: '#3498db' }}>
      <Content>
        <Grid>
          <Row size={75} style={{ height: orientation === 'PORTRAIT' ? 300 : 130, alignSelf: 'center' }}>
            ...
          </Row>
          <Row size={25}>
            <Content>
              <Form style={{ marginLeft: 10, marginRight: 20 }}>
                ...
                <View>
                  <RoundButton
                    buttonState={this.state.buttonState}
                    backgroundColors={['#212122', '#414141']}
                    text={"Sign In"}
                    onPress={this.handleSubmit.bind(this)}
                  />
                </View>
                ...
              </Form>
            </Content>
          </Row>
        </Grid>
      </Content>
    </Container>
  );
}

I also tried to render outside NativeBase Component(Container, Content) but it still doesn't appear.
I tried almost any possible case like removing options, adding width and height, replacing it with other components (ButtonComponent, CircleButton, RectangleButton) but still doesn't work.

Setting disabled through setState

I am using this:

import { RoundButton } from 'react-native-button-component';

<View style={{width: "100%", justifyContent: "center", alignItems: "center"}}>
    <RoundButton text="Terminar compra" onPress={() => navigate("PurchaseConfirmation", { data: this.state.basket})} 
        disabled={this.state.anyProductSelected == false}
        style={{width: 125, height: 35, marginBottom: 5, marginTop: 5}}>
    </RoundButton>
</View>

And I am updating the state with:

addHandler = (index: number, product: Product) : number => {
        ...
        this.setState({ anyProductSelected: true});
    }

But the button stays disabled (while the rest of the UI updates just fine).

Am I doing something wrong or this not supported?

More data:

• "react": "16.0.0-alpha.12",
• "react-native": "^0.47.1",
• "react-native-button-component": "^0.1.24",
• typescript 2.3
• Android 7 (emulator)

'React/RCTViewManager.h' file not found

I got this error after installing your component:

But the react-native-spinkit module already exists in my project, and it links successfully:

I'd appreciate it if you could offer any help, thanks in advance.

Can't run example project

Just got the message: 'Couldn't find preset "react-native"relative to directory

undefined is not an object (evaluating 'currentButtonState.gradientStart')

My source code:

...
this.state = {
buttonState: 'entrar',
};

this.states = {
login: {
text: 'Entrar'.toUpperCase(),
onPress: this.doLogin,
},
onLogin: {
spinner: true,
gradientStart: [0.8, 1],
gradientEnd: [1, 1],
spinnerColor: '#000000',
text: 'Autenticando...'.toUpperCase(),
},
success: {
text: 'Autenticado 👍'.toUpperCase(),
},
...

or

using ButtonComponent instead RoundButton.

I can't run this on android

I can't run this on android.
Please can someone explain me how to use this in android?

ReactNativeART doesn't exist

After I install and run react-native link I get this error:

error: bundling: UnableToResolveError: Unable to resolve module 
`../../react-native/Libraries/ART/ReactNativeART` from 
`/Users/admin/Desktop/Programming/myapp/node_modules/react-native-button-component/node_modules/react-native-circular-progress/src/CircularProgress.js`: 
Directory /Users/admin/Desktop/Programming/myapp/node_modules/react-native-button-component/node_modules/react-native/Libraries/ART/ReactNativeART doesn't exist

(The error was on one line, but I've added some line breaks to make it more readable)

It seems to be that react-native-circular-progress can't find ART. I think this is because they use relative imports for ART. I've made a PR at bartgryszko/react-native-circular-progress#69 that fixes this. If/when they merge that PR, this repo should update it's dependency on react-native-circular-progress.

SpinnerType

It's not really an issue, but I've searched and couldn't find all the spinner types available.
I know the default one is "wave", but is that the only one? or there is more?

CircleButton progress not working correctly

Hi, I'm having some issue with the CircleButton. The following code is tested and works with RectangleButton

return (
	<CircleButton
		buttonState={this.state.buttonState}
		states={{
			downloaded: {
				text: title,
				onPress: this.props.onClick,
				backgroundColors: ['#4DC7A4', '#66D37A'],
			},
			notDownloaded: {
				text: title,
				onPress: this.fakeDownload.bind(this),
				backgroundColors: ['#eb4c13', '#e41c2a'],
			},
			downloading: {
				text: title,
				onPress: this.props.onClick,
				backgroundColors: ['#6A6AD5', '#6F86D9'],
				progress: true,
				progressFill: this.state.downloadProgress,
				progressText: `${this.state.downloadProgress}%`,
				spinner: true,
				progressSize: 30,
				progressWidth: 2,
			},
		}}
	/>
);

First state is notDownloaded which looks like it should. On click it gets the downloading state which displays the correct background colors, but nothing else. Once it's done it gets the downloaded state which also works. No text, no progress text or border during downloading.

If I set progress, progressFill and progressText on notDownloaded, i.e. the first state, the progress shows, but it's gone when download starts.

As I said, everything works if I change to using RectangleButton.

Any idea what the issue could be?