react

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
react

How to create circular buttons in React Native

This tutorial is to show you how we can create circular buttons in React Native. I will use TouchableOpacity for the button. Also, I will create this button as a separate component that can be used by passing different props values.

Read
react

React Native program to change the value of a text on button click

In this tutorial, I will show you how to change the value of a text dynamically in react native. We will use one button, on click we will change the value of a Text. For this example, I am using hook to manage state.

Read
react

TouchableHighlight in React Native with example

On Android and iOS, if you tap one button, the opacity of it decreases during the time you pressed it down. TouchableHighlight is used to implement similar effects. It decreases the opacity of the wrapped view on pressed.

Read
react

SafeAreaView in React Native and where to use it

If you know iOS development, then you must be aware of the term safe area. In react native, SafeAreaView component is used for iOS version 11 or later devices. It renders nested contents. So, this view is used as the parent of all views.

Read
react

Status bar in React Native explanation with example

Status bar can be styled starting from Android Kitkat. You can change the color of the status bar and change the style in Android.

Read
react

React Native sectionlist explanation with example

SectionList in react-native is similar to FlatList. The only difference is that FlatList is a simple list but SectionList is a list with sections. The list is divided into different sections with a header for each section.

Read
react

Load data from url and show in a flatlist in React Native using hook and async/await

In this tutorial, I will show you how we can fetch data from a URL and load it into a FlatList in react native. We will use async/await to load the data and using react hook, we will populate it in a list. and async/await

Read