Flutter Vs React Native – Comparative study
In this article, I will explore the strengths and weaknesses of Flutter vs React Native. The duo, Flutter and React Native are the frameworks that give apps performances close to native apps.
The idea of creating cross-platform came to light as a result of the gap between app developments on different frameworks. Android and iOS have been the major mobile app development platforms.
Flutter
Flutter is a Google’s portable UI toolkit for building beautiful, natively-compiled apps from a single codebase.
flutter create basic_flutter_appcd basic_flutter_appflutter runSome of the features of flutter include the following;
Rapid development:
With Flutter, you can bring your app up running within milliseconds with stateful hot reload and real-time bug fixing. Flutter is rich with customizable widgets to build native interfaces in minutes.
It has a VM which updates classes with new versions of fields and functions. The Flutter automatically rebuilds the widget tree thus; you can quickly view the effects of the changes you make on a real-time basis.
Usually, it is quite easy to start programming with Flutter, all you need is Flutter package download, you need to unzip the download and set environment variables, with the path pointing to the unzipped folder and you are ready to rock.
In some instances, you may need to download Android Studio and set up the virtual emulator.
Environment:
React Native is far ahead of Flutter in the ecosystem. React Native was two years already when Flutter came along. Right now, there are plenty of packages for mobile development albeit the Flutter ecosystem is growing rapidly behind an active Flutter community which continues to contribute tremendously to the development of Flutter.
Performance:
In performance, I would say Flutter is different from React Native, Flutter is compiled with C/C++ library so that it is closer to machine language, hence a better performance compared to React Native.
As of now, many people believe Flutter has an upper hand in performance, although it is difficult to judge them for now because when we talk of performance, many aspects factor in perspective.
Documentation:
Flutter has perfect documentation. It is quite helpful to seasoned developers, greenhorn developers, and would-be developers. As a developer from any category mentioned above, you are bound to meet every resource you may need in the Flutter’s documentation.
Architecture:
Flutter is a very young development framework, many developers are uncertain about which architecture to implement their apps. However, there are a few popular architectures available now.
For example, BloC architecture; a DartConf2018 which states that business logic should be taken out of the presentation layer and placed in business logic components. To better understand better, visit (RxMarbles.com).
Another popular architecture in Flutter is Redux/Flux. You could also store the state inside of the components for small apps and when trying out the framework.
React Native
Now let me put React Native into perspective. It is one of the world’s renowned cross-platform mobile development champion. It is one of the JavaScript frameworks built upon the React library.
React Native is a creation of FaceBook, which allows you to ship iOS and Android apps with a single code base. Its primary users are Facebook.
Instagram, and others. React Native started out as an internal hackathon project at Facebook in 2013 and it was released to the public in 2015.
Sample code in React Native
import React, {
useEffect,
useState,
useRef,
useImperativeHandle,
forwardRef,
} from 'react';
import {
View,
Text,
StyleSheet,
ActivityIndicator,
Image,
Dimensions,
TouchableNativeFeedback,
} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import Icon2 from 'react-native-vector-icons/Ionicons';
import theme from '../../app.json';
import OutlineText from '../components/OutlineText';
import {customFont} from '../../constants';
const {width: viewportWidth, height: viewportHeight} = Dimensions.get('window');
var imageVariant = viewportHeight * 0.3;
imageVariant = imageVariant <= 200 ? 200 : imageVariant <= 400 ? 400 : 600;
const QuizEnded = forwardRef((props, ref) => {
const imageAsset =
imageVariant === 200
? require('../../assets/images/quizEnded_200.png')
: imageVariant === 400
? require('../../assets/images/quizEnded_400.png')
: require('../../assets/images/quizEnded_600.png');
const dispatch = useDispatch();
useEffect(() => {
dispatch({
type: 'UPDATE_NAVIGATION',
payload: {
params: {
widget: props.cardIndex,
},
},
});
if (props.isMounted) {
props.isMounted();
}
}, []);
return (
<View style={[fixedStyles.container]}>
<View style={fixedStyles.contentContainer}>
<View style={[fixedStyles.imageContainer, fixedStyles.allCenter]}>
<Image source={imageAsset} style={fixedStyles.image} />
</View>
<View style={[fixedStyles.questionContainer, fixedStyles.allCenter]}>
<OutlineText
color={'#ba5027'}
strokeSize={1}
strokeColor={'#5d250c'}
style={[fixedStyles.heading, customFont]}>
Questions Finished!!
</OutlineText>
<OutlineText
color={'#fcd5b6'}
strokeSize={1}
strokeColor={'#5d250c'}
style={[fixedStyles.subHeading, customFont]}>
Don't Worry. We will add more tomorrow.
</OutlineText>
</View>
</View>
<View style={[fixedStyles.pointsBarContainer, fixedStyles.allCenter]}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple(
'rgba(255,255,255,0.5)',
false,
)}
onPress={() => {
dispatch({
type: 'GO_BACK_HOME_NAVIGATION',
payload: {},
});
}}>
<View
style={[
fixedStyles.selfCenter,
fixedStyles.allCenter,
fixedStyles.whatsappContainer,
]}>
<Icon2 name="home-outline" size={30} color={'white'} />
<View style={fixedStyles.whatsappTextContainer}>
<Text style={[fixedStyles.bottomButtonText, customFont]}>
Back to Home
</Text>
</View>
</View>
</TouchableNativeFeedback>
</View>
</View>
);
});
export default QuizEnded;
const fixedStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFF',
},
contentContainer: {
flex: 1,
},
image: {
height: '100%',
aspectRatio: 1,
alignSelf: 'center',
},
pointsBarContainer: {
height: 80,
paddingHorizontal: 20,
flexDirection: 'row',
},
selfCenter: {
alignSelf: 'center',
},
spaceBetween: {
justifyContent: 'space-between',
},
backgroundWhite: {
backgroundColor: 'white',
},
allCenter: {
justifyContent: 'center',
alignItems: 'center',
},
bottomButtonText: {
fontSize: 30,
alignSelf: 'center',
color: 'white',
},
circle: {
height: 50,
width: 50,
borderRadius: 50,
backgroundColor: theme.themeColor,
elevation: 2,
},
whatsappContainer: {
flexDirection: 'row',
backgroundColor: theme.themeColor,
height: 50,
borderRadius: 50,
elevation: 2,
paddingHorizontal: 20,
},
imageContainer: {
height: '50%',
flex: 1,
},
questionContainer: {
height: '50%',
flex: 1,
paddingHorizontal: 20,
paddingVertical: 10,
},
extraTipTitleContainer: {
height: '40%',
},
optionsContainer: {
height: '40%',
flex: 1,
},
nextButtonContainer: {
height: '20%',
flex: 1,
},
option: {
borderRadius: 5,
borderWidth: 2,
elevation: 1,
borderStyle: 'solid',
width: '100%',
paddingHorizontal: 15,
paddingVertical: 10,
},
correctOption: {
backgroundColor: 'green',
borderColor: 'white',
},
wrongOption: {
backgroundColor: 'red',
borderColor: 'white',
},
whiteText: {
color: 'white',
},
heading: {fontSize: 40, textAlign: 'center', paddingBottom: 20},
subHeading: {fontSize: 30, textAlign: 'center'},
optionText: {fontSize: 24, textAlign: 'center'},
nextButtonText: {fontSize: 30, textAlign: 'center'},
optionRow: {
flexDirection: 'row',
flex: 1,
},
optionSingleColumn: {
width: '50%',
paddingHorizontal: 20,
paddingVertical: 10,
},
whatsappTextContainer: {
paddingLeft: 10,
},
});
I will discuss React Native features beginning with:-
Development:
React Native uses components provided by the React Native library for mobile development. It also uses virtual DOM to communicate with native UI elements.
React Native uses quite a number of widgets, though not as much as Flutters’ but inclusive enough. Some of the components in React Native are adaptive hence can figure out the platform they are running on and render accordingly.
It is easy to get started with React Native, just install the create-react-native-app package with NPM install create-react-native-package and then use it to create new React Native applications.
It provides expo integration which allows you to run code on a mobile device without having to rewrite it by scanning the QR code on the console.
Ecosystem:
React Native has been around for a long time now. It expectedly supports most of the editors available to date. React Native also supports hot reload a feature I could not afford to forget mentioning.
In terms of packages, React Native takes the lead because it has 5 times the number of packages available in a Flutter. It is more stable and a mature framework compared to Flutter, but that is my opinion, someone else’s could be different.
Documentation: React Native has good and user-friendly documentation. Its official documentation includes guides and popular topics in the cross-platform development with React Native.
Performance:
React Native’s performance approach is quite different from that of Flutter. It is not entirely compiled to C/C++ or native languages, but instead, the UI components are compiled to their native equivalents as JavaScript runs in a separate thread.
Sample code
class MyComponent extends React.PureComponent {
constructor(props) {
super(props);
this.doWork = this.doWork.bind(this);
}
doWork() {
// doing work here.
// this.props.dispatch....
}
render() {
return <Text onPress={this.doWork}>Do Some Work</Text>
}
}Communication with native modules is through a bridge. This makes it a high performer as compared to Ionic/Cordova, though Flutter performs better than React Native.
Architecture:
There are two main patterns in building React Native apps; flux and redux. Flux was created by framework creators, Facebook, while Redux is the community’s popular option.
Both frameworks focus on unidirectional data flow and data storage in a central place; store. Components remain stateless as possible, and the context API can be used to manage states.
Conclusion
With the comparison, React Native vs Flutter we have just done, it is time to find out who the victor is. React Native and Flutter both have their slights and advantages.
It is quite tricky to have a definitive winner among React Native vs Flutter because other factors should be considered as the devices your apps run on. It is upon you to choose what best suits your scenario, for further reading visit React Native and Flutter.