I've integrated React Native into an existing native Objective-C iOS app. I need to navigate from a React Native Component to a native UIViewController, and back.
I'm currently trying to get a Native Module to work but, while my Native Module is called from the Javascript, pushViewController and presentViewController do nothing when called.
I have also looked into NavigatorIOS, but I don't see anything in the documentation that shows how to navigate from React Native to native. The same goes for React Navigation.
I've also looked into React Native Navigation, but still don't see a way to navigate to native view controllers.
Can anyone point me in the right direction?
No official documents said anything about navigating back from RN to native.
Native Module is the correct approach.
I think you could revisit your Native Module code and debug any potential issue there.
Related
So I am creating a React native app and I want to call a JavaScript function from the native part of the App.
I know that I can use Native Modules to create a bridge between Native and React Native and I also know that from a Native Module I can emit an event that can be received by React Native.
But, any function call inside a Native Module can only occur from inside the React Native itself, since it needs a React native context, so I can only send an event from a Native Module if the React Native itself calls one of the Native module functions that contains the event emit. Can someone clarify how can I do this?
To be more clear, my final goal is to create an Android library using React native that will be used in an already created Native app, inside my Android Library I want to expose some of my JavaScript components/functions so I can have Native App -> Native part of React Native library -> JavaScript part of React Native library.
Thanks in advance!
You can use HeadlessJs for it. React-Native already provides it.Here you can see the example of HeadlessJs follow below link
https://facebook.github.io/react-native/docs/headless-js-android
It will help you.
Have a great day.
Once i tried to create a react native application, but I find it vey hard and not suitable for my needs.
Then i immigrate to react, i kind of begginner in web programming and I remember in react native was a term called 'navigation' and alot of libraries that gives you ability to navigate between screens in alot different ways, stack navigator and etc...
Now i came to react and I started to work with material-ui, but I cant find anything about navigation its seems everything with navigation is related to react native (and I dont sure i can use it in react, at least i didnt find any refrence to that)
Maybe there is another term for navigation in react applications? I saw react-router-dom videos but I dont want to play with the url, its going to be phonegap application using react with webpack...
Any directions for libraries or things i need to read and learn?
Im sorry if this question is very basic, Thanks alot!
You could try the StaticRouter in React Router. https://reacttraining.com/react-router/core/api/StaticRouter
It can load different components based on the path, but won't change the URL. It's usually used for Server-side Rendering.
Although I suspect what you'd really like is to use routerHistory in React Router. Take a look at this example, https://stackoverflow.com/a/42716055/1248811.
react-native targeting mobile app while reactJS targeting Web. They are similar but not the same.
i kind of begginner in web programming and I remember in react native was a term called 'navigation'
Web programming has nothing to do with react native, react native has nothing to do with browser nor web.
I saw react-router-dom videos but I dont want to play with the url,
Sounded like you wanted to visit www.facebook.com, in a browser, without using url? No it's not how it works. Browser will need a URL to render any webpages that you wished.
I have found a p5 JS wrapper for react (react-p5-wrapper) . Is there any way to implement p5 in react native app too ?
I'm afraid there's no way at the moment.
I just checked the GitHub repo of p5.js and it uses DOM elements (like canvas) in its source code (for example https://github.com/processing/p5.js/blob/master/src/image/image.js).
React Native doesn't have a DOM, so that's not possible (except maybe using a WebView or jsdom, but what's the point using RN then?).
I think you'll have to wait till someone makes a fork especially for React Native.
I am new to React JS. I am trying to build a web application which should also work on mobile (Android and IOS) so thought of using react js for web application and created few components. so is it possible to use the React js component in React native.
It's good that you plan in advance. 100% matching between JS and Native won't be possible, but with careful planning, you could get to reuse a good deal.
You may want to take a look at React Native Web project that mirrors Native-specific components for Web (e.g. View, Image, Text, etc).
I suggest building a simple prototype in React JS and then in React Native so you get some understanding of the differences in the two ecosystems. Having a hands on experience will prove more beneficial than any writeup :)
ReactNative is a set of real native Components like View, TextInput TouchableHighlight and more. It is also a platform which let you run javascript code to control these.
There is no WebView like in Cordova, what you get is a native App with native views.
But that means, that you can still have some or your domain logic written in JS which you can use the same way in your Web App.
For example you have a Login Screen for iOS, but all the necessary stuff for your server calls, can go into a separate module e.g. api/auth.js, which is shareable between web, ios, android, iot.. what ever.
I want to reuse some code that retrieves data from an API for two apps. One is an iOS app using React Native. The other one is a website using React.js.
I initially coded the class that retrieves data from an API when I built the iOS app. Thus, I used the fetch method available in React Native.
Unfortunately, there isn't such a method in React.js.
My best option if I want to reuse my code is to abstract the call of the React Native's fetch method by creating a class HTTPRequests with a method fetch which will call the React Native's fetch method or the '$.get' method depending on the lib used by the project: React.js or React Native.
My question is the following: How can I detect the using of React.js or React Native in my project. My first idea is to detect if my JS code is executed through RCTRootView engine or a browser. But I've no idea how to accomplish this.
Any suggestion?
Thanks!
My suggestion would be to move shared logic into separate module (bower, npm, ES6), generalize the way you request data through fetch polyfill, and never ever bother with detecting React/React.native in your project. JS code detection will make your code unnecessary complicated and hard to support when new versions of React/React.native will come up.
I have successful experience of building a cross-platform application with React and React Native using the platform-specific extensions feature of React Native. I've just described how I structured the code in order to achieve that in a blog post Code sharing between React and React Native applications