react

react

How to create blur view in React Native

This tutorial will show you how to create one blur view in react native. React native community provides one library that can be used to create blurred view. We will learn how to create blur view in both Android and iOS.

Read
react

How to use one WebView in react native

In this react native tutorial, we will learn how to create one webview using react native WebView component. We will see how the webview looks like in Android and iOS devices.

Read
react

How to add buttons on header in React navigation

The header is not only for showing titles. It may also include buttons. Normally, user action related buttons are added to the right of the title, and the back button is added to the left. The button on the left side, i.e. the back button is added automatically if we push one new screen to the navigator. It pushes the screen and adds the button. The default back button is different. It is platform-specific. On iOS, it adds one label that says the previous screen title or says "Back". But we can customize and override the back press of this button as well.

Read
react

React navigation tutorial 8: How to add one image as the header title

In this post, I will show you how to add one image as the header title using react native navigation library. Mostly we use a text as the title for a screen. But, sometimes we might need to use one image or logo to display instead of a title. Thankfully, the react-navigation library provides an easy way to do that and without doing any major change, we can achieve it.

Read
react

React navigation tutorial 7: How to add header and header text color, font etc.

I have already explained to you how we can add one header and how to navigate between different screens in react native. Navigation Header is an important part in mobile application, also its style. It should follow a design pattern on all screens of your app to make it attractive. font etc.'

Read
react

React Navigation part 6: How to set and change the header title

By default, the name of a Stack screen is shown as the header title. For example, if we have one screen as below in the navigation container :.

Read
react

React Navigation part 5: How to update params of a screen

We may need to update the params of a screen. React navigation provides one method called setParams to do that. In this post, I will quickly show you how it works with an example.

Read
react

React Navigation part 4: React native program to pass data between screens

React native navigation library provides an easy way to pass data from one screen to another. In this post, I will show you how to pass data from one screen to another in react native using the navigation library.

Read
react

React Navigation part 3: program to move between screens using react navigation

In our previous tutorials, we have learned how to do the setup for react-navigation and how to arrange different screens in react-navigation. In this tutorial, I will show you how to move between two screens i.e. move forward and backward between two screens. navigation'

Read
react

React navigation part 2: Manage multiple screens

In our last tutorial, I have shown you how to install react-navigation in an existing react native project. In this post, I will show you how to arrange multiple screens in react-navigation.

Read