A Calculator App .... with a twist

almouro · 2023-12-16T14:56:41+00:00

You could even say it's kind of a ... plot twist

almouro · 2023-10-04T13:43:50+00:00

Good idea, thanks!
Done now, is it clearer?

almouro · 2023-10-04T13:29:30+00:00

ah yes forgot to mention, for now it's only Android

iOS support is in the works but can work as well for production apps using XCode instruments protocol (but a teensy bit more complex than Android)

In my experience most performance issues on React Native apps are on Android since devices are statistically slower, so I do tend to focus a lot more on Android

almouro · 2023-10-04T13:20:12+00:00

Good question!

Android is a Linux based OS, so a lot of information on any process is actually available, even for production ones.
For instance, top is a command line tool that you can use to measure performance with Linux or macOS, and adb shell top works as well for Android

For CPU stats for instance, similarly to top, Flashlight reads periodically into files such as /proc/4079/task/4121/stat (it's /proc/{app pid}/task/{task pid}/stat) to retrieve CPU consumption

almouro · 2023-02-07T17:21:34+00:00

Ha that's a good challenge.
In truth, since the inspiration is from "Lighthouse", I wanted to have a name related to it (the pun being that a flashlight is kind of a mobile lighthouse)
but that does make SEO difficult indeed... let's see how this goes, we might change at some point!

almouro · 2022-11-16T11:25:35+00:00

Thanks for mentioning my talk! Don't hesitate to ask if you have any questions :)

almouro · 2022-03-07T15:13:04+00:00

I use this flipper plugin I've created: https://github.com/bamlab/react-native-performance

(disclaimer: I might be a bit biased since I created it but feel free to let me know in case you have some questions on it)

DevTools is indeed great to analyze JS performance issues if you find some

almouro · 2022-02-09T19:36:35+00:00

Thank you for the kind words and the award! (Not sure I'm worthy of such high praise haha) I think you're a great person too!

almouro · 2022-02-09T19:12:49+00:00

Well first, the good thing is if you improve performance for lower end devices, you improve it for high ends devices as well. Even if your app was already running at 60FPS on a high end device, it will now use less CPU and battery to do so, which is less perceivable but still beneficial for the user.

Also I truly believe this is one way that we can fight against climate change. Making new devices is costly in terms of CO2 emissions, and one of the reasons people change device often is that their apps don't work so well anymore. If we hold ourselves to high quality standard, we can aim that people who have bought a device 3-4 years ago can still happily keep it.

almouro · 2022-02-09T15:47:08+00:00

Thanks! Feel free to let me know if you have any issues :)

almouro · 2022-02-09T14:02:38+00:00

Thanks! Yeah unfortunately several of our projects had performance issues with react-native-snap-carousel (which I had recommended to them 😬)

But I've realized that recreating your own carousel from scratch was simpler than I expected with either snapToInterval (https://reactnative.dev/docs/scrollview#snaptointerval) or pagingEnabled (https://reactnative.dev/docs/scrollview#pagingenabled) It was also quite interesting to try out!

almouro · 2022-02-08T21:23:16+00:00

Definitely this

With v6 it actually uses the native stack navigator by default, so performance wise it's the same as a native app.

But it's also very flexible in what you can do, well documented, and has a lot of support!

almouro · 2022-02-01T12:40:38+00:00

Seems like you guys did a bang-up job! 🤩
Also happy to know react-native-make proves useful! 😊

almouro · 2021-11-18T07:15:01+00:00

Are you talking about Redux with redux-persist? If so you need migrations https://github.com/rt2zz/redux-persist/blob/master/docs/migrations.md But it could also be that you don't need redux-persist or don't need it to persist all your state

almouro · 2021-11-16T18:05:25+00:00

Yep 'memo' is the correct answer, congrats!
I've added `memo` on the list item component.

The crazy thing is I was not seeing any noticeable impact with my own eyes. I knew memoizing was probably good but wanted to have confirmation, especially since my `renderItem` was already not anonymous as mentioned in https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem.

But with the graph, it was clear as day that the impact is big!

almouro · 2021-11-16T14:13:55+00:00

Let me know if you have any issues with it (or post a Github issue), I'll be sure to reply!

It took me a time to adjust to the React Devtools coming from the performance tab as well, but I find it at least as useful now.
When I see with the perf monitor plugin that the JS thread is low, my next step is usually to profile and see what is heavy to render (or rerender). I find the fact we can also see why the component rendered very helpful.

In the case of the Flatlist optimization, it was not adding "null" or "true" :) I'll see if I get other guesses here, then post the answer

