Adding styles to a custom component through App.js in React Native

Question

Ok guys, I've been trying to figure this out for the past 3 days and I can't find a solution, please keep in mind that I am self-taught and I've been studying react native for like 3 months now.

Anyways, I have a custom button with a defined style and everytime that I render my button it loads with the style presented in its file:

Botaozudo.js:

import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';

export default class Botaozudo extends React.Component {
    render() {
        const { titulo, evento } = this.props;
        return (

                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => evento()}>
                            <Text style={styles.txtButton}>{titulo}</Text>
                    </TouchableOpacity>

        );
    }
}

const styles = StyleSheet.create({
    btnAlinhar: {
        alignItems: 'flex-end',
        marginRight: 20,
        paddingTop: 7
    },
    button: {
        backgroundColor: '#a082c9',
        width: 100,
        height: 40,
        borderRadius: 10
    },
    button2: {
        backgroundColor: '#a082c9',
        width: 300,
        height: 90,
        borderRadius: 10
    },
    txtButton: {
        color: '#fff',
        fontSize: 20,
        textAlign: 'center',
        paddingVertical: 5
    }
});

Lets say that I want two different buttons on my App.js , one that looks like exactly as above and another one with different size and background color. In my mind I just have to do something like this (for the different one):

<Botaozudo 
    style={styles.newBtn} 
    titulo='I am a button' 
    event={() => 
        console.log('yup I am a button')}/>

const styles = StyleSheet.create({
    newBtn: {
        backgroundColor: '#7c7070',
        width: 200,
        height: 100
    }
});

But the thing is that my Botaozudo doesn't know what that style={} prop means. And what I can't figure out is HOW to make my custom component understand it.

Thanks in advance,

Answer 1

Install https://www.npmjs.com/package/prop-types

Then in Botaozudo.js :

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

export default class Botaozudo extends React.Component {
  static propTypes = {
    // Custom style for Botaozudo. Requires object
    componentStyle: PropTypes.object,
  };

  static defaultProps = {
    componentStyle: styles,
  };

  render() {
    const { titulo, event, componentStyle } = this.props;
    return (
      <TouchableOpacity style={componentStyle.newBtn} onPress={() => event()}>
        <Text style={styles.txtButton}>{titulo}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  btnAlinhar: {
    alignItems: 'flex-end',
    marginRight: 20,
    paddingTop: 7,
  },
  button: {
    backgroundColor: '#a082c9',
    width: 100,
    height: 40,
    borderRadius: 10,
  },
  button2: {
    backgroundColor: '#a082c9',
    width: 300,
    height: 90,
    borderRadius: 10,
  },
  txtButton: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center',
    paddingVertical: 5,
  },
});

and in App.js :

<Botaozudo 
    componentStyle={styles} 
    titulo='I am a button' 
    event={() => 
        console.log('yup I am a button')}/>

const styles = StyleSheet.create({
    newBtn: {
        backgroundColor: '#7c7070',
        width: 200,
        height: 100
    }
});