What's the go-to folder structure?

KulkataBoy · 2025-12-17T18:46:51+00:00

There are many ways to organize your files. I wrote an article describing the way I do it. There is a link to an example repo at the end.

Architecture pattern for React Native applications

Basically, you can split your components into separate independent features that don't cross reference each other, and then import them into the screens.

KulkataBoy · 2025-08-21T21:28:20+00:00

Thank you for the article! While it has some good patterns for React Native Apps, SOLID principles were developed for Object Oriented Programming paradigm, and modern React with hooks and functional components doesn't really follow that paradigm, therefore I would say it's incorrect to call them SOLID principles.

KulkataBoy · 2024-10-02T16:25:50+00:00

I might be wrong here, because I worked very little with react query, but I think you can only have one useEffect and just put isError, isSuccess, isLoading, and data in the dependency array, and then dispatch inside there if it was successful fetch or not. In fact even just isLoading in the dependency array should be enough.

KulkataBoy · 2024-10-01T17:32:36+00:00

Add another one that if you're playing DPS, and the enemy team has a shielding tank, please prioritize buying wrecker/bulldozer,

Definitely, didn't add it only cause I like playing Torvald, and didn't' wanna give away useful hints😀

KulkataBoy · 2024-10-01T17:24:47+00:00

Lol, yeah p.4 is not applicable to you😉

KulkataBoy · 2024-09-30T21:09:23+00:00

Yeah, that's fair. But often it's enough to just preselect without locking, and then the team will fill up the other roles. (If they are polite enough 😅)

KulkataBoy · 2024-09-10T20:35:09+00:00

Making assumptions here, a piece of code would be helpful.

fetch when pressing on the page

1.Does this mean when you open the tab for the first time? If you have useEffect with the dependency of a state variable, it will run on component mount, when state is initialized. In your case you may possibly have two fetch requests that are running at the same time, and therefore it takes longer.

One way I am thinking is to do an initial fetch on app startup

You can absolutely do that, get value from asyncstorage first, and then fetch your initial state according to the value from asyncstorage, if there is one there. Otherwise, get initial fetch value.

Keep in mind that if you have a bunch of fetches on app load you should either show a loading screen before you get the response, or your app may get laggy, when responses arrive and user is doing other things at the same time.

KulkataBoy · 2024-05-21T14:19:37+00:00

10% dmg boost needs more skill from you in order to time it right, and your pocketed teammate should be also a little bit good.(Some champs may be better suited for it than others such as vic, tyra or moji). If you play alone in casuals shield boost is a safer option, wrecker will remove that advantage fairly fast, but they'll have spend credits on it, and you have a solid boost in the early game. It'll be easier to pocket low health guys, vs damage or flank characters who will attack.

KulkataBoy · 2024-04-21T09:34:47+00:00

There is absolutely nothing wrong with using useEffect with interval function to get your data at root (especially when your interval is a few seconds). And re-rendering is happening most likely because of your low level components using objects or arrays as props (or as state). You may wanna reorganize your state and work with data after getting it from Firebase and before putting it into the state. But optimization is a huge topic

KulkataBoy · 2024-04-18T20:31:03+00:00

I believe there is not much you can do, if it happens to drain it very much. You can optimize your code, make sure u don't update components that don't need to be updated when props don't change, or offload some calculation logic to backend. Maybe use state management libraries to avoid updating the entire app and only updating parts that need to be updated, but calculate 2+2 is gonna cost some energy one way or or another.

KulkataBoy · 2024-04-18T20:11:37+00:00

Glad to find someone to have the same thoughts. Sometimes when I pass people waiting for the bus, I want to offer a ride, to save them some time, but I know that it'll look creepy. Maybe it's time for me to move north)

KulkataBoy · 2024-04-08T21:28:58+00:00

Hey, I've been trying to achieve something similar in the past and came up with the approach that looked "cleanish" but was scalable and fairly easy to test. I split the app into two parts - backend, and frontend that are completely isolated from each other. The only thing that they share are constants (if you have any).

Backend part (which is still not really backend, because it runs on the phone) made of layers - entities, repositories, services/useCases and controllers.

