A Quick Introduction to React Native and Flutter

- By K. Aditya

When it comes to making mobile applications, developers often have certain tradeoffs to choose between. Do they
develop for just one of the two main platforms or for both? If they choose both, do they develop a hybrid app or native
apps for both platforms? Developing native for both platforms, while maximizing the user share, results in increasing
the work done by twofold. Up until recently, the only alternative to them have been hybrid apps. Hybrid apps allow
development of applications for both platforms simultaneously, but they aren’t native apps. They aren’t as smooth
and snappy to use. What if there was a way to develop native apps for both platforms using the same piece of code?
This is the need that development frameworks like Flutter and React Native aim to satisfy.

Native Development
Native development refers to development of applications for a particular platform. In the context of mobile
development, your options are either Android or iOS.
The advantage that native development offers is that it allows you to use the full suite of features that a platform has
to offer. The apps are optimized for the particular platform and its hardware. They’re faster, safer, and more secure.
But for a company that intends to maximize the user base, it is often expensive in terms of resources and time to
develop their apps for both platforms. Two teams have to work independently since there’s little to no overlap in the
development process for both the platforms.
Hybrid apps offer more flexibility since they allow easy and fast development of apps for both platforms. Their
drawback however is that they can’t utilize either of the systems fully. They’re often just web apps modified to work on
mobile devices. They’re slow and clunky to use.

React Native and Flutter

React Native and Flutter are relatively recent innovations. React Native, created by Facebook, released in 2015 and
Flutter, a creation of Google, was released even more recently in 2017.
These are open-source mobile application development frameworks which have the capability to create apps for both
iOS and Android that are truly native, thus overcoming the drawback of hybrid apps. Flutter has the added advantage
of being used for Fuchsia, a new OS currently being developed by Google.
With the backing of the most prominent companies in the tech industry, both these frameworks have potential to rejig
mobile development. They’re already famous among small developers and start-ups due to the fact that they allow
such companies to tackle both the prominent mobile platforms without any additional overhead associated with native
development.
Let’s look at a basic toy app created in Flutter and React Native to see the differences and similarities between the
two. It’s a modification of the app recommended in Flutter’s tutorial. All it does is add a random word to the screen
when the add button is pressed -

This is a “toy” app with no real-world application,

but it will allow us to see the differences and
similarities in React Native and Flutter. The one
on the left is React Native version while the one
on the right is the Flutter version.

React Native
React Native enables developers to develop
apps for mobile devices using the React
framework originally built for web development.
While not including much in the way of
customizability out-of-the-box, there are many
mature and seamless user-maintained libraries
available for use.
export default class App extends React.Component {
constructor() {
super()
this.state = {
words: [],
}
}

This snippet of code defines a component as an extension of the React.Component class. Any app built in React
Native is made up of components. A component can contain other components inside it. This modularity allows each
part of the app to function independent of each other and facilitates code reusability. This App component will be the
front page of the application.
The constructor is used to initialize the “state” of the app. Data which will be used throughout the app is stored as a
state variable. It is stored in key-value pairs as a JavaScript object. Here, the list of words which the app will display is
stored in the state.
Data can also be of the type “prop”, which we will see later.

addRandom() {
const randomWord = getWord()
this.setState({
words: [...this.state.words, randomWord]
})
}

We need to add a word to the screen when we press the add button. This function changes the state of the
component by adding another word to the list of words. Every time the state of the app changes, the app refreshes
what is being displayed, so this will be reflected in the app immediately.
This is all we need to initialize the first component. Now we need to put this together in a structure and display this to
the user.

render(){
return (
<View style={styles.container}>
<Button onPress={() => this.addRandom()} title = "Add" />
<ScrollView>
{this.state.words.map(word => (
<Word word = {word}/>
))}
</ScrollView>
</View>
); }
The render function of any component is used to structure the app. Those acquainted with HTML or XML will find this
familiar. JSX (JavaScript XML) is used for this task. It’s an extension to the JavaScript language developed by
Facebook. Similar to how the <div> tag is used as a container in HTML, <View> and <ScrollView> are used as
containers for different nested components. Keep in mind that these are also components by themselves.

Components have various properties associated with them which control their behaviour and appearance. Button is a
pre-defined component. The onPress property defines what the button should do when it is pressed. Here, it calls the
addRandom() function we defined earlier. The ScrollView container contains all the words in the state of the app.
Word is a component we’ve defined to display each element.

function Word(props){
return(
<View style={styles.listItem}>
<Text> {this.props.word} </Text>
</View>
 )
}
}

