DEV Community

loading...

I've released over 100 apps in React Native since 2015, Ask Me Anything!

Kyle Johnson
I drink coffee and make things.
・1 min read

Discussion (163)

Collapse
rokkoo profile image
Alfonso

What do you think about start app using expo? Is better start app with react-native Cli?
What package do you recommend for UX?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

No, I would never use Expo for a serious project. I imagine what ends up happening in most projects is they reach a point where they have to ultimately eject the app (e.g. needing a native module) which sounds very painful.

The majority of the apps I've wrote have definitely reached that point, for the individual benefits expo provide (e.g. code push) I've considered trying out using just expo kit but I'd rather just uses a tool specifically for that purpose. Above all, I always like to reduce the level of magic in any application, mobile or not.

Regarding "What package do you recommend for UX", I guess it really depends what you mean. But hopefully this gives you everything you need to know:

  • For navigation I use react-native-navigation, can't recommend this enough as it adds a massive difference in fidelity vs using JavaScript based lib like react-navigation.
  • For interactive elements (drag drop, sliders, parallax etc) I use a forked version of react-native-interactable.
  • For custom vector animations e.g. button icons I use Lottie.
  • I do not use a framework for developing styles/grid layouts (e.g. glamourous), I've got my own base-layout of styles and components.
Collapse
warns profile image
Mert Alnuaimi • Edited

"I would never use Expo for a serious project"

is such a radical decision that I didn't expect to hear from someone in your experience, knowing that Expo is greatly supported by the makers for React Native.

Thread Thread
mjstelly profile image
Michael Stelly

I know this thread has aged. But I felt a need to respond in particular to this comment.

In my experience, Kyle's response is by far the norm among industry professionals I interact with. It's easy to confirm this. Simply post a comment on the Discord channel Reactiflux #react-native that states, "Expo should be the go-to choice for serious react-native projects. Discuss." Then wait for the comments to roll in.

Thread Thread
kylessg profile image
Kyle Johnson Ask Me Anything

lol! If I could like this comment twice I would.

Thread Thread
yannickk profile image
Yannick

This thread aged like crazy but this question could be relevant.
We know your thoughts regarding Expo Managed, but what about Expo Bare Workflow?

Collapse
rokkoo profile image
Alfonso

I'm very grateful for your answer, this is very helpful !! 😊

I use always expo because I'm starting programming in RN, but I think I will start starting project with react-native-cli.

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

This is a really good question, in a meeting at the moment but will definitely respond to this!

Collapse
pawda profile image
Memoria
  • What do you think about the fluidity of react-native apps ?
    So far, I've seen apps made by Chinese e-commerce giants like Alibaba's Taobao and Jindong, their apps requires lots of resources and are all very slow even on last end Android devices.
    I've also seen some startup using it for chat app and it's simply become unusable after a while because all the memory leaks.

  • Do you think these are just poorly made app or react-native is just not ready to replace native development ?

  • Which app would you recommend to check out in order to see how powerful this framework can be ?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

The only case I've seen that can be tricky to keep performant at the moment is when you're doing CPU heavy tasks whilst listing out uncompressed images >2mb. Memory consumption of images this size do seem to be a tricky problem, though libs like react-native-fast-image aim to solve this sort of thing.

I'd say almost certainly they were developed badly, there's no reason now why you couldn't make apps indistinguishable from native. My top tip for this is to move away from JS based navigation libraries (e.g. react-navigation), that's where you see a lot of the performance gains.

Performance wise the Patient View app I made shows this off, I sync and encrypt thousands of records and chart them out whilst keeping everything 60fps.

Collapse
pawda profile image
Memoria

I see, thanks for the answer and cheers for the 100 apps, that's a hell of a pace :)

Collapse
pke profile image
Philipp Kursawe • Edited

How did you do the encrypting/decrypting? Pure JS libs tend to be poor performance wise. Anything native you used?

Collapse
faiz2rock profile image
Faiz rock

Hey kyle, that's wonderful.
I have a question for you please.
I see you use rnn just like me so how do you tackle showing perticular screen after opening app from notification.
E.g user received a notification message in a chat app As app is killed. Now user taps on the notification and app opens. Now how do you redirect to perticular chat? I tried with handleDeepLink but its slow.

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything • Edited

