August 8, 2019 // By Jenna Stone
I was so thrilled to attend the Chain React 2019 conference hosted by Infinite Red. This React Native conference was full of sessions discussing new features and ideas to improve our current apps and lots of socializing. Facebook, the creators of React Native, shared how their company is investing in continual improvements of the code base.
Companies today are requiring their apps be accessible. It’s very important the apps we build are reachable to users with vision/hearing/cognitive or motor impairments. Ankita Kulkarni provided a great talk on accessibility at the conference. She explained how important it is to keep the curb cut effect in mind. The curb cut allows everyone on the sidewalk to easily reach the road without issue. The curb cut is for wheelchairs, strollers, skateboards and bikes. Although I see curb cut every day on my morning run I admit I’ve never really thought about the problem it is solving.
Similar to the curb cut effect, we need to ensure our apps allow everyone to use the app without obstacles. Being mindful of colors and contrast, keeping animations minimal are two important ways to ensure your app is accessible. Some users will turn on screen readers to work with their apps. In this case it’s imperative to add react native accessible labels and hints providing the screen reader with an explanation of each component on the screen.
Some are very enthusiastic about adding animations to their apps however we need to ensure the animations reduce cognitive load and friction. Cognitive load is the amount of mental resources it takes to process information. Cognitive friction occurs when a user is confronted with an interface that appears to be intuitive but delivers unexpected results. Vlad Novick explained animations can help your app to stand out and just be cool. Providing users with visual hints with small animations can help their cognitive load. Lottie Files is a great library of free animations and effects available to use in your next React Native app.
There was also a fantastic React Native Testing Workshop by Josh Justice. He reviewed automating Unit, Component and End-to-End testing. It’s important to keep tests in mind while developing your app as it will cause you to develop your code differently. Some developers take the test driven development approach and write the tests prior to writing the code for their apps.
Component tests are created for individual methods, functions and state values. Josh reviewed the React Native Testing Library by Callstack. This utility is lightweight and very easy to use. Component tests check if the UI has been rendered not the appearance of the UI. We call this “Testing the Contract”. The contract includes inputs and outputs. Inputs for this type of test could be props or user interaction events. Outputs are rendered UI or calls to function props. An example test can provide data to be displayed within a component, render a component and ensure it is visible by using queryByText or queryByTestId.
End-to-end tests a flow of app functionality. For example, a specific end-to-end test would navigate to a phone list, click add, type in a valid phone number, click save and verify the new phone number displays in the phone list. Detox is a gray box testing and automation library for mobile apps. It works great for multiple platforms and can run on simulators or on physical devices. Testing with detox is easy as you can identify an element by text or id and use functions like .tap and .typeText to simulate a user experience.
Overall it was a great experience. I met lots of amazing people and the Armory in Portland was an remarkable venue. The React Native mobile app community is very knowledgeable and friendly. Developers from all over the world have contributed to over 240,000 react native repos in GitHub providing functionality beyond the core for all to use. I’m excited to be part of this incredible mobile app community.
If you'd like to learn about how to use React Native to get your mobile apps to market faster, reach out to our experts.