Using String objects in react-native

I am working on moving all my core business logic to a model layer, which would be used across all my projects.

My project set mainly comprises of a web client-facing application built on Reactjs, few internal tools also built on Reactjs, and a mobile application built on react-native.

In my model layer, I have created custom data types to handle null/empty scenarios from backend and also to add custom format functions.

Following is the code for a string model which I have built.

/**
 Author - Harkirat Saluja
 Git - https://bitbucket.org/salujaharkirat/
 **/

"use strict";

class CustomString {
  static init (value = "") {
    if (value === null) {
      value = "";
    }
    const s = new String(value);

    s.__proto__.upperCaseFormat = function () {
      return this.toUpperCase();
    };
    return s;
  }
}

export default WealthyString;

The way I invoke this is as follows:-

const firstName = WealthyString.init(firstName);
const lastName = WealthyString.init(lastName);

Now, if we see this returns a string object.

In my web project, I use this as follows in the react component, and it works nice and fine.

<span>{firstName}{" "} {lastName}</span>

But, in my react-native project, if I use it in the same way, it throws this error. Also, this error only comes when remote debugging if off and not when I am connected to chrome debugger.

<Text>{firstName}{" "} {lastName}</Text>

So, in order to resolve this for now, where strings are appended as the way shown above I have used toString(). But I was wondering is there something wrong the library or am I missing something?

Update

So looks like String objects are not working with Text in react-native at all. So to fix this I do the following:-

const SecondaryText = ({style, children})  => {
      const styleCopy = addLineHeightToStyle(style, 14);
      let dupChildren = children;
      if (dupChildren instanceof String) {
        dupChildren = dupChildren.toString();
      }
      return (
        <ReactNative.Text
          allowFontScaling={false}
          style={[styles.secondaryText, styleCopy]}
        >
          {dupChildren}
        </ReactNative.Text>
      );
};

1. Built a wrapper over Text which react-native provides and convert the object to a string inside this.
2. Concatenate string using template literals in case of string combination.