react-native

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.

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
react

React navigation Part 1: How to add react navigation 5.0 in React Native project

Navigation means managing the transition between multiple screens in mobile apps. For handling navigation in react native, one library is used called react-navigation. This is a feature-rich library with a lot of functionalities. In this post, we will show you how to add react-navigation to an existing react-native or expo project. project'

Read
react

How to transform an object in React Native (skew, scale, transform, rotate)

React native provides style properties to do 2D or 3D transformation of an object like skew, rotate, scale etc. But note that it will not change the layout size defined for that object. If you have any other objects nearby, it will overlap. To prevent this, you need to add margin or padding to the object.

Read