Hello Developers! Let’s see what’s new in React Navigation 6.0

React Navigation 6.0 — KPITENG

Hello Developers! Let’s see what’s new in React Navigation 6.x.

Key Points -

Installation

Minimum requirements

React Navigation 6 requires…


Learn how to share code between React Native and React.js using Yarn Workspace.

KPITENG — Share Code Between React Native & React.js

Hello Developers! Many times we needs to reuse some code between React Native & React.js like state management code (Redux, Mobx, Apollo Client), utility & common functions, global constants, api call & common business logic. Today, we will learn to share code between React Native and React.js using Yarn Workspaces.

If you haven’t checkout Yarn Workspaces I request you to check it first where I have explained SetUp Yarn Workspaces step-by-step.

Please download full source code from our GitHub.

Yarn Workspaces

Yarn Workspaces allow developers to create workspaces that…


See how Yarn Workspaces allow developers to develop mobile & web applications using monorepo approach, helps to split and share code between multiple packages.

KPITENG

Projects grow over time and some pieces of code can be useful elsewhere in other projects. Also we need to share code between projects like Redux, ApolloClient, MobX — State Management Library, Common Utilities, etc same for both React Native, React.js or other technologies.

Please download full source code from our GitHub.

Monorepos

Many of us tried splitting a code into multiple packages knowing how difficult it is to manage across multiple packages at one time. To…


Discover a ways to develop secure react native application.

KPITENG

Key Points -

1. Screenshot Prevention

iOS Integration -

Screenshot Restriction is not possible on Straight Forward Way, But you can do something like, When application InActive — add Blur Layer/ View on window and when Active — remove BlurLayer/View.

Add Following Lines of Code in AppDelegate.m

Android Integration -

In Android it’s quite simple to restrict user to prevent…


KPITENG

Discover a set of React best coding practices, tips and tricks that should be known by all developers.

Key Points -

1. Use State Management Library (Redux, MobX, Apollo)

Many times we are using local variables, array, objects…


KPITENG

See how you will boost your react native app performance, improve start-up time, decrease bundle size & memory usage.

Key Points -

1. Hermes

Hermes is an open-source JavaScript engine optimized for React Native. Hermes integration helps to improve start-up time, decreased memory usage, and smaller app size.

With Hermes your app will start at 2x speed, memory usage will decrease to 30%, android app bundle size decreased 30%, iOS Application performance will boost.

Let’s see how to integrate…


Axios vs Fetch HTTP Request

KPITENG

Hello Developers! All we are using either Axios OR fetch to communicate/exchange data with server. Both works perfect as per your requirement. Today we will go in detail and see how they are differ in terms of features they provide.

1. Request URL

Axios — has url in request object

Fetch — has no url in request object.

2. Package

Axios — third-party package that you need to install manually. 85.3k Star in Github — Well managed & rich features library.

npm i axios

Fetch — is in-build into most of the browser, no more need of installation.

3. CSRF Protection


Discover Top 10 React Hooks Library — use-http, Redux Hooks, useMedia, React Hook Form, Constate, useDebounce, React Router Hooks, useHover, usePortal, useLocalStorage

KPITENG

Hooks make developers’ life easy by helping in writing fewer lines of code, clean code, more readable, maintainable, reusable code. Many popular libraries now offer Hooks, let’s check some of them today.

1. use-http


Step By Step Integration Of React Hooks — useState, useEffect, useRef, useMemo, useCallback

React Hooks — KPITENG

Hello Developers, All of you know about functional components. Today we will go to the next level in functional components and see in detail how React Hooks allow us to implement variables, functions, and managing states in functional components. Top 5 React Hooks — useState, useEffect, useRef, useMemo, useCallback. We will see each in detail and see how we develop a powerful React app by using Hooks.

React Hooks -

Please download full source code from our GitHub.

useState —

useState hooks allow you to create, update…


Storybook | Design Reusable Component | Share Component

KPITENG

Hello Experts, We all use Reusable Components in our applications OR we develop custom components that are frequently used at multiple places and keep that logic separate, so whenever we change on business logic it will be reflected everywhere where it is used. What happens if I say show me the component you developed, you need to import/implement it in one component and run the application, correct? Is there any way I can see all Reusable Components in one place, I can play with it, change various props and validate it? …

KPITENG

Founder & CEO at KPITENG

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store