[React Native] Reusable components with required propType

In this React Native lesson, we will be creating a reusable Badge component. The component will also make use of propTypes to validate that its required data is being passed in when it is used.

 

We are going to build Badge component which will just show the user image. This componet will be reused into Profile, Bio and Note component as well.

 

import React, {Component} from 'react';
import {Text, View, StyleSheet, Image} from 'react-native';

var styles = StyleSheet.create({
    container: {
        backgroundColor: '#48BBEC',
        paddingBottom: 10
    },
    name: {
        alignSelf: 'center',
        fontSize: 21,
        marginTop: 10,
        marginBottom: 5,
        color: 'white'
    },
    handle: {
        alignSelf: 'center',
        fontSize: 16,
        color: 'white'
    },
    image: {
        height: 125,
        width: 125,
        borderRadius: 65,
        marginTop: 10,
        alignSelf: 'center'
    }
});

class Badge extends React.Component {
    render(){
        return (
            <View>
                <Image style={styles.image} source={{uri: this.props.userInfo.avatar_url}}></Image>
                <Text style={styles.name}> {this.props.userInfo.name} </Text>
                <Text style={styles.handle}> {this.props.userInfo.login} </Text>
            </View>
        )
    }
}

/**
 * Make sure when when user the Badge component, the userInfo object is there
 * @type {{userInfo: *}}
 */
Badge.propTypes = {
    userInfo: React.PropTypes.object.isRequired
};

module.exports=Badge;