Style Imported Custom Component

Question

So I'm importing a custom component TextButton and packaging it inside of another OutlinedButton . I export the class OutlinedButton expecting to see both the props passed and the new styling added to be rendered. However, only the props are being correctly rendered. The extra styling that I added does not appear at all. Any thoughts as to why this occurs?

import React, { Component } from 'react';
import TextButton from './TextButton';
class OutlinedButton extends Component {
    render() {
        return (
            <TextButton {...this.props} style={styles.outlineButtonStyle} />
        );
    }
}

const styles = {
    outlineButtonStyle: {
        borderWidth: 1
    }
};

export default OutlinedButton;

TextButton class (it's a bit long)

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';

class TextButton extends Component {    
    constructor(props) {
        super(props);

        this.state = {};
    }

    componentWillMount() {}

    componentWillReceiveProps(newProps) {
        if (newProps.theme !== this.props.theme) {
            this.determineTheme(newProps.theme);
        }
        if (newProps.size !== this.props.size) {
            this.determineSize(newProps.size);
        }
    }

    // set the theme
    determineTheme = function (theme) {
        if (theme === 'primary') {
            return {
                color: '#0098EE'
            };
        } else if (theme === 'secondary') {
            return {
                color: '#E70050'
            };
        } else if (theme === 'default') {
            return {
                color: '#E0E0E0'
            };
        } 

        return {
            color: '#E0E0E0'
        };
    }

    // set the size
    determineSize = function (size) {
        if (size === 'small') {
            return {
                fontSize: 16
            };
        } else if (size === 'medium') {
            return {
                fontSize: 22
            };
        } else if (size === 'large') {
            return {
                fontSize: 28
            };
        }

        return {
            fontSize: 22
        };
    }

    render() {
        const { onPress, children, theme, size } = this.props;

        return (
            <TouchableOpacity onPress={onPress}>
                <Text style={[this.determineTheme(theme), this.determineSize(size)]}>{children}</Text>
            </TouchableOpacity>
        );
    }
}

TextButton.propTypes = {
    onPress: PropTypes.func,
    title: PropTypes.string,
    theme: PropTypes.string,
    size: PropTypes.string
};

export default TextButton;

Answer 1

You are not using the style prop passed down to your TextButton component:

render() {
  const { onPress, children, theme, size, style } = this.props;

  return (
    <TouchableOpacity onPress={onPress} style={style}>
      <Text style={[this.determineTheme(theme), this.determineSize(size)]}>{children}</Text>
    </TouchableOpacity>
  );
}

Answer 2

When you set style as below in <TextButton> Component, you are not setting the style on the component, but passing it as props to the component. So you have to access it in <TextButton> as this.props.style and apply it in the child component as Tholl mentioned below. Hope you got it.

 render() {
        return (
            <TextButton {...this.props} style={styles.outlineButtonStyle} />
        );
    }
}

const styles = {
    outlineButtonStyle: {
        borderWidth: 1
    }
};

SImple example: https://codesandbox.io/s/wn9455x58