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
|
1 |
react-native init ProjectName |
2. Install the following dependencies
Use this dependency for icon
|
1 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
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
Thank you 🙂