Unlike the App component, this is a stateless component. Instead, it uses props. These props are passed by the
parent component to it and are constant throughout the life cycle of the application for each such component.
Styling of components can be done with stylesheets similar to CSS defined with JavaScript. A different stylesheet can
be used for each component, allowing control over precise details.
All this put together will give you the App.js file. It is usually recommended to define each component in a separate .js
file and import then to the App.js file.

Flutter
Flutter is a framework built on a relatively new language called dart, which is a language originally intended for web
development, and is transcompilable to JS. It uses a lot of already installed libraries to generate Material Design
apps, (or Cupertino) from the get go. The apps look a lot more professional without much effort because of this. You
can however, change the design how you please, if you are looking for a specific branding.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator',
home: RandomWords(),
);
}
}
The void main function triggers a new App, using runApp, which is a class of type StatelessWidget. Everything in
Flutter is a widget, and in fact, your entire app is nothing more than widgets inside of widgets, which is why the
brackets can sometimes seem daunting. Inside every Widget class, we have a function build which returns a Widget.
Here, it returns a MaterialApp, with title and the home Widget defined.

class RandomWords extends StatefulWidget {

@override
RandomWordsState createState() => new RandomWordsState();
}

Since we now want to create a Widget which can store state, we create a new class RandomWords, which is a child
of StatefulWidget, inside it, we create a new class which is a child of the State of RandomWords, like so:

class RandomWordsState extends State<RandomWords> { ....

….
}.

Inside RandomWordsState, we define the build function as follows:

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: Text('Startup Namer - Pick a Name before you change the world')
),
body: _buildSuggestions()
);
}

We are now using a pre-defined widget Scaffold, which has a body, title, and an appBar. You can see we use more
pre-defined widgets, such as Text, and AppBar to actually occupy those properties.
Inside our _buildSuggesions function, which is now acting as the front page of your app, we have a Button, and a list
of items.
A button in flutter can be created as follows:
RaisedButton(
child: Text("ADD"),
onPressed: (){
setState(() {
_suggestions.addAll(generateWordPairs().take(1));
});
})

And a list can be created as such:

ListView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: _suggestions.length,
itemBuilder: (context, index) {
print(_suggestions);
return Card(child: Center(child:Text(_suggestions[index].toString(), style: font),
),
margin: EdgeInsets.all(5.0)
);
}
)

It is clear from the itemBuilder that we are returning not just plain text in the list, but rather cards, which have the text
inside of them.
We wrap the ListView inside an Expandable widget, since the length of it is indefinite.
To accommodate both of these widgets on the screen, one after the other, we use another Widget called Column,
which takes as its children, an array of widgets you want on the screen.
Column( children: [RaisedButton(....), Expandable(child: ListView.builder(.......)])

And finally to center the whole thing, we use Center.

Center(child:Column( children: [RaisedButton(....), Expandable(child: ListView.builder(.......)]))

What we have now, is a single .dart file that controls both how your app looks, (without the need of external styling
files such as .css) and also the logic of how your app runs, all of this in Material Design, without having to specify it
externally using a stylesheet.
As is apparent from this example. Flutter uses a lot of Widgets and embedded Widgets, which are not just used for
creating a new element on screen, but also sometimes to control properties of some other Widgets.

Conclusion
Flutter and React Native have lots of similarities in their approach to mobile development. Components and widgets
are largely similar in behavior, each defining certain aspects of an app and having certain modifiable properties and
behaviors. Where they differ is in their structuring of the application, with React Native utilizing a method similar to
web development, which is due to its roots in web development in the form of ReactJS. Flutter code can seem to be
more verbose but most of it is boilerplate code - you only modify specific parts of it.

Despite the advantages that they offer, it’s not easy to say whether they will remain prominent for long or fade into
obscurity as just a fad. An advantage that native development has is stability and assurance of longevity. Many
libraries that are necessary for development of apps on React Native are created and maintained by users, while
Flutter is still maturing and currently doesn’t have as many tools at its disposal.
Certain features are also not directly translatable between Android and iOS.
More concerningly, companies have been hesitant to use these platforms for large production apps. Prominently,
React Native was abandoned by Airbnb and Udacity for their application development after some experimentation.
Their rather recent advent means that they’re still not ready for large-scale production or fully fleshed out in terms of
features. At present, they’re still a distant second to native development.
That said, there are clear advantages that Flutter and React Native bring to the table by streamlining the development
process. With mobile development becoming increasingly prominent in the current market, it’s still a worthwhile
investment to learn about these platforms since they are significantly easier to develop for compared to native
development.