React Native Animated Answer Bar

In this video we’ll learn how to get the application running on our machine.

CODE: https://github.com/HandlebarLabs/react-native-animated-answer-bar

In this video we’ll build the initial QuestionRow component.

CODE: https://github.com/HandlebarLabs/react-native-animated-answer-bar/compare/master...question-row-component

In this video we’ll set the foundation for everything we’ll build on top of - the bar background. This sets the max width of a bar (100% of answers) and sets the base styles we’ll build on top of.

CODE: https://github.com/HandlebarLabs/react-native-animated-answer-bar/compare/question-row-component...style-and-layout

In this video we’ll build the different answer overlay bars for our component representing the different states (correct answer, user answer, incorrect answer & wasn’t user answer).

CODE: https://github.com/HandlebarLabs/react-native-animated-answer-bar/compare/style-and-layout...overlay-bar

In this video we’ll learn how to measure the width of the full bar (so it works on variable screen sizes) so that, based on the percentage of answers, we can create answer bars that fill up the correct percentage of the full bar.

CODE: https://github.com/HandlebarLabs/react-native-animated-answer-bar/compare/overlay-bar...measure-element?expand=1

In this video we’ll use Animated.timing to animate the answer bar to the correct width.

CODE: https://github.com/HandlebarLabs/react-native-animated-answer-bar/compare/measure-element...animated

In this video we’ll use useNativeDriver to allow animations to happen off of the JavaScript thread - reducing the likelihood of jittering animations.

CODE: https://github.com/HandlebarLabs/react-native-animated-answer-bar/compare/animated...native-driver