What are the best design Patterns for React Native apps - react-native

I am new to React Native and only recently picked it up, I am using it to make an app for my final year university project, learning the framework as I go using different examples from online.
So far I have been using function components with everything for one component in the same class, eg. view, functions and styles. - So far this has been working and seems to preform efficiently.
My question is aimed at any experienced React Native developers. - Is my current approach of function components a good coding practice for React Native apps or should I be using class components. From my little experience it seems function components are easier and I have done some research that shows function components are becoming more common with hooks etc. - I'm just not sure if its the best approach for a full application.
Another question I have is aimed at design patterns. - Should functionality, view and styles all be in the same class or would it be better practice to split them out and just import as appropriate - similar to Angular. The reason i ask this is because all examples that I have seen/followed up to now take the approach of everything in the same class but that may just be for presentation purposes.

Related

How to determine how difficult a programming language is to learn

I appreciate that their are a lot of factors which might go in to determining the answer to this question.
For a university assignment I am comparing 3 frameworks for multi-platform development. One of the things I need to consider is usability and within that, how easy is it to learn. Are there any quantifiable ways of determining how easy/difficult it is to learn a programming language?
FYI I am comparing Flutter, React Native and a .NET MAUI/Blazor Hybrid. If I was to compares lets say Flutter and React Native then Flutter only really requires a developer to learn Dart and OOP Concepts whereas React Native requires a developer to learn JS, basic HTML and CSS as well as OOP concepts. Now on the face of it, this makes React Native look more difficult to learn, however the general consensus seems to suggest that JavaScript is easier to learn for a complete beginner than Dart. I then need to consider that the developer must learn basic HTML and CSS and how would I determine that having to learn these makes React Native more difficult to learn overall?

How to use Leaflet in React-Native?

Note for people before deleting my topic without even looking at it:
Of course, I've searched for similar topics on StackOverflow. I could only find one that isn't related to my problem: How to use react-native-webview-leaflet?
Hello everyone,
I'm kind of new to React Native (only got to learn navigators and basic components such as Text, View, FlatList, getting my data from my own API, etc) and I didn't learn to React at all as a first step.
Today, I'm a student in a kind of school collaborating with some big science research center linked to my government and I have to make a map app for them. They have one non-negotiable criterion that the project must not use any of Google technology in it. I would like to use Leaflet inside React Native because it allows me a lot of customization about map markers and animations I will need to use.
After spending hours searching for some tutorials, the "biggest" thing I've found is this on Github: https://github.com/reggie3/react-native-webview-leaflet and this person even made a video example of a working project with Leaflet inside React-Native: https://www.youtube.com/watch?v=IurE-a9P3tY. Despite it being exactly what I'm looking for, I'm 100% confused about how to use it in terms of code (I'm not even able to display the basic background map) and I can't find any real help in form of a tutorial.
Would any people know something about it? I would be so grateful to you.
Thanks a lot and if you don't know about it, at least thanks for spending time to read.

React Native : function component or class component approach? [duplicate]

This question already has answers here:
ReactJS: what is the difference between functional component and class component
(11 answers)
Closed 2 years ago.
I started learning React Native some days ago, having never worked with it or even React.js before, and according to React Native Dev website, there seems to be two different approaches when it comes to React Native code writing. The issue is, as I learn reading several docs and watching tutorials, it gets a bit confusing to me at times, having to figure out which approach is used.
Is one of these approaches more recent than the other ?
Is there one I should favour at the expense of the other ?
I would say that the functional component approach is "newer" since there has been a lot of emphasis on using hooks as of late.
Personally, the ability to use hooks is a huge plus for me so I always look to use functional components if I can. I also find that I can do the same thing in a lot less code when I use functional components + hooks.

React Native - Separate View and Logic

Is separate view and logic (like java class and xml in Android) in React Native is best way to increase app performance? Any reference for this guys?
In terms of app performance it wont really matter because in the end it all gets combined into a single JS bundle file. But separating render and business logic is always useful. It lets you rewrite business logic without having to navigate render logic when you want to make a change and also helps reuse business logic elsewhere in your app if you need to.
A simple example is something we evaluated at work, we have a react native application and a react website. A lot of our business logic of API handling data parsing and storage and redux handling was similar if not exactly the same on both platforms. What we realised is that if we write all the business logic separately we could simply write it once and use it on both platforms and only our render logic could change. Now it is more complicated than my explanation of course but it is possible.
Hope this helps.

Communicate between two unrelated components

How do you handle communication between components with no common parent in react-native ?
What's the best way to communicate between two unrelated components ?
I did some research and the most recommended way seems to be using context https://reactjs.org/docs/context.html.
There are multiples way to handle a global state, one of them is the new React Context API, but one of the most famous is redux, written by Dan Abramov, who works at Facebook, inspired by flux, an old facebook library to manage global state. There is also Mobx and many others, I suggest you take a look at each one and see what fits you best, it's hard to tell you without knowing your problem. Feel free to ask any other question about one of them