A tiny expression compiler for React Native Animated values

  • Its expressive API lets developers compose animated effects based on time, spring physics and even real-time user interaction with distinct ease.I’ve recently released animated.macro, a small JavaScript package that improves the ergonomics of working with animated values in React Native apps — and, more importantly, has been fun to build.
  • The results of these operations can then be used anywhere the basic values can.For instance, here’s how you add two animated values together:const result = Animated.add(x, y);And here’s a slightly more involved calculation:const result = Animated.modulo( Animated.add(phase, Math.PI * 2 + angle), Math.PI * 2);What can be improvedOn closer inspection, the…
  • This can be an inconvenience when refactoring animation code.In the second example, the types of phase and angle (and of Math.PI) similarly dictate the shape of the surrounding code — e.g. Animated values can’t be added with + and plain numbers can’t be added with Animated.add().
  • Can we do better?Yes.Introducing animated.macro 🕺🏽🔢animated.macro lets you write JS-like arithmetic expressions that operate on animated values and plain numbers alike.
  • These expressions take the form of tagged template literals that evaluate to animated values.The second example above can now be written as:import animated from “animated.macro”;const result = animated` (${phase} + ${Math.PI} * 2 + ${angle}) % (${Math.PI} * 2)`;Addition, subtraction, multiplication, division and modulo are all supported, with the same…

The Animated library, which allows animations to be set up in JS and executed on the native thread, is a mainstay of the React Native programming model. Its expressive API lets developers compose…
Continue reading “A tiny expression compiler for React Native Animated values”

Testing with Mocha – Kevin Wang – Medium

Testing with Mocha  #tdd #react #mocha #javascript #reactjs

  • js file and running “npm test” in the console.var assert = function() { describe(‘#indexOf()’, function() { it(‘should return -1 when the value is not present’, function() { assert.equal(-1, [1,2,3].
  • indexOf(4)); }); });});The test should pass and you should see the below.From the example above though, the function that the test is testing for is written in the same file.
  • toFixed(2) }, sleepApneaIncrease: function(amount){ return (amount * 1.06).
  • toFixed(2) }, heartDiseaseIncrease: function(amount){ return (amount * 1.17).
  • toFixed(2) }, checkCondition: function(amount, condition){ switch (condition) { case “Allergies”: return case “Sleep Apnea”: return case “Heart Disease”: return default: return 0; } }}I store them all in an object so thatI am able to export out and require them when I need to.

My first experience with Mocha is at Flatiron. When we were doing Javascript labs/work we used Mocha to test out the code that we wrote, it made sure that the results are as we expected. This was my…
Continue reading “Testing with Mocha – Kevin Wang – Medium”