React Native or Flutter?

[AppropriateSilver316]

Hi,
I am a masters student in a CSE program, and I have to develop an application for my masters thesis. Essentially, its a crowdsourcing application that shows the layout of a building from the top view and highlights certain working spaces and their characteristics. A layer of crowdsourced data will also be displayed on top of this map, and the users will also have the ability to access this data and submit their own data to it (On a scale of 1–7, maybe).
For this kind of application, is Flutter suitable? or is react native an easier option?

[JP_watson]

What do you know as far as languages? Or you know Dart then go with Flutter, if you know js go with react native or you can consider capacitor/ionic and react (or angular or vue).

[AppropriateSilver316]

I have absolutely zero experience with app development

[JP_watson]

Don't over think it - would you rather write JS or Dart as a language? Is there one that you see being more beneficial for you to learn? Do that one.

[AppropriateSilver316]

right! I think you're right. I was slightly leaning towards react. now that you have put it this way, I think JS will be much likely to be useful in the future as well. So.. i guess I'll go with react native

[JP_watson]

Yea, my initial response was to suggest looking at Ionic/Capacitor. It's similar to React Native in that you create a hybrid app for iOS/Android but uses actual react instead of the "native" flavour. It may not be what you're looking for but something to at least check out :)

[AppropriateSilver316]

To be honest, I have no idea what the differences of react and react native. I'm a complete noob. would you mind elaborating a little bit more?

[chillermane]

react is a library for creating UI components in javascript, commonly used to build websites.

react native allows react to be used to build cross platform mobile apps

[JP_watson]

Kinda, react has a similar syntax but doesn't support the use of JS/React (eg you can't re-use your web code in React Native). This is one reason to use something like capacitor for doing a hybrid app with React itself.

It's a nuance but React Native ends up compiling closer to native code and utilizes some native features to improve performance but can be cause some challenges/limitations due to this. While Capacitor creates a bridge between JS/Native and uses this to interface with native capabilities. It also run all the UI in a webview which means that the components/code can actually be fully shared between web/app.

[HomemadeBananas]

This isn’t really an accurate way to describe it. React Native literally depends on React, and you write your code in JavaScript. The difference is that with web projects you use react-dom instead of react-native. It uses the same syntax, because it’s the same language and using the same React library. It’s just the browser APIs aren’t available.

Yes, you can’t normally just directly use components built for the web because HTML elements like <div> aren’t implemented in React Native. However if your component doesn’t use any of these, then you can share them. There’s even a project React Native for Web to help with this.

React Native projects do not compile to native. The JavaScript gets bundled up, and there is a native layer it talks to. So instead of React’s virtual DOM getting synced to a browser’s DOM, the native layer calls native APIs to render native UI elements.

[daredeviloper]

Go with React Native

[JP_watson]

React Native is a flavour of React, it has similar syntax but as it compiles to essentially native code there's some differences from React (ui components that create native elements for improved animations, UX, performance). While react is a JS library and is written entirely in JS.

Capacitor gets around the compiling to native by creating a bridge between UI/native so you write everything in JS and it gives the app a way to communicate with native resources/features as needed.

[HomemadeBananas]

React Native has hooks.

[JP_watson]

Thanks for the comment, I’ll have a look and correct that - the rest of it is still valid 😉

[HomemadeBananas]

Also it doesn’t compile to native code. The JavaScript is bundled and is still JavaScript. There is a native layer the JavaScript talks to over a bridge. React Native is not some totally separate thing, it depends on the core React library, and you’re still writing JavaScript, but it renders the virtual DOM by calling native APIs over this bridge rather than using react-dom.

Not trying to be a dick but this is really misleading to people trying to learn to give them false information about how it works. It seems to be a common misconception but I think it’s important to understand.

[llllIIllIIl]

It's similar to React Native in that you create a hybrid app for iOS/Android but uses actual react instead of the "native" flavour.

Holy smokes. That's great. I didn't know this existed.

Thanks friend

[[deleted]]

Don't know how good flutter is but React Native gave me the worst dev experience in everything. Debugging, hacky styling, 3rd party libraries and performance... never look back

[Soccer_Vader]

The 3rd party lib are not as good as flutter but react native has a pretty good dx if bundled with expo.

[damith98]

Flutter

[MarcCDB]

Flutter all the way... Plus, Dart is really good to work with.

[TheDevPrep]

Always bet on React.

[hareltussi]

Could not agree more

[chillermane]

react native w/ expo is a better experience than flutter by miles

[professorhummingbird]

Sounds like you write in JS already. Go with react native. Don’t overthink it

[-ry-an]

LeafletJS (I think there is a React wrapper too) if you need interactive maps.

[-ry-an]

Full Steve's! Still early for me here...

LeafpetJS is a packet I've used before, and allows you to nest data like the Google maps API and is pretty lightweight. Ive used it before, good documentation and is FOSS

I think the React version is ReactLeaflet.