React-native and Component-based architecture

React native is a brilliant hybrid development platform that has become super popular since it’s the first introduction in 2015, as It is being backed by Facebook and a community of programmers, it has improved a lot over the last 5+ years. It has been developed using several different one fo the best technologies these include for the best of these JavaScript, Java, C++, Objective C, Objective C++, and Python. All of these technologies there for a very long and have a really stable and reliable environment.

As in most of the above-mentioned language, we are all fond of object-oriented development methodology and that is a great approach to go by. But by definition react code is made of entities called components. And while we are at understanding component lest also take an idea about component-based architecture. Now, what is component-based architecture?

Component-based architecture is an old concept coined way back in a very different scenario. But software engineering has it’s own branch now with the name Component-based software engineering (CBSE), also called component-based development (CBD). Here, a Component is A piece of software offering (via an interface) a predefined service and which is able to communicate with other components.

Example

Now let take it by example. Let’s say we want to design a single page of user list. As we all know the list item needs to be reusable and we can design that with different ways, but lest break our approach here and make it component-based. A component must support black box reusability. Which means it should be reused irrespective of when and where it is being called in the product. Take the following component for example:

export class UPLInfo extends Component {
  render () {
    let user = this.props.user;
    let fullName = user.name;//.toUpperCase();
    return (
      <View style = {styles.PULInfoContainer}>
        <View>
          <Text style = {styles.PULName}>{fullName}</Text>
          <ImagedText image = {require('../../assets/profession.png')}
                      text = {user.profession}
                      textStyle = {styles.PULProfession}
                      iconStyle = {styles.PULProfessionIcon}/>
        </View>
        <UPLSummery user = {user}/>
      </View>
    );
  }
}

Here you see class UPLInfo (User Profile List) is a component that is a user to render user’s profile details. Including name, and profession. This component in itself usage another custom component named ImagedText. ImagedText will always take image and text as a parameter ans using a beautiful scaling styling properties it will populated image icon followed by text on your given section of the screen. Here is how Imaged text looks.

export class ImagedText extends Component {
  render() {
    let i = this.props.image;
    let t = this.props.text;

    let iconStyle = (this.props.iconStyle) ? this.props.iconStyle : styles.PImagedTextIcon;
    let textStyle = (this.props.textStyle) ? this.props.textStyle : styles.PImagedText;
    return (
      <View style = {styles.PImagedTextWrapper}>
        <CachedImage style = {iconStyle} source={i} mutable/>
        <Text style = {textStyle}>{t}</Text>
      </View>
    )
  }
}

The whole idea of providing details about the above components is to build thinking of how we should actually be breaking our code to the last most of reusable components which then can always be reused bottom up however and where ever we prefer to use those.

One should always consider the refactoring that comes with any programming technology or implementation, as there may come the times when you need to add some more details to your leaf components and those are the times which will require a wholesome analysis and long look back to each place where you have used that component.

Where to go from here?
This code base contains the classes that cover entire profile module. Check and refer, please also add constructive comments and suggestions https://github.com/rptwsthi/RPTRNProfileModule.

Leave a Reply

Your email address will not be published. Required fields are marked *