search

shirakaba / react-nativescript

React renderer for NativeScript
https://react-nativescript.netlify.com
MIT License
284 stars 14 forks source link

Implement basic navigation functionality (TabView and Frame/Page) #14

Closed shirakaba closed 5 years ago

shirakaba commented 5 years ago

In short, implement all of Architecture and Navigation in a React-friendly way.

So far <TabView> is fully implemented (as far as I can see), but is pending optimisation (#10).

What remains is the Frame/Page navigation. I've got reacquainted with the new React Context API (was previously used to the legacy version) which should provide a basis for approaching this.

shirakaba commented 5 years ago

~Totally blocked on this one. I've made a suitable React component for Page, but I see no way to render it into any container on the host (React needs a host container as the root of its render tree).~

https://docs.nativescript.org/core-concepts/navigation#page

By design, a Page can't be declared as a child of another component. It is used as a root component of a module, in which case the module becomes a page module. Here is an example of how you can implement the item-page module from the diagram above:

~I've played around with React.forwardRef() and done all the clever tricks I can think of, but nothing's working out.~

(Last-minute breakthrough): I got something apparently working by making a special exception in the HostConfig (don't call appendChild() when the child is a Page). Will play around and monitor whether or not this workaround leads to any unexpected breakages.

Could be used as a basis for solving #3..!