If you haven't moved to RNN v2 by now, I'd recommend it ;)

Collapse
faiz2rock profile image
Faiz rock

Yes, i did move to RNN v2.
Thanks

Thread Thread
kylessg profile image
Kyle Johnson Ask Me Anything

Cool :) I just moved a big project to it, I don't feel like it's perfect yet but still a big improvement over v1. I actually don't understand why so many people are happy with JS based navigation like react-navigation.

Thread Thread
ddashko profile image
ddashko

Hey Kyle, but could you please point out how you tackle this problem with opening app on the specific screen (using RNN v2) after clicking on push notification in tray? What package do you use for handling push notifications?

Thread Thread
ddashko profile image
ddashko

Hey Kyle, but could you please point out how you deal with opening app on specific screen after pressing push notification from tray (using rnn v2)? What package do you use for handling push notifications in conjunction with rnn v2? maybe you could point out to some great examples?

Collapse
ientertainer profile image
Dhruvin Patel

I solved this problem.. If you wish to know ? Ping me

Collapse
ddashko profile image
ddashko

Hey Faiz, were you able to solve this issue? could you please elaborate on what package you used for handling push notifications?

Collapse
onmyway133 profile image
Khoa Pham

What are the most 3 troublesome issues with React Native and how did you overcome?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

1 - Upgrading projects from very early versions of React Native. This has been, at times, an absolute nightmare (mainly iOS)! Especially when your project relies on several libs that require native changes. In the end, it was often easiest to create a new react native project from scratch and manually link libraries one by one.

Thankfully, this is rarely an issue now as it has matured. Having said that, I think it's really important to stay on top of React Native versions if your project has longevity.

2 - I had to integrate a react native app to read sensors for a car HUD, no simple way of overcoming this I just had to learn Objective C to write a React Native Bridge. Getting comfortable doing this is really valuable if you run into projects that require specific native functionality.

3 - Once, I hit an error which I could only replicate at the point of uploading a react native app, it would error out with "You must supply a CFBundleIdentifier for this request". This had me banging my head against my desk for a few days. In the end, it was something simple like the way I was creating my release scheme in xcode.

Collapse
mohmdalfaha profile image
Mohammed Nasser

From point 2:

How and what do you recommend developers who have never written native code to go about learning and implementing native modules? Are there any specific courses or just start with any iOS/Android courses found online which don't relate to react native ?

Collapse
mjmaix profile image
MJ Abadilla

on #2 you said that you have to learn Obj-C.

Is is still worth it to learn Obj-C or go straight with Swift if we need to write native modules for our RN project?

Thread Thread
kylessg profile image
Kyle Johnson Ask Me Anything

I feel like it’s actually more useful to learn objc if the purpose is purely for react native. The reason I say this is a lot of the big native modules for rn are written in it, rarely came across swift implementations.

Thread Thread
mjmaix profile image
MJ Abadilla

Thank you Kyle!

Collapse
hmmka profile image
Hmmka • Edited

Hi Kyle,

I have TV-screen where we simply run our web-app on react. I have found out that fps starts slowly go down after ~10-15 minutes. It can loose 5-7fps per hour. App starts with 58fps and goes down to 52fps in one hour.

I had a test where I have webpack + App which renders empty div. This simple app starts to loose fps in 10 minutes after launch.

