Skip to content

Instantly share code, notes, and snippets.

@paulomcnally
Last active April 4, 2018 22:00
Show Gist options
  • Select an option

  • Save paulomcnally/c35ba0e3dc20e95decb7b42b9f86ec8e to your computer and use it in GitHub Desktop.

Select an option

Save paulomcnally/c35ba0e3dc20e95decb7b42b9f86ec8e to your computer and use it in GitHub Desktop.
Require prop-types module.
import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight } from 'react-native';
import PropTypes from 'prop-types';
/**
* Color of underlayColor based themes
*/
const underlayColors = {
primary: '#0062cc',
secondary: '#545b62',
success: '#1e7e34',
danger: '#bd2130',
warning: '#d39e00',
info: '#117a8b',
light: '#dae0e5',
dark: '#1d2124',
link: 'transparent'
};
/**
* Name of available themes
*/
const themes = [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
'link'
];
export default class Button extends Component {
static propTypes = {
onPress: PropTypes.func.isRequired,
text: PropTypes.string.isRequired,
theme: PropTypes.oneOf(themes).isRequired
}
render() {
return (
<TouchableHighlight
onPress={ this.props.onPress }
style={ [styles.button, styles[this.props.theme]] }
underlayColor={ underlayColors[this.props.theme] }>
<Text style={ [styles.text, styles[`${this.props.theme}Text`]] }>
{ this.props.text.toUpperCase() }
</Text>
</TouchableHighlight>
);
}
}
/**
* Styles for components
*/
const styles = StyleSheet.create({
button: {
alignItems: 'center',
borderRadius: 2,
},
text: {
paddingTop: 12,
paddingBottom: 12,
fontWeight: 'bold',
},
primary: {
backgroundColor: '#007bff'
},
secondary: {
backgroundColor: '#6c757d'
},
success: {
backgroundColor: '#28a745'
},
danger: {
backgroundColor: '#dc3545'
},
warning: {
backgroundColor: '#ffc107'
},
info: {
backgroundColor: '#17a2b8'
},
light: {
backgroundColor: '#f8f9fa'
},
dark: {
backgroundColor: '#343a40'
},
link: {
backgroundColor: 'transparent'
},
primaryText: {
color: '#ffffff'
},
secondaryText: {
color: '#ffffff'
},
successText: {
color: '#ffffff'
},
dangerText: {
color: '#ffffff'
},
warningText: {
color: '#212529'
},
infoText: {
color: '#ffffff'
},
lightText: {
color: '#212529'
},
darkText: {
color: '#ffffff'
},
linkText: {
color: '#007bff'
},
});
@oscarmcm
Copy link

oscarmcm commented Apr 4, 2018

quitaria esto

Button.propTypes = {
  onPress: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired,
  theme: PropTypes.oneOf(themes).isRequired
}

y usaria static class properties

class Counter extends Component {
  static propTypes = {
    step: PropTypes.number.isRequired,
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment