JSFiddle - React, Tailwind, and code Playground

by Hyacinthe Hamon

HTML

import React, { PropTypes } from 'react';
import { TouchableOpacity } from 'react-native';
// import { MKButton } from 'react-native-material-kit';
import { Text } from '../index';
/**
 * render
 * @constructor

const RippleButton = ({ onPress, text, style, btnStyle }) =>
	<MKButton
		// backgroundColor={MKColor.Teal}
		// shadowRadius={2}
		// shadowOffset={{width:0, height:2}}
		// shadowOpacity={.7}
		// shadowColor="black"
		onPress={onPress}
		style={btnStyle}
	>
		<Text
			text={text}
			pointerEvents='none'
			style={style}
		/>
	</MKButton>;
 */
const RippleButton = ({ onPress, text, style, btnStyle }) =>
  <TouchableOpacity
	onPress={onPress}
	style={btnStyle}
  >
	<Text
	  text={text}
	  pointerEvents='none'
	  style={style}
	/>
  </TouchableOpacity>;
/**
 * prop types
 */
RippleButton.propTypes = {
	onPress: PropTypes.func,
	text: PropTypes.string,
	style: PropTypes.array
};

RippleButton.defaultProps = {
	style: [],
	btnStyle: []
};

export default RippleButton;

JavaScript

import React, { PropTypes } from 'react';
import { View, TouchableHighlight } from 'react-native';
import { Text } from '../index';

const Card = ({ onPress, text, style, btnStyle })=> {
  return(
    <View style={styles.cardContainerStyle}>
      <View style={styles.cardSectionContainerStyle}>
        <TouchableHighlight onPress={onPress}>
          <Text
        	  text={text}
        	  pointerEvents='none'
        	  style={style}
        	/>
        </TouchableHighlight>
      </View>
    </View>
  )
};

Card.propTypes = {
	onPress: PropTypes.func,
	text: PropTypes.string,
	style: PropTypes.array
};

Card.defaultProps = {
	style: [],
	btnStyle: []
};

const styles = {
  cardContainerStyle:{
    borderWidth: 1,
    borderRadius: 2,
    borderBottomWidth: 0,
    borderColor: '#ddd',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10
  },
  cardSectionContainerStyle:{
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};

export default Card;