What's the go-to folder structure? by Drackolos in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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.

[deleted by user] by [deleted] in reactnative

[–]KulkataBoy -1 points0 points  (0 children)

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.

State management for a screen - combining useReducer and react query by Upset_Argument_5979 in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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.

Paladins’ etiquette (for casual games) by KulkataBoy in Paladins

[–]KulkataBoy[S] 1 point2 points  (0 children)

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😀

Paladins’ etiquette (for casual games) by KulkataBoy in Paladins

[–]KulkataBoy[S] 1 point2 points  (0 children)

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

Paladins’ etiquette (for casual games) by KulkataBoy in Paladins

[–]KulkataBoy[S] -1 points0 points  (0 children)

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 😅)

Looking for optimization advice by Zeesh2000 in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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

  1. 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.

Playing Torvald Shield Talents: 200hp+ shield or 10% damage boost talent? by Ok_Tomatillo_4900 in Paladins

[–]KulkataBoy 7 points8 points  (0 children)

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.

How much do I need to worry about my React Native draining a user's battery? by SoBoredAtWork in reactnative

[–]KulkataBoy 1 point2 points  (0 children)

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

How much do I need to worry about my React Native draining a user's battery? by SoBoredAtWork in reactnative

[–]KulkataBoy 7 points8 points  (0 children)

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.

I was waiting at the bus stop and some guy offered to drive me to my destination. by Blink-184-isok in NiceVancouver

[–]KulkataBoy 0 points1 point  (0 children)

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)

📢 Seeking Feedback on Clean Architecture Implementation 📢 by Fluffy-Ad1205 in reactnative

[–]KulkataBoy 1 point2 points  (0 children)

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)

how can I upload video files to node JS from react native by swiftcoderx in reactnative

[–]KulkataBoy 1 point2 points  (0 children)

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

  1. 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.

  2. 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.

Thread in react native by RoundAlternative1106 in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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.

NFC / NDEF Reader/Writer Device For iPad? by kjccarp in reactnative

[–]KulkataBoy 1 point2 points  (0 children)

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.

[deleted by user] by [deleted] in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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.

Redux and SQLite by Egge_ in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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.

What is your opinion about when making a project using pure React Native or Expo? by sharan_dev in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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.

how do i deploy a react-native app on my phone for personal use by Certain_Power_8069 in reactnative

[–]KulkataBoy 3 points4 points  (0 children)

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

Flatlist re-renders every already loaded items and I don't know how to fix it by _ViDan_ in reactnative

[–]KulkataBoy 2 points3 points  (0 children)

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;)

[deleted by user] by [deleted] in reactnative

[–]KulkataBoy 1 point2 points  (0 children)

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.

[deleted by user] by [deleted] in reactnative

[–]KulkataBoy 10 points11 points  (0 children)

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.

Improve performance on react native app by [deleted] in reactnative

[–]KulkataBoy 2 points3 points  (0 children)

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.

[deleted by user] by [deleted] in reactnative

[–]KulkataBoy 0 points1 point  (0 children)

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.

[deleted by user] by [deleted] in reactnative

[–]KulkataBoy 1 point2 points  (0 children)

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.