I am new in react-native and I have many problems in using navigation libraries and their options. I tried to use Wix v1, Wix v2 and react-navigation but in each of them I had a lot of errors and it took me a lot of time.I could overcome some of them but not completely. It made me frustrated. Because I cannot make progress without navigation, please someone save my life and introduce me some new documentation or give me some advices on this. For example I have tried react-navigation and I built a project with react-native version 0.58 and I did like Facebook documentation but I got the error navigation has deprecated!.
React Navigation isn't your only option for routing and navigation in React Native.
The best libraries for navigations which I personally prefer are :
react-native-router-flux: this library is very popular and best in market which is based on React Navigation & provides you with a different API's to interact with it. Documentation
react-native-navigation: uses the underlying native APIs on iOS and Android, this is a popular alternative to React Navigation which you already tried. Documentation
You can also read a detailed article on medium here which compares different navigation libraries and features and other aspects.
Also you can check other questions raised by react-native enthusiasts.
Most popular and stable react native navigation lib is react-navigation. Anyway there are few Alternatives
Native Navigation
react-native-router-flux
react-native-navigation
react-router-native
The decision is up to you
Related
I'm new to the react native platform. I'd like to create an app with bottom, stack, and drawer navigation.
I'm not sure which navigation is appropriate for the same react navigation (v4, v5, or v6).
I'd also like to make some API calls. Is it necessary to use redux for this?
Is it better to use React native element or react native paper for ui design?
Please, someone assist me with this.
This doesn't seems to be an appropriate question to ask here, you can go through their official documentations, some courses maybe to learn react-native and its best practices. As for the questions you have asked, since you are learning react native now,
Go with the latest navigation (v6)
It's always a good practice to use redux for api calls.
For UI, you can go with any library that suites your purpose, it does not have to be one, you can use multiple, based on what you want to achieve.
has anybody being able to use the new Context API introduce in react 16.3 with react-native-navigation?
I'm having trouble trying to set it up as with react-native-navigation there is no main component where i can manage a state and then render the Context.Provider components, just the Navigation.startSingleScreenApp or similar functions.
Tks in advance for any help you can provide
Environment
React Native Navigation version: 1.1.403
React Native version: 0.55.4
Platform(s): iOS
Device info : Simulator
Please update your question with the simplest code example that shows your problem.
Generally, you can wrap your for example outside or inside whatever is your .
Maybe see this guide https://medium.com/#505aaron/a-practical-react-native-problem-solved-with-the-context-api-eecaf2e05202 for a simple enough example that does create a custom Context Provider/Consumer pair that also has its own state.
react-native-navigation with Context API is not possible. there are some workarounds (https://github.com/wix/react-native-navigation/issues/3549#issuecomment-411800487) but it is not the real React Context API behavior. (https://github.com/wix/react-native-navigation/issues/3549#issuecomment-427603125)
I've been thinking of which long term solution navigation library to use for react native. I'm comparing react-navigation and react-native-navigation (both their version 2) as of the moment.
My criteria would be stability and performance. Any suggestion which one to use?
React Native Router Flux https://github.com/aksonov/react-native-router-flux offers great integration with Redux and I have never experienced any stability issues. The major issues I did encounter where though:
Customizing the Navbar was a pain
Handling the Android Back button required me to implement a routingUtility which checked the currentPage and then performed Navigation. It also has a lot more activity with far less issues and pull requests and is more frequently updated.
I'm trying to understand how I can do a signature capture in React Native. My App is created with create-react-native-app and Expo and I'd prefer to not have to eject the app to get this functionality to work.
Would it be possible to wrap something like this in a webview? https://github.com/szimek/signature_pad
I've also looked at this project, https://github.com/RepairShopr/react-native-signature-capture but it requires me to eject the app and use react-native link.
Looking for any advice or suggestions on how to implement this feature while keeping my project as straightforward as possible (ideally, using create-react-native-app, but if this isn't possible could someone please explain to me why?)
The way React Native works is that each component available in React Native maps to a native component in the underlying platform.
ie. a <Image /> is an ImageView in Android and a UIImageView.h in iOS.
The Javascript code itself runs in a Javascript thread on each platform and as you use Components in React Native, there's a translation layer that passes information from JS into the React Native bridge that then results in corresponding native components being created.
By default, React Native has included the following components: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components which means that only those components come out-of-the-box in React Native. If you want other components, then you have 2 options, either create a "composite" component in which your JS component is written into other JS components or, if your feature needs a native component not yet exposed by React Native, write your own "native" component to expose certain native functionality to your React Native code.
The way Expo works is that they have wrapped React Native and a handful of 3rd party components and built it within their application. The reason why you can't use a 3rd party native component they don't support is because when that component is used, the app itself doesn't have translation code to go from JS to a native Android/iOS view.
So, to do what you're asking, you'd need to find either a "native" drawing component that Expo has included in their platform/app. OR you need to find a "composite" drawing component that is built with other default React Native components (or other components Expo supports).
ie. On Android, I might build this with a Canvas view, but from what I can tell React Native doesn't support that object natively, so I would probably write this myself, etc.
It's hard for Expo to support every 3rd party "native" component out there because React Native is open source and it iterates so fast that most community-built components aren't always up to date or they might conflict with one another.
I am using react-native-signature-capture.
Working properly on both Android and iOS.
I know it's been a while, but there is an interesting article here: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
Wait, but how?
Using “expo-pixi”, you can add a component that lets you choose your brush’s color, thickness, and opacity. Then when your user lifts her finger, you get a callback. From there you can take a screenshot of the transparent view or get the raw point data if that’s what you’re looking for.
Navigation Experimental, Navigator, Flux-style Navigation etc. etc. There are so many theories and options out there. I know, this is a question with a very high "it depends" potential. But maybe some of you have already figured out an absolute favourite option to handle navigation for react native apps.
I'm a redux user and use https://github.com/aksonov/react-native-router-flux/ . You can integrate it with redux. React-native-router-flux is also usable without Redux.
The advantage is that the Navigation API doesn't change as much as React-native's does. There is also pretty good community support.
If you start application you can use this starter kit https://github.com/infinitered/ignite. This starter kit contain redux and React-native-router-flux. And more
features (Battle Tested, redux persist, ...)