How to put number at top right corner in react native

Hello everyone, In this article, we are going to learn about How to put number at top right corner in react native. Sometimes Developers need to create complex UI designs, like place one view above another view basically, we are going to display cart count on the toolbar. there are some dependencies available to display numbers at top right corner of the cart but sometimes developers want to customize UI with respect to the application. In this project, we will create a custom UI to display numbers at the top right corner of the cart so let’s start with an example

I have written another article for How to place one view on another, check this post for the same

1. Create a new project

2. Install the following dependencies

Use this dependency for icon

3. Display number at the right top corner

We have added the above code in Our home screen navigationOptions. As you can see I have added two views one above the other using position: ‘absolute’.  first view is for the Cart icon & another view for the number

4. Add drawable in navigationOptions

Let’s understand the code for Toolbar navigationOptions and add cart drawable at the right corner of the toolbar

5. Full source code for Home.js

Full source code to display cart count on the cart icon

This is how put number at top right of cart icon in react native. you can pass cart count dynamically from componentDidMount() using this.props.navigation.setParams({cartCount: 10});

If you want to open the cart screen using onPress on cart icon checkout this post

Output:

Here’s the output for How to put number at top right corner in react native

How to put number at top right corner of cart icon

 

Thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *