Photo by Alexandru Acea on Unsplash

A highly customizable simple list with filters

In this tutorial, we will focus on how we can create a filterable list page in React using Material UI. The idea is to provide full control over the page design as we will have different components for Filter and Table that can be placed as per our page UI.

In nutshell, we will override some MaterialUI components for Filter and Table. Then we will use a context that will wrap our page and on our page, we can place the filter and table at any place. The filter and table component will use the context to update different attributes…

Photo by Emile Perron on Unsplash

Build fab and speed dial component without using any third party library

I am currently working on an app where I have to create a floating action button, normally referred to as FAB, with some options that must popouts on tapping on the button. As usual, I googled it first to check if I could find something easier to implement without using a heavy library like material UI just for simple stuff. After a few minutes, I stopped searching and started building my own component so I have better control over the UI. Here is how I did that

So to achieve the target, we need to follow below steps:

  1. Create a…
Photo by Cookie the Pom on Unsplash

I just come across a question on StackOverflow about how to make a social sign-in more user-friendly in ReactNative when using Federated Cognito authentication. Because if you use the default setup, it will first ask user confirmation and then open the browser for sign in and then open up the app again. This is not a very good UX. So let's see how we can do that in a more intuitive way.

First, we will be going to use an awesome module react-native-inappbrowser-reborn. So please install it with this command

npm i react-native-inappbrowser-reborn
OR
yarn add react-native-inappbrowser-reborn
You might have…

Photo by Charles Deluvio on Unsplash

How to display truncated text with an ellipsis, and more/less button in React Native Text component

There are several times we want to display truncated text with a button that reveals full text upon clicking. This might sound easy but believe me its implementation is a bit tricky and complex. For example, you may want exactly 2 lines of text with ellipsis with a toggle button.

Since there are many different device sizes or our UI need different view size we can not just depend on a simple hack of substring the text and put a button along with that. …

Photo by Christopher Gower on Unsplash

Creating a MultiSelection list without using third-party library.

Today we will take a look at how we can create a multiple selection list in react native without using any 3rd party library. This can be used to create tags or another component.

Defining Requirements

Before we jump into the code let's first define the task and stuff we will need to achieve our target.

  1. We will need to create an Item Renderer with a Toggle Component ie Switch which the user can toggle.
  2. We will need to set up a FlatList and provide the Item Renderer and list data.
  3. We will need to set up some helper methods to save…

How to create a faded list of messages like Instagram?

A couple of days ago I saw a question on Stackoverflow seeking help on how to create a flat list that has a faded effect on top and bottom like Instagram has on live video feed like this.

source: https://stackoverflow.com/questions/64128836/how-to-fade-out-flatlist-top-bottom-edges-on-dynamic-background-chat

In this image, you will notice a flat list that is transparent and have a fade effect on the top and bottom. In this article, we will try to achieve the same effect in React Native. For this, we will need 4 components:

  1. FlatList
  2. Gradient view which has transparent edges on the top and bottom
  3. Masked View which will use gradient view…

Photo by Safar Safarov on Unsplash

Problem

How to display SVG in a react native project for android production release using react-native-svg-uri?

Solution:

You have worked hard on a project which uses SVG. All worked fine until you build a production release on Android. Suddenly all your SVG disappear and you are a bit lost. Here is how would you fix it:

We need to create a wrapper component which returns SVG object based on the platform because react-native-svg-uri worked fine on iOS but having an issue with the production release of Android. More details here.

Create a new react-native component. Name it Svg.js …

Photo by AltumCode on Unsplash

Problem:

How to add Apple sign-ins to your React Native mobile app using Cognito and Amplify?

Solution:

Adding apple sign in to your React Native app could be tricky. This required many settings on Cognito and Apple. Let’s take a look.

Prerequisite

  1. Apple developer account with the access of certificate portal
  2. AWS account with access to creating UserPool, Cognito Identity, Lambda, and IAM.
  3. Reach-Native 61.5+
  4. XCode

Setup AWS

Let’s start by setting up our Cognito identity and user pool. To do this please follow steps:

Sign in to AWS console and then go to Cognito service. Make sure you are in the correct region before…

Sameer Jain

Solving challenging problems one at a time. Find me on LinkedIn: https://www.linkedin.com/in/saachitech/ discord https://discord.gg/U5qep4sb Founder: saachitech

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