Skip to content

Instantly share code, notes, and snippets.

@rivaldorodrigues

rivaldorodrigues/spinner-button.tsx

Last active October 14, 2019 20:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rivaldorodrigues/582f6ce913e3dcc21112fed29172cba7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rivaldorodrigues/582f6ce913e3dcc21112fed29172cba7 to your computer and use it in GitHub Desktop.
Download ZIP
React Native button with loading activity indication.
Raw
spinner-button.tsx
import React from 'react';
import { Button, NativeBase, Spinner } from 'native-base';
import { CORES } from '../../assets/cores';
import { StyleSheet } from 'react-native';
interface SpinnerButtonProps extends NativeBase.Button {
loading: boolean;
spinnerProps?: NativeBase.Spinner;
}
export default class SpinnerButton extends React.Component<SpinnerButtonProps> {
render() {
const { loading } = this.props;
var content = this.props.children;
if (loading) {
content = <Spinner color={styles.spinner.color} {...this.props.spinnerProps}/>
}
return (
<Button {...this.props} style={[styles.button, this.props.style]}>
{content}
</Button>
);
}
};
const styles = StyleSheet.create({
spinner: {
color: CORES.BACKGROUND
},
button: {
backgroundColor: CORES.PRIMARIO
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment