Skip to content

Instantly share code, notes, and snippets.

@hdsenevi
Last active December 11, 2018 09:07
Show Gist options
  • Save hdsenevi/79e1c4b9e4dd4f3bb545de6ee1e3982a to your computer and use it in GitHub Desktop.
Save hdsenevi/79e1c4b9e4dd4f3bb545de6ee1e3982a to your computer and use it in GitHub Desktop.
Article helper gist for "Unit testing in React Native with Jest and Enzyme" (https://github.com/hdsenevi/react-native-unit-testing-recipes)
import React, { Component } from 'react';
import { Text, TouchableOpacity, Linking } from 'react-native';
// 1. Changed to a class based component
class Button extends Component {
constructor(props) {
super(props);
}
// 2. Custom function called onPress TouchableOpacity
onPressHandler = () => {
const { onPress, url } = this.props
if (url) {
Linking.openURL(url)
}
onPress()
}
render(){
const { buttonStyle, textStyle } = styles;
const { label, primary } = this.props;
// 3. Change color of button depending on 'primary' prop
const newButtonStyle = primary ? buttonStyle : [buttonStyle, { backgroundColor: '#f34541', borderBottomColor: '#a43532' }];
return (
<TouchableOpacity onPress={this.onPressHandler} style={newButtonStyle}>
<Text style={textStyle}>
{label}
</Text>
</TouchableOpacity>
);
}
};
Button.defaultProps = {
primary: true,
}
const styles = {
textStyle: {
alignSelf: 'center',
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
buttonStyle: {
height: 45,
alignSelf: 'stretch',
justifyContent: 'center',
backgroundColor: '#38ba7d',
borderBottomWidth: 6,
borderBottomColor: '#1e6343',
borderWidth: 1,
marginLeft: 15,
marginRight: 15
}
};
export default Button;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment