react

react

React native program to create one vertical scroll view with horizontal scrollable items

In this react native tutorial, we will learn how to put horizontal scrollable items in a vertical scroll view. Each item of the vertical scroll view is a horizontal scroll view.

Read
react

How to create horizontal scrollbar with views in React native

This tutorial will show you how to create one horizontal scrollbar with views in react native. We will use the ScrollView component of React native to create the horizontal scrollbar. We will also learn different methods available.

Read
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