Is react suitable for apps which suppose to run without clicks and refreshes for hours? (is it problem of my app or the problem of react? Is there anything what could help me?

My backup plan is to refresh the page every hour, but I am looking for a better solution.

BR,
Julia

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

Hey Julia, although this is more of a react than react native question I’ll see if I can help point you in the right direction. This definitely seems quite unusual and isn’t standard for react to see this.

To me it sounds like some form of leak, e.g registering event listeners that don’t get unassigned, or some recursive hell. Did you try compiling your app in production mode and running the output with a simple http-server? Also, have you tried running in chrome and inspecting memory and cpu usage?

Collapse
hmmka profile image
Hmmka

I have tests not only on dev but also on production of other product, which has the same results. FPS slowly goes down in some time.
This is why I raised the question if react suits for such products.

Probably, there is a problem in a set-up somewhere and react is not involved in the problem at all.

Collapse
engineercoding profile image
Wesley Ameling

What is the major benefit over React (web)? Of course for apps where you need access to the users music for a music player it makes sense, but for festivals for example a web app app should be sufficient.

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything • Edited

It ended up being an amazing app store SEO hack, a lot of the time we were the top search result for x festival - that's a lot harder to achieve on a website.

Also, quite simply, people take their phones to a festival not their laptop. This worked offline and tapped into things that only fit well on an app (e.g. find my tent, chat with image upload). It was definitely a lot easier to compete against the official app than website.

Collapse
dechamp profile image
DeChamp

I'm working on my second app now, but this will be the first one I release. My biggest fear going in to this is not building that app, but the red tape of getting it published. With that being said, my questions are.

  • What should I be prepared for when going to publish my app?
  • What can I do to help avoid headaches during the process?
  • How hard much harder is it, to publish both Android and IOS, vs just IOS?
Collapse
kylessg profile image
Kyle Johnson Ask Me Anything • Edited

Good question and congrats :).

How hard much harder is it, to publish both Android and IOS, vs just IOS?

To get the last question out of the way, I'd say if you face any red tape it's almost certainly going to be on iOS side. Also the time bottleneck is going to be iOS side too, publishing can take 1-2 days but sometimes more.

What should I be prepared for when publishing my app?

I can't give you a simple one sized fits all answer here, but I would say that as long as you're not doing something outrageous you'll probably be ok. Best thing I can do is list some of the common scenarios I've found that might catch you out:

  • If you're using media that's subject to copyright you may need to prove you have rights to use it (we had to prove we had rights from opta for developing dugout FC)
  • If you're using chat (particularly anonymous), you'll need a way for users to report people and block people.
  • If you're developing an app for a client who has a registered organisation you need to make them register their own iTunes connect account with their iban, don't try to use your own.
  • Your app needs to have a functional use and can't be purely informational.
  • Your app needs to be useful in someway shape or form for anyone that could come across it, not just specific users (e.g. invitation only)
  • If you're attempting to white label an app, iOS state there needs to be a functional difference and not just informational.

With the above being said it literally depends sometimes on who views it.

What can I do to help avoid headaches during the process?

  • Put the app through the review process early for iOS, if you check the option for manual release you could just leave it there and keep developing.
  • Get all of your metadata early. There are tools for generating all sized icons, take screenshots of the app in the biggest iPad and iphone, you'll need these to submit, iTunes connect can now auto resize to smaller devices.
Collapse
dechamp profile image
DeChamp

You rock and that was greatly informative. Thank you so much.

Thread Thread
kylessg profile image
Kyle Johnson Ask Me Anything

That's alright, enjoying all these questions!

Collapse
parth3724 profile image
parth3724

As shown in here (youtube.com/watch?v=0MlT74erp60&fe...), I need CPU profiling for react-native javascript code.

So can you please explain/guide me to tutorial for profiling javascript code?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything • Edited

Apologies, I don’t have much to share around this. Though I’m sure there’s plenty of resources out there for this.

Collapse
jackneedham profile image
Jack-Needham

Hi There, we have built an app in React Native and have released it on IOS and Andriod. We have had reports of the white screen of death on IOS devices and so far only on iPhone 8s. The white screen appears not on the home screen or after splash screen but when taking steps beyond the home screen.

We have no issues on the simulator and therefore it is really hard to track an find. Let us know if you have any tips or start points?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

Hey, unfortunately I can safely say I haven’t come across a white screen issue on any of the apps I’ve made. The only thing close is at the start screen where either the app is not registered or the packager is having issues.

Collapse
256hz profile image
Abe Dolinger

Very late to this post, but best I can suggest is to get the phone and build/ run the app from xcode. You will typically get much better errors than the command line.

Collapse
elijahcorleone profile image
£.j

How do you handle Keyboard hiding inputs ?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything • Edited

It's a bloody pain!

I think I've got a post somewhere in GitHub saying this is the biggest pain point at the moment with core React Native, and I posted that in 2017 github.com/facebook/react-native/i....

I just use a combination of the keyboard avoiding view and react-native-keyboard-aware-scroll-view, I've always been able to achieve what I want but it's always fiddly.

