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…
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:
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
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. …
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.
Before we jump into the code let's first define the task and stuff we will need to achieve our target.
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.
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:
How to display SVG in a react native project for android production release using react-native-svg-uri?
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 …
How to add Apple sign-ins to your React Native mobile app using Cognito and Amplify?
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.
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…