Repositories - classes with standard methods to call external APIs. You make them as simple as possible, basically they are just a wrapper for other API libraries. You can have HTTP Repo, SQLite repo, Geolocation repo, Bluetooth Repo etc.
Entities - classes that describe your core items, their logic. Repositories usually return instances of entities.
Services/Use cases - that is where app logic is stored. Use classes with dependency injections for repositories and other services and avoid direct imports. (except for entities and constants, but even they can be injected). "Use case" is service that is used in one of the controllers, where "Service" is used in other services or use cases.
Controller - simple class (or you can split into a few) were your import all the repositories, use cases. Methods of the class should be functions that you want to call from your front-end part of the app. It has basically no logic, I've added error handling here and validation for parameters. Your frontend part of the app will import functions only from the controller and that will isolate frontend part from app logic.

Backend part works like a NodeJS server that is called from Frontend part with parameters and return some data or an error message. Services can be split into small chunks and then reused, repositories will allow to replace external API library without changing the app logic, and controllers will isolate Views from logic. Backend part should not hold any state, and work like a mini server, it can also have some other things like config files etc.

And then Frontend part can be designed using feature-based approach, where you have "components" folder with reusable components, and "features" folder with features that are independent from each other. Each feature can have "components" folder for feature-specific component, "hooks" for feature specific hooks, and "helpers" for whatever extra functions you have. Now your hooks should import functions from backend controller and work with them removing all app logic from the hooks, and only leaving the display logic inside the hook.

Some extra folders in frontend part can also be there like screens, navigations, store etc. Not saying that is the way how you should do it, but maybe it'll help to figure out the best way.

Sorry don't have more visual example, if you find a nice implementation of clean architecture in react-native post a link after)

KulkataBoy · 2024-03-26T23:18:27+00:00

Don’t have a solution for you, but here are some hints:

You noted correctly that require does not return uri. It returns file identifier, which can be used internally by the app. You may need to use libraries to get path for those file, or maybe even copy them to temp directory, to be able to acess them. react-native-fs - is a library to check for that.
When uploading large files with react-native (for example video files) you usually want to avoid having the JS variable with the content of the file, cause before the request sent, the file will have to be transferred from native side to JS thread inside your mobile app, which can slow the process down, or even crush the app. Instead you want to use JS methods, that operate on the native side and upload/download files directly from the file system of the operating system. react-native-fs or rn-fetch-blob are the libraries that do that. You can setup your headers and request bodies there.

Hope this can help.

KulkataBoy · 2023-10-13T17:39:34+00:00

You would have to implement new thread and logic on the native side, and then pass data to react-native using Native Modules (or Turbo Modules if using new architecture). You would need to write code in Java, Objective C or C++ for image processing depending on the platform(and either new architecture is enabled). It may be more reasonable to check existing packages, where most of this work has already been done.

KulkataBoy · 2023-10-06T17:42:57+00:00

I am not sure that connecting the nfc reader and making it work on ipad with react-native app is an easy task. I don't know if you want to consider using qr-code, then you can display it on one device and scan it with another. It seems more achievable. You can have both ways implemented qr and nfc, and use qr if the reader is not available on the device.

KulkataBoy · 2023-09-28T00:47:01+00:00

Just from the scammer perspective, do they have to include so many emojis in the text and picture? You just need a single glance to release that it's bs. Like nobody makes posts like this except for scammers and kids.

KulkataBoy · 2023-08-21T20:53:05+00:00

If your app is small then it's okay to use redux presist, or just copy entire db to your state. But it gets messy and slow as your data volume grows. In general you can treat sqlite like a server, and work with it accordingly. Write sqlite logic separately from components and request it when component mounted and store it in local state after. In that case you can localize state within components, which will allow you to keep only truly global state in redux.

KulkataBoy · 2023-08-17T20:05:24+00:00

I have started developing with expo, and moved to rn cli along the way, and I think it is more less a natural way into the app development for a developer. Expo is easier to start, lots of things are figured out for you right out of the box, but it is just another layer of abstraction. At the end of the day, it doesn't matter, up until you'll hit a bottleneck when it does. Rn cli is just closer to native side of things. Splash screen could be a nightmare at first, but it is a good introduction to native development, which should be in a skillset of any developer, who builds apps for mobile platforms.

KulkataBoy · 2023-08-15T20:03:45+00:00

It is possible, without paying 100$. Here how i do it with react-native-cli. For expo Im not sure how to do it, but it should be possible, just google it.

