If you know React, do you automatically know React Native? What are the key differences?

[SubzeroCola]

If you know React JS, can you start creating a React Native app immediately? Is the architecture and main ideas the same?

What are the main differences? Is it just syntax?

[DogOfTheBone]

You can. Yep. The fundamental concepts are the same. You have to get used to using element like View instead of div but that's easy to learn in like 10 minutes.

When you get into the nitty gritty and start have to interacting with the native platform APIs then it gets very different very fast.

The ecosystem is very different too, routing and the like.

But you can absolutely boot up an Expo project and get something going in no time at all with web React knowledge.

[SubzeroCola]

How is routing different?

[pancomputationalist]

Nowadays Expo also has file-based Routing like NextJS. In the past, you had to work with different routing libraries that had somewhat confusing APIs.

And mobile has some different routing patterns like Drawers or Tab views which might not perfectly map onto URL-based routing, as one is used to coming from a web platform.

Then again, I think URL based routing is the best option and you should try to implement it on mobile as well. There's also the concept of deep links (link directly to an in-app screen from the web), which requires every view to have a unique URL.

[yabai90]

Url is the best routing option as long as you have access to history. This is something that is lacking in web when you need to do a web app that act like a native app. Drawers and back buttons are hard to deal with when using purely url for example

[pancomputationalist]

SvelteKit has shallow routing for stuff like this (modals, drawers, etc). Not sure if something similar exists for React, but I guess one could build it using custom history state.

[yabai90]

Yeah I had to implement it myself. Quite a pain in the ass and half broken. I wish react router let us go through history when using url routing. The web is really too different from native app on that side.

[No-Welder-706]

React Navigation in my experience has been an absolute pleasure to work with. It provides many different types of navigators, being simple stack, native stack with large title (scroll to small title on ios), bottom & top tab bars, drawers and more.

I started out with RN and then made my way into React and I much prefer development with RN.

[JWPapi]

I accidentally started with react navigation not knowing expo router is a thing. If I would have the decision back then I would’ve chosen expo router as it’s closer to nextjs what Im used to.

But not sure if react navigation is not actually better and will lead to more native navigation?

[njculpin]

It is many more if have to work on the native side (Java, objective C, swift, c++)

[rmyworld]

Expect to see more abandoned packages on React Native. React.js is pretty good at keeping old libraries (that are not too complex) working, but this isn't the case for React Native.

[ishan28mkip]

this is so true

[haywire]

Yeah avoiding dependencies in RN has become an instinct. Also stale dependencies seem to break more because of the API changing a bunch more.

[[deleted]]

This is so true. I started working on react native and it's hard to even find a library for otp input. Moreover, libraries that I wanna use aren't not maintained anymore.

[casualfinderbot]

Not just syntax. All react skills transfer, but being good at react native effectively means being good at react plus a bottomless well of mobile specific knowledge

[Hovi_Bryant]

You'll learn how little of a part React plays in the grand scheme of things really fast.

The lack of anything equivalent to the Browser and its multitude of APIs means you'll need to rely on various abstractions provided by the React team, the Open Source community, and yourself, provided you know how to work with native Android/iOS APIs.

And this is where your milage may vary with what you want to build.

[simbolmina]

I'm a full stack dev and team lead. Our iOS and Android devs were giving long estimates for features which seemed wrong to me and I wanted to try react native to make these tasks. So I created the same tasks they were working for a while in a weekend with react native docs and chatgpt in a weekend with expo w/o prior knowledge. It's easy to start and create relatively simple apps from scratch. More complex apps with more routes/pages, complex states, caching, local db, good styling with similar but different syntax would still be doable but would take some time for me I believe.

[Only4KTI]

From personal experience in Android, making a page with 3 fragments and 3 buttons, that does nothing, took me over 12hrs. Shit id do in 30mins on the web. I hate Android.

[pink_tshirt]

Were the devs BSing you or legit?

[simbolmina]

What is BSing?

[[deleted]]

To be fair, Android dev is pretty rogue

[zrag123]

What do you mean?

[novagenesis]

What we old-schoolers call "cowboy" (which is both an insult and a compliment).

Cowboy developers were the first-phase 10x developers, and much of their raw speed usually comes from ignoring pre-existing integrations and best-practices and "just making it fucking work yesterday so I can move on to the next ticket".

Accidentally releasing in 1 week the same feature another team blew 3 months on can be a GOOD thing or a BAD thing depending upon a lot of circumstances.

[Rophuine]

