Code reusability in React Native, Ionic, Flutter and NativeScript(write once, use everywhere)

Question

It is the first time that I write that kind of question here so please excuse me if my question is not okay.

I am learning some new cross platform frameworks. I am interesting in Ionic(version 4), Flutter, React Native and NativeScript. Precisely, I would like to understand the concept of code reusability for each framework. How do they apply reusability? In which matrix and what are the consequences?

Thanks.

Solution 1

In react-native you have create any component used any screen. for example I used InputText component for reusability.

InputField.js

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

export class InputField extends Component {
  render() {
    const {
      textentry,
      keytype,
      isvalid,
      errormsg,
      returnkey,
      textplaceholder,
      underlinecolor,
      onchangetext
    } = this.props;
    return (
      <View>
        <TextInput
          style={styles.input}
          placeholder={textplaceholder}
          keyboardType={keytype}
          placeholderTextColor="#ffffff"
          underlineColorAndroid={underlinecolor}
          secureTextEntry={textentry}
          ref={(input) => this.props.inputRef && this.props.inputRef(input)}
          returnKeyType={returnkey}
          blurOnSubmit={false}
          onSubmitEditing={(event) => {
            if (returnkey != 'done') {
                this.props.onSubmitEditing(event)
            }
        }}
          onChangeText={text => {
            this.props.onText(text);
          }}
        />
        <View>
          {!isvalid ? (
            <Text style={styles.errormsg}>{errormsg}</Text>
          ) : null}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  input: {
    width: 300,
    color: "#ffffff",
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center"
  },
  errormsg: {
    color: "#ff0000",
    marginLeft: 60
  },
});
export default InputField;

Use this InputField component to screen Myscreen.js

import React, { Component } from "react";
import {
  View,
  StyleSheet
} from "react-native";
import { InputField } from "../component/InputField";
 render() {
    return (
<View style={{flex:1}}>
<InputField
            keytype="default"
            textplaceholder="Enter First Name"
            textentry={false}
            returnkey="next"
            isvalid={this.state.firstNameValid}
            errormsg={this.state.errormsgtext}
            underlinecolor={this.state.underLineColorFirstName}
            onText={text => {
              this.setState({ firstName: text });
            }}
            onSubmitEditing={event => {
              this.inputs["phone"].focus();
            }}
          />
</View>
)}}

Solution 2

Talking about code sharing between Web and Mobile regarding NativeScript here are a few things to know:

Disclaimer: I am part of the NativeScript team

1. First it is only possible via Angular, there is not code sharing if you prefer to use pure JS or TypeScript
2. Second the portion of the code shared between the Web, iOS and Android is dependant on the functionality of your app. Meaning that if you rely heavily on platform specific functionality both for the UI and the code behind logic it is possible to not be able achieve full code shared, yet there are ways to overcome such scenarios and again be able to share common services.
3. Third the idea of code sharing with NativeScript is that if you have a specific code for a "platform" (Web, iOS and/or Android) you simply create additional file with a specific file name. For example if you have an Angular component named home.component.ts you should have one file containing its HTML for the Web part and one for the Mobile part so you simply create both home.component.html and home.component.tns.html. Similar approach is used for other non component files like css and angular services etc.

The technique that is used to achieve code sharing in NativeScript with Web is with the use of Angular schematics specifically for NativeScript.

The topic of exactly how code sharing is achieve is quite log so I would suggest you to read this blog post that introduces the code sharing between Web, iOS and Android with NativeSript. For a getting started steps I recommend the official documentation here.

Solution 3

About React Native, it works with something called Components. You may create a component for each thing you could imagine. The best of having components is that they are reusables. For example, I can create a button in a component and then export that same button to other apps or screens.