Posts

Showing posts with the label react

Counter function for adding item in cart and select the item in the list

 Hii Friends , In this Blog  I am going to explore how can we make custom counter. the counter is very important in a Application and if you are going to develop a e-commerce application or and application in which you have to show the count of item you must have to use counter to count the item , I recently use counter for my application that is  similar  to Zomato application , in this application user can add the food in the cart so i need to counter to show how much item user has selected, this is very simple Program suppose you have a list of item which you want to select, from that list you pick some item in some quantity first you have to select the item which user tapped then you send the item in the parameter of function and implement the function design your view according to your need use two Touchableopacity for Plus and minus icon and one text to show the count of item, here is the simple function: - // function to select the item and perform action acco...

React-native pop up ,React-native Pop up hide on the touch of outside the pop up,

Image
Hide the Modal on the touch of outside the view Working with react-native there are many cases when you want and need to show the pop up,like when verification is done of password, Otp verification or you want to make custom Drop dwon and many other cases, and all these case you want on touch of out side the pop-up, pop-up should be dismiss, you can do this with the help of Modal in react-native, you can mangae the touch of out side the view and in side the view both , we can use the touchablewithoutfeedback but with the help of touchablewithoutfeedback you can't stop the touch of inside, if you use touchablewithoutfeedback and your user touch inside the view your view will be disapper, In this Post we learn how to manage the touch out side and inside the view:-   first of all import Modal from the react-native  import{Modal,View,TouchableOpacityWithOutFeedBack,Text}  After Importing the Modal set the state -  *if Your are using the Class component:- constructor(prop...