Is there an API for offscreen rendering in React Native? I've not seen anything in the official documentation that seems to allow rendering an arbitrary view stack offscreen. I've come across stuff like react-native-view-shot, as well as a few internal pieces like Renderer in concert with UIManager.takeSnapshot, but it's not obvious how to make those pieces work. I've looked into creating a separate RCTSurface as well in a custom Native Module, but that seems to cause a deadlock when creating a RCTSurface for a RCTBridge that already has a RCTRootView defined.
Is there an easy way to simply render some arbitrary view stack in React Native offscreen? Is there some internal API that can be used for this?
Related
First and most important: I am by no means a developer. We hired an agency to develop an APP for us, and i was given by a developed solution that i am not convinced if it is the best solution, So i would like to ask you guysfor advice.
Unfortunatelly i cannot put pictures nor links to code for the app, but i will do my best to explain myself:
The problems i encountered are mainly two:
All items appear to have fixed sizes applyed to them: When testing the app on different devices, the size of the elements is not responsive at all. In fact on small devices (Moto G5) There are elements that fall behind the bottom navigation bar making them unaccessible.
Lot of stuff fall below that said bottom navigation bar.
My question is the following:
Is react native responsive?
In web development there is a lot of flexibility when it comes to responsiveness with CSS and JS. Is React native any different? or there is a way to prepare the layout so it fits most of the common sizes without losing acces to interactions?
Hope i explained myself correctly. and again, sorry for not asking a technical specific question.
React Native is designed to be responsive, but it requires a different approach compared to web development. In web development, you can use CSS and JavaScript to make your website responsive, but in React Native, you use a different set of tools.
We have many ways to make the app responsive with the device's large screen and small screen.
Use the Dimensions API: React Native provides the Dimensions API, which allows you to get the dimensions of the screen at runtime. You can use this information to adjust the layout of your app based on the size of the screen.
Use third-party libraries ex: react-native-size-matters, react-native-responsive-screen, ...
Use Flexbox: React Native uses Flexbox for layout, just like web development. Flexbox is a powerful tool for creating responsive layouts that adapt to different screen sizes. You can use the flex property to adjust the size and position of elements on the screen.
In terms of your specific issue with elements falling behind the bottom navigation bar, it's likely that the layout is not taking the height of the navigation bar into account. You can use the Dimensions API to get the height of the navigation bar and adjust the layout accordingly.
Summary:
Tried the Gesture Responder system here, but I can't seem to figure out how to select the element currently under the user's touch. After tons of experiementing, it seems that this is not possible. (?)
Where I'm stuck at: Many Views in a grid-style layout that should support drag-multi-select
What I want to achieve: Something similar to when2meet
Current using React Native with Expo
I want to display several components (maybe up to 6) in my React Native app that continuously change their position, i.e. slowly but fluently float on the screen and change their moving direction randomly or based on an angle at which they approach the edge of their parent, if they do. What I don't know is how to change their position dynamically in a performance friendly way. Because I also want to let the user interact with them by tapping on them, it cannot be a video in a background or something similar.
If I were dealing with a standard React app running in a browser, I think I would simply manipulate the element's style attributes top and left. Since I want to implement this in React Native, I think there must be a solution that is way more performant and elegant, involving manipulation of the native elements that back the React Native views or using some animation mechanism, because re-rendering a view with like 6 components at least 30 times per second doesn't seem like an appropriate solution and an overhead in general.
Googling things like "react native dynamically move element" or "react native dynamically change element position" did not bring any obviously appropriate results. I came across a native element method setNativeProps, though, but couldn't find any information on what props I could set to change the element's position on the screen and how performant that would be. I also looked into React Native's Animated API, but could not quite relate my problem to the solutions that this API offers from a first glance.
Does anyone know a mechanism or maybe a library that would be appropriate to use in the situation that I described?
I'm curious why React Native doesn't utilize the native platform list components such as RecyclerView for Android and UITableView (CollectionView) for iOS.
This could ideally provide a lot more feature support and improved performance then what is currently available.
Is there a reason the React Native lists are solely backed by ScrollViews instead?
I couldn't personally tell you but quoting the Author.
UITableView API is not well suited for the asynchronous nature of ReactNative, and the resulting code was pretty gross, especially when trying to do smooth animations to grow the heights of rows, which we do in the groups app.
Source: Early discussion on the very point.
For Recycler View in Android. Try this.
react-native-recycler-listview
Works ! Some gradle setup required though.
I've been digging deep in React Native for the past week to decide if I and the team should adopt it. And I gotta say it seems promising. I've also learned about its ability to integrate with existing native projects and its incremental adoption to change existing native projects.
My question is what are the cases/reasons that would make me wanna convert my completed old native projects (iOS/Android) into React Native?
Edit: Just to clarify, our team is currently building native apps only.
It depends on what type of app you are building. But you can always use bits of code from native or react native. Since you all can code in native, anything you cannot find you could make a native component.
The advantages of React Native show up with code reuse between iOS and Android so that your team can iterate faster working together. Many big apps have achieved 80% or more code reuse.
You will find flexbox so easy to quickly create views to specs and to change quickly with styles. Plus they are all in code and that plays nice with git.
See edit below:
Now in saying this I have never used React Native inside a native project but to call actions and such you would need to expose functions to call from the JavaScript side. I don't know if a singleton is generally used or just an import of the controller functions or delegated you want to expose but it has to call back to the native application . It is easy to use a native component inside a React native application and I have done this so I am sure it can work the other way.
Edit: Out of curiosity I added some react native views to a test project and it works surprisingly well. No singleton needed Javascript maps the view tag and the exported functions. Crazy. The concerns below still exist but I think if you are changing to change that is wrong but if you have UI changes you want to make then it could definitely benefit as your reuse can grow across your platforms.
Drawbacks I have seen- sometimes transition animations can be laggy if you are not using the native navigation methods. Using both native and React Native adds size to your app so you would need to keep an eye on that. Also start up time can hurt and so monitor that as well.
With all that said I have built a fair bit with React Native lately and it is, at times, beautiful and frustrating for a native developer.
Here is a great article on Instagram and React Native.
Also AirBnb heavily uses RN. They may be completely RN now but I am not sure. They do drive a lot of the outside frameworks in RN for example the maps component in RN. They also just released Lottie and it is very cool. Here is an article about AirBnb.