Home » React-native » How to put number at top right corner in react native

How to put number at top right corner in react native

Beginner 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

react-native init ProjectName

2. Install the following dependencies

Use this dependency for icon

npm install react-native-elements

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

 <View style={{flex:1, alignItems: 'center',  justifyContent:'center'}}>
              <Icon
                  name="shoppingcart"
                  type="antdesign"
                  color={"#FFFFFF"}
                  size={22}
                  containerStyle={{marginHorizontal: 15, position: 'relative'}}
                />
                {cartCount > 0 ? (
                  <View
                    style={{     
                      position: 'absolute',
                      backgroundColor: 'red',
                      width: 16,
                      height: 16,
                      borderRadius: 15 / 2,
                      right: 10,
                      top: +10,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                    <Text
                      style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: "#FFFFFF",
                        fontSize: 8,
                      }}>
                      {cartCount}
                    </Text>
                  </View>
                ) : null}
                <View>
              
                </View>
              </View>

4. Add drawable in navigationOptions

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

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    var cartCount = 10;
       return {
         title:  'Home',
         headerStyle: {
             backgroundColor: '#0570E9',
             padding:0
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         },
         headerRight: (
          <View style={{alignItems: 'center',  justifyContent:'center'}}>
            <TouchableOpacity
              onPress={params ? params.onCartClick : this.onCartClick}>
              <View style={{flex:1, alignItems: 'center',  justifyContent:'center'}}>
              <Icon
                  name="shoppingcart"
                  type="antdesign"
                  color={"#FFFFFF"}
                  size={22}
                  containerStyle={{marginHorizontal: 15, position: 'relative',}}
                />
                {cartCount > 0 ? (
                  <View
                    style={{
                     
                      position: 'absolute',
                      backgroundColor: 'red',
                      width: 16,
                      height: 16,
                      borderRadius: 15 / 2,
                      right: 10,
                      top: +10,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                    <Text
                      style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: "#FFFFFF",
                        fontSize: 8,
                      }}>
                      {cartCount}
                    </Text>
                  </View>
                ) : null}
                <View>
              
                </View>
              </View>
            </TouchableOpacity>
          </View>
        ),
       }
    };

5. Full source code for Home.js

Full source code to display cart count on the cart icon

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Icon } from 'react-native-elements';

export default class Home extends Component {

  constructor() {
    super();
    this.state = {
      imageSize:  0.75
    }
  }

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    var cartCount = params ? params.cartCount : 0;
       return {
         title:  'Home',
         headerStyle: {
             backgroundColor: '#0570E9',
             padding:0
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         },
         headerRight: (
          <View style={{alignItems: 'center',  justifyContent:'center'}}>
            <TouchableOpacity
              onPress={params ? params.onCartClick : this.onCartClick}>
              <View style={{flex:1, alignItems: 'center',  justifyContent:'center'}}>
              <Icon
                  name="shoppingcart"
                  type="antdesign"
                  color={"#FFFFFF"}
                  size={22}
                  containerStyle={{marginHorizontal: 15, position: 'relative',}}
                />
                {cartCount > 0 ? (
                  <View
                    style={{
                     
                      position: 'absolute',
                      backgroundColor: 'red',
                      width: 16,
                      height: 16,
                      borderRadius: 15 / 2,
                      right: 10,
                      top: +10,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                    <Text
                      style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: "#FFFFFF",
                        fontSize: 8,
                      }}>
                      {cartCount}
                    </Text>
                  </View>
                ) : null}
                <View>
              
                </View>
              </View>
            </TouchableOpacity>
          </View>
        ),
       }
    };


  componentDidMount() {
   // do API call here
    var count = 10;
    this.props.navigation.setParams({cartCount: count });
  }

  render() {
    return (
      <View style={styles.container}>
       <Image
          source={{uri: 'https://www.techup.co.in/wp-content/uploads/2019/02/techup_logo_final_wb.jpg',}}
          //borderRadius props of style will help to make the Round Shape Image
          style={[styles.imageCircleStyle,{ transform: [{ scale: this.state.imageSize }]}]}
        />
       
      </View>
    );
  }
}

const styles = StyleSheet.create({ 
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0250a3',
    padding: 10
  },
  imageCircleStyle:{
    width: 200,
    height: 200,
    borderRadius: 200 / 2,
    borderWidth: 1,
    borderColor: '#0250a3',   
    marginBottom: 30
  },
  buttonStyle:{
    marginHorizontal: 15,
    borderRadius:5,
    borderWidth:1,
    borderColor: '#0250a3',
   
  }
});

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 🙂

Related Posts

Leave a Reply

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