Easiest way to implement reactions in iOS app

Recently, we were working on a social app of one of our clients. Their requirement was to add reactions feature in the app and especially Facebook Reactions. To integrate Facebook Reactions platform in the app was a great experience for our team. In this guide, we will give you a detailed information about integrating the Facebook Reactions platform in your iOS iPhone app.

Reactions are an extension of the Like Button to give people more ways to share their reaction to a post in a quick and easy way. The collection of Reactions includes Like, Love, Haha, Wow, Sad and Angry.

To ensure accurate and consistent use, never alter, rotate, embellish or attempt to recreate the Reactions. Never alter the proportions and shape of the Reactions (and surrounding UI) for any reason.

What are reactions?

Reactions are not emojis or individual icons, and they cannot be used in this way. It's important to show Reactions in the way they are intended to be used on Facebook - as a quick and easy way to express how you feel. Reactions are line-up of emoji that allow you to react to posts with six different animated emotions:Love, Haha, Wow, Sad, Angry, and, the classic Like.

When a Like simply won’t do

After years of requests for a “dislike” option, Its Reactions which give users a more nuanced way of expressing their sentiments to posts. Because let’s face it, some life events aren’t befitting of a Like (deaths, break-ups, disappointing election outcomes, etc.).

How do Reactions work?

Reactions work in the same way as the original Like button and appear on any post.To choose the reaction you want, simply hold down the Like button (or hover with your mouse if viewing from a desktop) and a menu will appear showing the six reactions.Once you add your reaction, it’s lumped together with the Likes and other reactions under the post. You can only add one reaction per post (e.g. you can’t Love and Haha a post at the same time).

Reactions design

An enormous, but perhaps less obvious part of Reactions’ success is owed to their design. Reaction’s design has two key principles:

1. Reactions should be universally understood. So more people can connect and communicate together.
2. Reactions should be widely used and expressive. To allow people to express themselves in ways they would in real life.

What about dislikes?

Wondering why human beings doesn't make life easier for themselves by just giving into the many requests for a simple thumbs-down button?

“Binary ‘like’ and ‘dislike’ doesn’t properly reflect how we react to the vast array of things we encounter in our real lives

How do Reactions impact the feed?

“Over the past year we’ve found that if people leave a Reaction on a post, it is an even stronger signal that they’d want to see that type of post than if they left a Like on the post. So we are updating News Feed to weigh reactions a little more than Likes when taking into account how relevant the story is to each person.”

 

Steps to Implement Reactions in App:

Step1: Pod installation in App including the pod in pod file

pod 'Reactions'

Write the above code in pod file and run the command pod install

Step2 : Import the the Reaction module and Iimplement delegate method in your class where you want to use

"import Reactions"
"ReactionFeedbackDelegate"

Step3: Initialise the class:

"let myReaction = Reaction(id: "like", title: "Like", color: .black, icon: UIImage(named: "yourImageName")!)

Step4 : Create an outlet of facebookReaction button , set the initial value and a Closure to notify the value of reaction has ben changed:

var reactionSelected: ((_ reactionName:String, _ cell: UITableViewCell) -> Void)?
@IBOutlet weak var facebookReactionButton: ReactionButton! {
        didSet {
            let selector       = ReactionSelector()
            selector.reactions = Reaction.facebook.all
            facebookReactionButton.reactionSelector = selector
            // React to reaction change
            selector.addTarget(self, action:  #selector(reactionDidChanged), for: .valueChanged)
            facebookReactionButton.config    = ReactionButtonConfig() {
                $0.iconMarging      = 4
                $0.spacing          = 4
                $0.font             = UIFont(name: "HelveticaNeue", size: 13)
                $0.neutralTintColor = .black
                $0.alignment        = .centerLeft
            }
            facebookReactionButton.reactionSelector?.feedbackDelegate = self
        }
    }
public func reactionFeedbackDidChanged(_ feedback: ReactionFeedback?) {

let text = feedback?.localizedString

print("Text Is --- ",text ?? "")

}

Step5 : Set default value on reaction button, Make default button active and Method for text change:
"let myReaction = Reaction(id: "like", title: "Like", color: .black, icon: UIImage(named: "yourImageName")!)
        facebookReactionButton.reaction = myReaction
        facebookReactionButton.config.neutralTintColor = .black
        facebookReactionButton.isSelected = false"
"self.facebookReactionButton.isUserInteractionEnabled = enable"
func reactionDidChanged(_ sender: ReactionSelector) {

let reactionID = sender.selectedReaction?.id

print("Selected Reaction -- ",sender.selectedReaction?.id ?? "Default")

reactionSelected?(reactionID ?? "like",self)

}

Step6 : To update the reaction on reaction button use the method:
func setReactionsFor(_ feed:ActivityFeeds){
        facebookReactionButton.isSelected = true
        switch feed.reactionName {
        case "haha":
            facebookReactionButton.reaction = Reaction.facebook.haha
        case "love":
            facebookReactionButton.reaction = Reaction.facebook.love
        case "wow":
            facebookReactionButton.reaction = Reaction.facebook.wow
        case "sad":
            facebookReactionButton.reaction = Reaction.facebook.sad
        case "angry":
            facebookReactionButton.reaction = Reaction.facebook.angry
        default:
            /*Like*/
            self.updateLikeStatusForFeed(feed)
        }
    }
Conclusion
If you want to implement Reactions in iOS then you will find these 5 steps easier. Implementation of Reactions has very easy steps as described above. You can edit the reaction method and reactions views in your own way to make it more attractive as per your requirements. We have implemented theReactions in the below-listed apps. You can check these apps from the play store.
[av_one_full first av_uid='av-ts5sbi']

MeggaMigo
When you use meggamigo, there’s just so much to do! This social networking app can do everything you need to stay connected such as:

 
Get updated through your news feed and see what your friends and family are up to
 
Like, share, react, and comment on your friends’ and families’ posts
 
Post a picture and video, Share the latest news, Share your life

[/av_one_full]
References

 
Reactions: To show Reactions library for the iOS iPhone App
 
CompleteReactions: To add Reactions library for the iOS iPhone App

Further reading

 
Life is cool with stickers! Lets add them in your app
 
A complete guide to building a native e-commerce mobile app
 
Tips to build magento2 mobile app using ionic framework

 
  
Posted from my blog with  : https://www.ipragmatech.com/easiest-way-to-implement-reactions-in-ios-app/