- React Native is the hot topic these days for building mobile apps.
- Learning ES6 makes it much easier to write React and React Native code.
- The main things you should have learnt after completing the tutorial are Lifecycle of a React Component and what are props and state – – React Native uses Flexbox layout style to render views in a much easier and responsive way.
- Since an important function in mobile app is how to navigate between screens, it is important to know how it’s done in React Native.
- As of this writing, RN recommends to use libraries like ReactNavigation and React Native Navigation to use same code for both Android and iOS.
Here is a small guide for Android/iOS developers on how to learn React Native.
Continue reading “How to learn React Native”
I’ll be taking you through React Navigation. Navigation has to do with the nav bars, tab bars and side menu drawers in your mobile application.
At the end of the tutorial, you should have a pretty…
Continue reading “Understanding Navigation In React Native”
- If you don’t, you could end up with a very big wizard step wrapper component that handles the sanitizing, validation, and transformation of user input from all the steps in one place, and that will be hard to maintain.Since each step is responsible for it’s own data, it should have some type of validation and handle any transformation of user input into an appropriate data structure.
- This also means that each form will have it’s own button that will move the currentStep forward or backwards.The basic wizard component outlined earlier will have to loose those Prev/Next buttons since the _next and _prev functions will be passed in as props.And a step will look like this:Note how this example is also missing a Prev button and _prev.
- If this example did have that button, the _prev function would mirror the _next function.Linkable Steps with location.hashIn some cases, it’s good to have the wizard steps be linkable (i.e. It’s pretty easy to handle this hash based navigation using vanilla JS:State Machines are CoolTying this all together is the state machine that manages the current step.If you’re working on a wizard that only has one possible set of screens — meaning that the choices the user makes don’t affect what screens are shown — the state machine outlined in the examples should work fine.The path that a user follows to complete a wizard is made up of a series of wizard steps.
- When the required wizard steps change based on information the user has input (for example, signing up for a business account vs. a personal account), that’s when it’s necessary to use a more robust state machine to manage the user’s path.
- Having a place where the available steps are checked also makes it easier to do validations on past data and re-surface required or skipped steps.A contrived example of a complicated wizard that can be easily handled with a robust state machineState machines are a huge topic for another post.
The wizard is a tried and true design interaction pattern. It’s great for on-boarding new users or inputting information tied to some type of decision tree. Under the hood, a wizard nothing more than…
Continue reading “Writing a Wizard in React – Lee Gillentine – Medium”