Collapse
dimpiax profile image
Dmytro Pylypenko

Emotions:

Sounds fantastik! This is your glory day, horray!
Each 10th day – new app!
I would like to give you 100 hundred copy-pasted emoji beer.

Question:

What is percentage of bridging to native modules?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

Low, less than 10% maybe, but I've worked on some weird projects. There's so many repos now on GitHub when comparing to 2015.

Here are the times I've had to delve into native modules.

  1. Fixing bugs in existing libs (e.g. react-native-navigation)
  2. Developing an app that integrates to a car HUD (Had the innards of a car on my desk for months)
  3. Writing a bridge that integrated with a custom bit of hardware we produced base on particle.io/
  4. Writing an iOS native keyboard extension (there wasn't a good project that existed, I guess it's not a common use-case)
  5. Writing an android module that talked connected to a hotel router.
Collapse
dimpiax profile image
Dmytro Pylypenko

Was anything except Keyboard Extension on iOS? For example connection ABAddressBook written on ObjectiveC.

Interesting your integration approach with CoreML for example.

Thread Thread
kylessg profile image
Kyle Johnson Ask Me Anything

All the above required me to write ObjC. The HUD app in particular required me to bridge a pretty beefy SDK that was pretty closed off to the public.

I haven't integrated with core ml, I do want to play around with using tensorflow and React Native at some point.

Collapse
northbear profile image
northbear

Ok, I'll keep in mind... Thanks...

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

No problem! :)

Collapse
wathsara profile image
Wathsara

I am implementing a app using expo. But now i need to add a image recognition part to my app and i used the tensorflow for that. But it cannot be done with the expo. So do you have any solution rather than ejecting the app. I mean like to use the Firebase mlkit without using tensorflow or something like that.?

Collapse
lil_starlight profile image
ais

how can software engineer make a difference in a country?

Collapse
amaslakov profile image
Aleksei Maslakov

Hi, Kyle!

Is it possible to write a React Native app that would turn on an alarm (play some sound) in response to a push notification (or some other sort of push). I want a node js server to be able to wake me at night on certain events, but a standard push notification is not enough =) An alarm clock would be okay. I never wrote anything with React Native, so I'd like to first find out if that's feasible =) Thank you!

Collapse
josephting profile image
Joseph Ting

Do you think React Native is a good starting point for someone who is a beginner in mobile apps development i.e. never touched Android studio, Java or Kotlin & Objective C or Swift for iOS; but has web development experience?

If so, do you think one would miss out on anything say difficulty in debugging or finding out root cause of a certain issue reported by users should one not having any experience in pure mobile apps development?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

It’s absolutely a good starting place! I started in the same situation apart from knowning java at the time.

Debugging I guess can be a bit slower than web depending on what you’re dealing with(e.g native level crashes), having said that the tooling is still very good. For debugging issues faced by users, using a combination of crashlytics and source maps can work really well.

Collapse
donghoon759 profile image
Donghoon Song

Hello. I want to save my images on cloud drives(Google drive, dropbox...) with react-native app. I can't find out the exact way. I don't know which package I should use. What I have tried is getting auth but I can't understand how it works and how to manage my key or status. Can you give me any advice? Thank you for reading.

Collapse
jalson1982 profile image
Jalson1982

Hello mate. We are building app that will communicate with ble devices. Issue is that we need to have both ios and android app wake up almost all time because when we enter in ble range app should connect on ble bluetooth device. Any idea how to manage background workers that will work on both platforms and keep app wake up?

Collapse
zonayedpca profile image
Zonayed Ahmed

Can you help me to automate all kinds of task from building to releasing app to the store in React Native? I prefer circle ci or same kind of provider with good User Interface. I am looking for Continous Integration as well as Continous Development using React Native

Collapse
prettydev profile image
Max

How to write background push notification functions without using google service?
Now I'm developing china's service, and It's a really difficult problem for me.
Background push notifications must run in android and ios.
Could you give me any advice?

Collapse
simaattar profile image
simaattar • Edited

Hey,
How can I run a code when app is closed ? is it possible at all?
I need to be able to write in a file every 10 seconds, say I need to write the current timestamp. How should I do this?
Thanks!

