React Native Slider is a component to select a single value from a range of values. We have mostly seen slider while increasing or decreasing the volume or brightness of our phone. Here is the example of the slider which will be helpful for you to integrate slider in your app.

Source Code:

  1. Github Account
  2. npm package
Image for post
Image for post
react-native-slider-text

Installation

You need to install the following packages to integrate this component into your react native app.

Create a new React Native Project

npm install -g react-native-clireact-native init ProjectNamecd ProjectName

Once you have created the app. Add the following dependency to create your first custom slider text…


Here in this article, I am going to push some ready to pick components that are used quite often.

Image for post
Image for post
Photo by frank mckenna on Unsplash

Installation

Before we begin installing the basic libraries which we are going to require to create custom components.

yarn add  react-native-responsive-screen react-native-vector-icons

Installing the react-native vector icons these days is little complex. Let me know if you face any problem I will help you out. I guess we are ready now. Let’s add some components to our app now:

Text Button Component:

Create a custom button component with TouchableOpacity and Text component.

import React from 'react';
import {Text, TouchableOpacity, StyleSheet} from 'react-native';
import {colorCode} from '../design/colorCode';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from…


If you’re already familiar with React Native then you’ll be able to get moving with React Navigation quickly! If not, you may want to read sections 1 to 4 (inclusive) of React Native Express first, then come back here when you’re done.

What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation.

Image for post
Image for post
Photo by Pathum Danthanarayana on Unsplash

Installation

You just need to add some of the basic navigation libraries and you are set for creating basic stack navigation in react native. …


Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience.

Image for post
Image for post
Photo by Safar Safarov on Unsplash

Installation

In order to install the redux in react native. We will install the following packages.

yarn add react-redux redux redux-persist redux-thunk @react-native-community/async-storage

Once you have installed the packages. Create a folder in your app component and name it as a store. Add the following folders and file in the storage component.

  1. Actions
  2. Reducers
  3. index.js
Image for post
Image for post

Actions Folder

Add the following code in types.js

export const SAVE_TOKEN = 'SAVE_TOKEN';

Add the following code in the index.js

import { SAVE_TOKEN } from…

Learn the basics of Axios

Image for post
Image for post
Photo by Verne Ho on Unsplash

Introduction

Axios is a promise-based HTTP client that works in the browser and in a node.js environment. It provides a single API for dealing with XMLHttpRequests and node’s HTTP interface. Besides that, it wraps the requests using a polyfill for ES6 new promise syntax. We can also intercept and cancel requests, and there’s built-in client-side protection against cross-site request forgery.

Using it inside a React Native project is simple! In this piece, we’ll use Axios to access the common HTTP or HTTPS API within a React Native application. We start by adding Axios to our project.

Installation Process

Just like any other library, depending on the mode of package manager you are using you can choose any one of these commands to install…


Image for post
Image for post

React Native Firebase Integration:

React Native Firebase is the best way to send messages and notifications to Users across platforms — Android, iOS, and the web — for free. Messages can be sent to single devices, groups of devices, or specific topics or User segments. Firebase Cloud Messaging (FCM) scales to even the largest apps, delivering hundreds of billions of messages per day.

Image for post
Image for post
React native firebase Plugin

Use a simple command to integrate the Firebase to your app.

yarn add react-native-firebase

After installing the firebase, go to Google Console.

Image for post
Image for post

Create a fresh project with same name as your project by clicking on the Add project button. Once you have completed the whole setup. …


Image for post
Image for post
Photo by Glenn Carstens-Peters on Unsplash

Recently React introduced Hooks, and I was not at all in favor of functional components. I was so used to the class component that this change was not one I was looking forward too. Also, the latest version update was also a significant change. So I tried my hands with both at the same time.

Here is what I came up with. This is basically a trial of making a regular to-do app using React Hooks. So if you are a pro and are looking for something different, this blog is not for you. Let’s begin.

Definitions

1. Hooks: Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. React provides a few built-in Hooks, like useState and useEffect.


How to integrate Fitbit API in your React Native app

Image for post
Image for post
Photo by FitNish Media on Unsplash

Introduction

Have you been thinking of making your own personal fitness tracker? Or maybe you’ve wanted to fetch your current location, manage your sleep, or just work out and store data in the database for logs?

Fitbit has got all of it covered.

Fitbit is the latest trend in the tech market, and its popularity is at peak these days. Recently, I was able to grab one, and it motivated me to integrate it into a React Native app I was working on.

Here’s how to integrate Fitbit API in a React Native application, for both iOS and Android, and get the response in our app screen to track the data. Follow these guidelines step by step, and at the end of this piece you will have a JSON full of responses from the Fitbit API. …


Learn React Native with ease

Image for post
Image for post
Photo from Pexels

It can be hard to understand why exactly clients pay so much for design work. After all, as long as you have a functional app, it doesn’t matter that much what it looks like, right?

Unfortunately, this simply isn’t the case. Styling is one of the most important aspects of your online presence. This doesn’t necessarily mean you need to pay an exorbitant amount of money for top-tier designers, but rather that you need to find a style that works for your business.

When it comes to React Native, styling becomes a little trickier. This is because the dynamics of styling for React and React Native are totally opposite. It becomes more brutal if you are coming from a back end domain. In this article, we are going to cover the basics of app styling and design in a step-by-step manner. …


Manipulating items in FlatList

Image for post
Image for post
Photo by Max Nelson on Unsplash

You’ve probably heard about a Flatlist component if you are working in React native and handling lists of various client data and details either from the API or form fields. Basically, Flatlist is a core component designed for efficient display of vertically scrolling lists of changing data. It is a component which came into existence in React native after the 0.43 version. It replaced the ListView component and enhanced the ability of developers to deal with lists more easily.

Image for post
Image for post

What is Flatlist? And how can we use it for displaying dynamic or static lists?

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