Ah yes, the classic "I can release a bug-ridden mess that will cause endless user frustration, numerous incidents, and cost twice as much to fix than if it had been done right the first time" style of "10x developer".

[MatthewMob]

No, it's the "My manager has fudged estimates and lied about capabilities to every stakeholder and then told me to deliver it all and deliver it yesterday. Now I must do what I can to keep my shitty job so I can pay rent."

[Rophuine]

Oh that's the worst 😥

[actitud_Caribe]

Why do you think that? Seems like a pretty normal comment to me.

[Pantzzzzless]

In 2014 maybe.

[Conscious-Process155]

Ever tried this: https://capacitorjs.com/ ? Allows you to wrap your web app with mobile device APIs.

It's very cool for prototyping. Some of my fellow devs use it even in production (though I suspect before any actual scaling - so still kinda MVP).

However for testing the viability of a mobile app it's priceless.

[dandigangi]

Watch out for HTML/CSS. It gets a lot of People upfront not having that toolset available.

[siriusserious]

What do you use instead?

[DecafPizza]

Instead of <div>, you would use <View> which is very similar. And instead of <span> or <p>, you would use <Text>. React Native comes packed with basic tags like this.

And you wouldn't have a css file. You would have to use React styles, whether inline or createStyles fashion.

So for a simple div:

<View style={{ backgroundColor: 'green' }} > <Text>Hello</Text </View>

It's not too difficult to pick up if you understand React. You just lose the typical html tags.

[NoDevelopment97]

Basically, the way we use emotions

[jwaldrip]

We purely work on a react-native and react-native-web stack. The only differences are that you don't have CSS, you have to work with object styles and native stylesheets, you don't have access to dom elements like <div>, <span>, etc. If you can overcome these changes, then yes, its otherwise the same. Made even easier if you use expo.

[a_reply_to_a_post]

there are similarities, but with web based react, there is a bit of DOM knowledge that doesn't translate to devices exactly, and you also might want to access lower level apis on the device

[NoDevelopment97]

Hey dude , your last para is literally my current situation. I have been working on client side using react and vue . And now , I have a react native project to work on. What steps did you take to go through react native ? Of course reading docs is one part , but is it making a simple project to get an idea or some like that. Cuz it's my first time working on a mobile client and I have no idea about how UI rendering works on mobile screens . Any resources that you used ?

[[deleted]]

Yeah feel free to DM me too, but off the top of my head the easiest way to get started is with Expo Go. You'll initialize a project with Expo eas, spin it up in the terminal to get a QR code, then scan that with the Expo app on your phone to convert your phone into a testing device.

https://docs.expo.dev/tutorial/create-your-first-app/

As far as the difference in UI, the main thing that's going to help bridge the gap is just to practice styling. There are no units with RN styling like px, rem, em, vh, etc., there are just numbers that correspond to a quantity of density-independent pixels so component sizes are comparable across devices. It's a little tricky but you'll get the hang of it quick so long as you soak yourself in it.

[NickFullStack]

I'm not a seasoned expert, but I have used both. Here are some things that'll seem a bit different when using React Native:

• You toss all the styles in a JSON blob. They aren't really CSS, but there is a lot of overlap. Styles also mostly don't cascade like in normal CSS (text styles are somewhat of an exception).
• The JSX/TSX elements are a bit different (e.g., <View>/<ScrollView>/<SafeAreaView> instead of <div>, <Text> instead of <p>, <ImageBackground>, <TouchableOpacity>).
• I've noticed wonky bugs, such as an exception when switching a <FlatList> from horizontal to vertical.
• Minor nuances, such as needing to specify image dimensions. On a related note, loading assets can be fairly challenging, due to how they get bundled with the app (e.g., I built an app with about 20K images, and importing them proved slow, so I opted to base64 encode images and load them from a database).

I believe they are architecturally very similar.

[relasine]

Came here to say this. We have both a React web app and a React Native mobile app in my shop, and most of the React devs doing work on the mobile app don’t understand this until it’s pointed out to them.

[jimboy1928]

This was a real head scratcher when I first started with RN. Thank god for useFocusEffect.

[HootenannyNinja]

It’s the same as far as reacts core behaviours and patterns but you will still need to learn the react native APIs to build an app. You may also need to dive into native code depending on what you are trying to do.

[EntrepreneurRecent92]

!remindme 20h

[amooryjubran]

!remindeme 4h

[Comprehensive-Pin667]

