Mixin example

Instead of shouting Mixins are harmful, let's create a component that is using them and look at what the issues are. Mixins are deprecated, so the first step is finding a way to use them. It turns out that they still live in a legacy way of creating React class components. Previously, instead of ES6 classes, there was a special function called createReactClass. In one of the major releases, the function was removed from the React library and is now available in a separate library called 'create-react-class':

// Chapter 2_View patterns/Example 12/App.js
...
import createReactClass from 'create-react-class';

const LoggerMixin = {
    componentDidMount: function() { // uses lifecycle method to log
        console.log('Component has been rendered successfully!');
    }
};

export default createReactClass({
    mixins: [LoggerMixin],
    render: function() {
        return (
            <View>
                <Text>Some text in a component with mixin.</Text>
            </View>
        );
    }
});

Here, we create LoggerMixin, which is taking care of logging the necessary information. In this simple example, it's just information regarding that component that has been rendered, but it could be easily extended further.

...
mixins: [LoggerMixin, LoggerMixin2],
...