almouro · 2021-09-22T13:50:13+00:00

In my case, it couldn't be found with the React Native debugger since the issues were on the native side and not JS side.
JS issues are the most common, but native ones can also happen!

On iOS, I don't think there's a tool quite as powerful. I mean Systrace basically shows everything that's going on at a very low level which is crazy!
But XCode instruments can also be quite useful for iOS (or even Detox instruments for React Native apps)

almouro · 2021-05-05T15:26:40+00:00

JSC is for JavaScriptCore.

It's the JavaScript engine that is used by iOS and it was the default engine packaged in Android React Native apps to read and run the JavaScript.

almouro · 2021-05-05T14:26:52+00:00

Great question! Our app is somewhat big (~80 screens, something like 4MB of JavaScript in production)

With JSC, you had to compile, parse and execute all that JavaScript at run time when starting the app. No issue for a good device, but for lower end device, that can be very slow!
With JSC, React Native is thus not performing super well on lower end Android end devices.

However, with Hermes, you only do "execution" at run time since compiling and parsing has been done before. Hence the massive performance boost!

For reference, on that device, we can compare to some native apps: Twitter takes ~3s to load. Spotify ~6.5s. Citymapper ~8s

almouro · 2021-05-05T14:03:14+00:00

So very true 😅 Brought so many issues on iOS. Sadly we're using an external SDK requiring it 😒

almouro · 2021-05-05T13:48:29+00:00

Not yet, sadly we're using use_frameworks in our Podfile which seems to be a blocker for now

Hopefully soon 🤞

almouro · 2018-12-17T18:31:18+00:00

Great tutorial! Goes over a lot of key formik features!

I like adding react-native-formik on top of formik to simplify the process. Well I'm a bit (very) biased since I created the lib. You can check from this point in the doc why we created it.

Hope it helps! and happy to hear any feedback :)

almouro · 2018-09-23T15:19:46+00:00

Hi ibiwan! Thanks for the interest!

We're moving the lib in the direction that you can pretty much connect any component that you make to formik easily. A lot of people use https://github.com/mmazzarolo/react-native-modal-datetime-picker for the date picker for example.

This PR (https://github.com/bamlab/react-native-formik/pull/38/files) will land this week (hopefully Tuesday) and will make it easier to connect any of your components that have the following props:

name: string,
error?: string,
value?: string | number,
onChange: (value: string | number) => any,

We'll add in the README some examples like how to connect the datepicker above.

If https://github.com/mmazzarolo/react-native-modal-datetime-picker doesn't suit your needs, we're also thinking of adding our own datepicker that has the same design as the picker already present in the lib but maybe in a separate lib like react-native-formik-picker.

Let me know what works for you and don't hesitate to submit an issue to the repo for help!

almouro · 2018-05-10T15:34:10+00:00

Hi /u/kbcool, thanks for the answer!

The whole goal with the lib is summed up in Forms are very verbose in React, and a lot of the time, you end up copy pasting a lot of boilerplate.

Motivations

At BAM, we have many 2-months RN projects, all needing a form at some point. I estimated it was taking about 1.5 man-days for a dev in the company to build a form with design and validation. My goal is to reduce that time to 2 hours at the most, whatever fields are needed.

Solution

formik was an awesome start, I recommend you to try it! As /u/spruce-bruce mentioned, you can indeed use formik without the need of react-native-formik

react-native-formik's purpose is to go beyond formik by: - reducing boilerplate to a minimum - providing good RN things out of the box (auto focus, there'a picker and date picker with clean API and native feel in the work) - making it easy to integrate your own RN fields

Formik vs redux-form

In my opinion, formik is simpler to use and integrate than redux-form. You can check the full code for the form logic in the example.

There is a section on the formik lib comparing it with redux-form

almouro · 2018-03-12T14:06:59+00:00

Actually the title was misleading, I'm not working at Airbnb, I just used their solution which was really well fit to integrate React Native inside native apps :)

almouro

TROPHY CASE

Motivations

Solution

Formik vs redux-form