Collapse
ardn92 profile image
ardn92

Is there a fast photo capturing library for react native?! I've used react-native-camera but it takes up to 1 second or more to take a photo(even with: preprocessing, exif and rotation options set to false). But there are tons of android java applications which take photos way faster.

Collapse
ajinspiro profile image
Arun Kumar

Hi,
I'm a very angulary .Net developer (please don't be mad :) ), with very little knowledge about mobile app development. Now I have to make an app and I'm very confused about choosing whether to go with angular-nativescript or ionic or react-native. I have zero knowledge of react library. The app I need to make is a simple one having a member registration/login/dashboard. I'm really excited and scared because I need to complete this with a deadline. Which one should i choose.

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

That’s a tough one considering the deadline, may be the one time I’d say with stick with what you know assuming angular-nativescript can give you the outcome you want.

You aren’t going to get native ui components with the other two, but it’ll get the job done I’m sure.

Collapse
salman__bukhari profile image
Salman

Hey Kyle, we have a react native app with react navigation and when its left for a while with the app in the background some of the variable values get lost such as static variable values (part of a class which is instantiated in root of the app). These values contain important stuff such as token and refresh token of the app. Do you know why this happens? Only happens when the app is left for a day.

Collapse
arungopan profile image
Arungopan Gopakumar

Hey I am currently working in REACT NATIVE project. Our team is using Sectionlist component and we would like to implement drag / drop functionality with section. I need to move items from one section to be other using drag / drop. I was able to make the items draggable by using panresponder api. But how to get the reference of drop zone ? When the item is dropped, I need to know to which section I have dropped the item. Can you please share your thoughts on the same.

Collapse
fissben profile image
fissben

Hi there,

Did u ever faced with a problem, where app is "almost" not responding to bottom touches ? It's appears only on xiaomi devices with gestures layout enabled(no bottom android navigation) on android 7+.
Area of 40-50px height from the bottom is "hardly" responding (1 of 10) to the touches, while slides(left->right and vise-verse) working properly.

Collapse
aditya1501 profile image
aditya1501 • Edited

I have build a deep learning model of image classifier. I want to build an expo app which could take a photo and geolocation. this image should be predicted through deep learning model. And the result should be displayed on screen. I have no experience in app development and read documentation and watched videos but not able to get my answer.I don't even know whether using expo will help or not.

Collapse
elijahcorleone profile image
£.j

Also do you have any tutorials you could point out to building react native bridges and projects which android native requires libraries written in C

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

I don't, and to be honest I've always been out of my comfort zone doing it. Ironically, as a result, I'm more comfortable reading ObjC than Java as I've bridged more in iOS even though I spent the first 2 years professionally writing Java.

I'd love (if I had the time) to progress more in native development, I think it'd be the thing that'd help me become a better React Native developer. Realistically you can achieve absolutely anything so long as you have the Native Code to back it up.

Collapse
phsantiago profile image
Pedro H. Santiago

How we can get a better debugging experience? When I was trying to develop some React Native apps and has an error, the stack trace were so confusing. There is a way to have a great debugging session with breakpoints, watches... and don't need to keep changing our code until it works?

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything

I guess it depends where the error sits, some errors are hard to debug yes , either errors in the render markup itself or in native modules.

However I would say apart from that it's pretty much like debugging any web app in chrome with watches and other stuff you mention. I'd even go as far as to say developing with hot reloading is better than the react/webpack equivalent.

Collapse
antonfrattaroli profile image
Anton Frattaroli

What's your experience (if any) been like with RN-web?

We're considering rewriting an existing hybrid app to RN w/web, uses camera but no other hardware. I read above that you wouldn't recommend create-react-natve-app? For first timers, would you recommend using that, then when comfortable rewriting instead of ejecting?

Thanks!

Collapse
kylessg profile image
Kyle Johnson Ask Me Anything • Edited

I haven't used it. I love the idea of sharing web code with react native, but I don't think that idea should go as far as to share dumb components so I probably wouldn't use it. I haven't gone through the process of ejecting an app but I've been told it's really painful, but it's probably not quite as bad as rewriting from scratch.

Sharing code with web was what got me into react native in the first place, I don't think that benefit is talked about enough.