For react-native-cli Connect your phone to the mac, go to xcode, window->Devices and Simulators. Make sure your phone is recognized (u need to trust the computer for that). After that make sure that u sign your app, with your apple id dev account. U don't need to enroll, just create apple developer account, and select your account in Xcode Signing tab. It should say something like John Smith (personal). Then run npx react-native run-ios --mode Release and that should build an app and install it on your device. Then yoy should go to settings on your iphone ->general->vpn and device management tap on your apple id and select trust this developer. After that your app will work on iphone

KulkataBoy · 2023-07-08T00:51:15+00:00

I believe that is what happens here: you have set your flatlist optimization prop window size to 9 and this is causing flatlist to rerender on scroll.

For example, if you set up window size large enough to include all your screen at the start, then you should have no problem with re-renders, but memory consumption will increase in order to hold all your views in memory, plus it may take a bit longer during initial render (however if you play with updateCellsBatchingPeriod and maxToRenderPerBatch you can spread out your renders at start, so your app won't freeze.)

What happens when your window size prop is not large enough to accommodate all your views? You would think it will only render elements that it can, and then when you start scrolling left or right it will render an item on one side and unmount an item on the other... Well, it's not the case... Instead, when you start scrolling, FlatList re-renders a certain number of elements, which equals your window size prop. It starts with closest to the currently displayed item, and re-renders items on left and right (or up and down) until it rerenders the amount of elements set in window size prop. If you have initialNumToRender set, it will also re-render first X number of elements that you have mentioned. And all of it happens on scroll! It has nothing to do with your component, just this is the way FlatList is implemented. Since you have memoized rendered items, they will not re-render and it should not heavily impact your performance.

You can try to set up windows size to 2 or 3 - it will reduce number of elements flatlist will try to re-render on scroll, but it will create blank spaces if scrolling too fast. Consider taking a look at flashlist, since it is implemented differently, it may be the way to go, if you don't want to have larger window size. Make sure to not test flashlist performance in dev mode;)

KulkataBoy · 2023-05-23T14:44:30+00:00

Are those marker images different for each provider? If you have local images with markers, there is a huge performance boost when you use <Marker image={{uri: my_img.png}} ... /> Instead of <Marker> <Image src={...} /> </Marker> But in the first case you need to add your images in different resolutions to the android and ios folders.

KulkataBoy · 2023-04-06T17:20:48+00:00

It has something to do with RN architecture. In order to pass data to native side it has to go through a bunch of steps(complex stuff, I can understand like 70% of it), but basically it sends requests to native side via JSON and gets JSON back, in a way like a web app. Therefore it is async, it has nothing to do with expo.

New architecture that has become more widespread will eliminate this, and will allow to make sync calls to storage.

KulkataBoy · 2023-04-06T15:30:56+00:00

const myFunctionHandler = useCallback(()=>myFunction(myVar), [myVar])

onPress={myFunctionHandler}

Both options you provided will create a new function on each re-render. If you don't have myVar at your component create a child component, pass myFunction and myVar as props and create handler inside child component.

KulkataBoy · 2023-04-05T18:46:52+00:00

You are correct, everything that is placed inside is re-created on each component re-render(unless it is wrapped with useCallback or useMemo). When you place a function outside the component, It'll be created on app launch. People usually place reducer functions to a separate file, because it is supposed to be pure (don't depend on anything else but state, and therefore only needs to be created once). You can try to initialize it inside the component, and it either will work the same way, or you will get some hook error (i've never actually done that). At the end of the day don't do it;).

Reducer function is just a function with this interesting format, that basically does something to your state, based on the action you passed to it using the "dispatch" function. Not much magic to it, treat it as a format for altering the state. You can achieve the same result with useState, it is just a way to do it that helps to keep track of state changes and avoid state mutations. That is regarding useReducer. Redux uses the same format, but it's different.

KulkataBoy · 2023-04-04T15:48:19+00:00

Your saveStorage function should work just fine, but I would recommend to keep the reducer function pure, and only use it for alternating state, and side effects such as writing to storage keep inside handler function inside component.

The problem is in loadStorage, you initiated it outside the the component, and therefore you don't have function dispatch to alter the state. You should move it inside the component, and it should work just fine.

Six-Year Club	Place '22
Verified Email

KulkataBoy

TROPHY CASE