Accessibility Hints for your React Native App Pt 2— Implementation

How do I use that?!?!?

A look at the basic set up of the framework (a Firebase Remote Config / React-Redux) setup is explained below.. Also, only the Animated-Hint component is covered here as an extension to the Lottie library mentioned in the Ideation article.

There could be any number of Hint Types. I created the ‘animated’ ones with the help of the Lottie library.

The config in Firebase (Remote Config)…

This should be expanded with other attributes like “type” and “position”

The remote config values are fetched on app load and stored in redux. Below is how the redux structure related to accessibilityHints system looks like…

active_hints is fetched from Remote Config.

A separate key which contains info about where the hint is shown or not.

The redux code for the accessibility Hint reducers…

AccessibilityRedux.js

The AccessibilityHint container code..

AccessibilityHint.js

AccessibilityHintStyles.js

One of the 2 types, which is the AnimationHint component is covered here. Coach marks will be a separate article.

AnimatiedHint.js

AnimationHelpers.js

The dispatch of actions is going to be explained as it is straight forward and will vary as per your use case. All you need to do is subscribe to the remote config key indicating the “status” of your hint. Here the key is articleSwiper. The mapStateToProps of the component corresponding to the feature or the screen where you want the hint to appear will look like…

articleSwiper: state.remoteConfig.config.active_hints.articleSwiper

Include the AccessibilityHint component with necessary props

You could either dispatch an action after displaying the hint once, or maintain a counter for it in redux before dispatching an action with payload…

{ 
  type: MARK_AS_SHOWN,
  payload: {
    key: HINT_KEY  // (articleSwiper in this case)
  }
}

The articleSwiper AnimatedHint

Some performance related observations made using Xcode’s profilers

• CPU Usage goes to a maximum of 57% when animation plays.
• However without animation we observed a spike up to 49% in the app.
• Also this 57% spike is only for a short period of 2 seconds.. The animation stays for 7 seconds, after which CPU usage is back to normal ~2%.

Please do consider these observations and make sure you don’t build your App loaded with Lottie animations flying here and there!

~ Thanks for reading! Inputs/suggestions are welcomed! :) ~