Button.js

//@flow

import React from 'react';
import Styled from './Styled';
import {View, TouchableOpacity, Text} from 'react-native';

type Props = {
  children?: any,
};

const Container = Styled(TouchableOpacity, {
  flex: 1,
  marginHorizontal: 4,
  alignItems: 'center',
  justifyContent: 'center',
});

const ButtonText = Styled(Text, {
  fontSize: 24,
});

export const NumberButton = ({children}: Props) => (
  <Container style={{backgroundColor: 'rgba(0, 0, 0, 0.1)'}}>
    <ButtonText>{children}</ButtonText>
  </Container>
);

export const OperatorButton = ({children}: Props) => (
  <Container style={{backgroundColor: '#7B2391'}}>
    <ButtonText style={{color: 'rgba(255,255,255,0.8)'}}>{children}</ButtonText>
  </Container>
);

Styled.js

import React from 'react';
import {StyleSheet} from 'react-native';

const Styled = (Inner, styles) => {
  const styleSheet = StyleSheet.create({
    styles,
  });
  const displayName = `Styled(${(Inner: any).displayName})`;

  const wrapper = ({style, children, ...rest}) => {
    return (
      <Inner style={[styleSheet.styles, style]} {...rest}>
        {children}
      </Inner>
    );
  };

  wrapper.displayName = displayName;

  return wrapper;
};

export default Styled;