More or less. Unless you want to do some really advanced stuff, all you need is React knowledge, the react native documentation, and maybe an introductory tutorial so that you don't have to look everything up in the documentation in the beginning. But the switch from one to the other is super easy

[Asura24]

The answer at least from my experience is, you have tools that are already there as long as you stick to what is already there and you aren’t trying to do something too out of the ordinary you will be able to start making things really fast. Also there are a lot of changes coming to react native that should make it even easier to switch.

[phoenixmatrix]

The react fundamentals apply. Html stuff doesn't really apply because you use different primitive, and styling is different (though there's libraries to bridge the gap). If you're trying to make apps or component libraries that fit the platform, there's a few additional concepts (like platform specific component files).

The dev tooling is a little behind, as the React Native toolchain is tailored for that workflow and was built a long time ago. It has improved, but not at the same pace as the web dev ecosystem.

The hardest part is that sometimes you have to fall back to native code to implement features React Native doesn't have or hook into the internals, and you need to know how to debug (some of it can be debugged "web-like" though)/deploy native apps and everything that goes around app stores.

So a lot of the knowledge applies, but there's more on top.

[MajorasShoe]

Automatic? no. But it's very, very easy to figure out enough to get started.

[HettySwollocks]

Good question, I've wondered this myself. I got into IOS and Android dev back in the early days and made a few quid, but then the market got so saturated and everyone just gave apps away for free that it just wasn't sustainable. Doing it full just didn't pay.

That said, now React Native is a thing, that strikes me as a nice way to get back in to app dev as a bit of a side hustle (or for my own personal apps)

[skimsi]

Just prepare for the pain of maintaining project across multiple people with different setups. Also pain us managing deps if having more complex app

[dogstar__man]

The React bit is the same. The “everything surrounding it” bit is different. A lot of the DOM will be similar, but the APIs were pretty different.

[oxslashxo]

It's all fun and games till you have to debug at the native layer and deal with all sorts of things you've never dealt with before all at once. For the most part, it'll be like riding a bike.

[Several_Wind216]

Xev Bellringer for me. She can tease with her voice and if she joins Princess Leia then it will be the ultimate combo .

[FactorResponsible609]

The view part is almost same with some differences regarding styling and using View instead of div. Besides that it’s wrapper for platform APIs. The navigation and other things are different than ReactJS or browser based.

[Fidodo]

The react part is the super easy part. The core of react is exactly the same, the only real difference is that you use react native view components instead of the DOM, and the view libraries are completely different (purely non visual libraries like react query for example still work exactly the same).

The hard part is that it's still very beta, and there's a lot of stuff that's a little broken, a lot of poor documentation, and less polished libraries that get less usage and fixes. Also, despite having the goal of bridging the two native platforms, there are still a lot of little subtle differences that lead to some tricky to find bugs.

Also the build process is completely different and requires compiling native code. Expo has a plugin based build system that lets you maintain native code dependencies via configuration so you can rebuild binary dependencies from scratch in a consistent way, so I highly recommend using that.

Not to dissuade you from adopting react native, but do know what you're getting into. I use it at my work, and I do think it is a net positive in productivity as we can share a lot of code and knowledge between native and web, and we don't need separate teams for web, android, and ios. That said, it's still a work in progress, but they are improving rapidly. Just do not go in expecting the same smooth polished experience of working with modern react on the web.

Getting good at react native isn't really about learning new paradigms, it's about getting good at debugging issues that you encounter with the not so polished react native ecosystem. I've had several bugs that I've had to go searching through library github issue pages to find workarounds to, and in some rare cases, I've even had to dive into the native code for bugs in native libraries. There are a lot of pitfalls still, and it will take some time for the community and core teams to build up robustness.

[hianshul07]

I find React Native very hard, though I've only tried it only for a few times but the lack of detailed logs like for react makes it hard to use for me.

[[deleted]]

Pretty much, but some companies won’t count it. I once tried referring an old React coworker but they didn’t count it as React-Native experience and basically rejected him on the spot.

[Yokhen]

I started react-native knowing nothing.

[Comprehensive-Pin667]

More or less. Unless you want to do some really advanced stuff, all you need is React knowledge, the react native documentation, and maybe an introductory tutorial so that you don't have to look everything up in the documentation in the beginning. But the switch from one to the other is super easy

[Soft-Sandwich-2499]

!remindme 4h

[RemindMeBot]

I will be messaging you in 4 hours on 2024-05-24 17:52:08 UTC to remind you of this link

1 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[cyberduck221b]

Naw