React Context

By | RedBit, Technology | No Comments

What is React Context?

React Context, introduced in React 16.3 release, is a stabilization of the Context API which is until now considered an experimental feature.

As mentioned in official ReactJS Docs

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

It is designed to share data that can be considered global for a React component tree. For examples, authenticated user, theme, preferred language etc.

Why use React Context?

  • Let’s answer this question;

    How do you pass the data from parent component to a child component nested in React Component Tree?

  • There are multiple answers to this question, it can be Redux or some third party state management libraries like MobX. But this will add complexity in an application and it’s not a viable decision to use them in every situation.
  • In typical React application, we use props to pass data from parent to child(in a top-down manner) in React component tree.
  • Passing props from parent to child is known as props drilling which is super cumbersome when we have a lot of components, among them some components do not require that props be passed down. This is shown in the following example;
    const App = () => <SuperParent />
    class SuperParent extends React.Component {
      state = {
        lastName: "lastName"
      render() {
        return <Parent lastName={this.state.lastName} />
    const Parent = ({props}) =>  {
      return <Kid lastName={props.lastName} />    
    const Kid = ({props}) => {
          return <p>{props.lastName}</p>
  • React’s Context API is coming to solve this props drilling problem. Context provides a way to store the data like a global state and allows to access it in a required component without passing it down via props.

How React Context works?

There are three essential things in new Context API as following;


  • This will create a new Context object and will return an object with a Provider and Consumer
  • Its syntax is as follows;
    const MyContext = React.createContext(defaultValue);
  • The defaultValue argument is only used when a consumer component does not have a matching provider above it in the tree.
  • It does not make the consumer component to use defaultValue if we pass the undefined as a value in Provider component.


  • Known as the Provider component, it is used higher in React component tree where we have our state.
  • It wraps components in the tree that will need access to context value.
  • It allows the consuming components to subscribe to the context Changes and will re-render whenever the Provider’s value prop changes.
  • It’s syntax is;
    <MyContext.Provider value={_value} />


  • This component is used anywhere below the provider in the React component tree. Multiple components can subscribe to one Provider component.
  • It uses the functions as child pattern and expects a function as its children prop which will receive the current context value and return a React node.
  • It’s syntax is;
      {value => return value * 10}
  • The value argument will be the same as the value prop of the closest Provider for this context above the tree. If no provider is available for this context above in the component tree then the value argument will be the same value as defaultValue passed while createContext

Usage of React Context

In the following code. we’ll refactor the above code using Context API;

So, first we’ll create a context;

const MyContext = React.createContext({})
export const MyContext_Provider = MyContext.Provider;
export const MyContext_Consumer = MyContext.Consumer;

Now, we’ll modify the SuperParent component to add the Provider in, as the SuperParent component is our top-level component and we have our state inside it.

import { MyContext_Provider, MyContext_Consumer} from "./MyContext"

export class SuperParent extends React.Component {
  state = {
    lastName: "lastName"

  render() {
    return (
      <MyContext_Provider value={this.state.lastName}>
        <Parent />

In the above case, we’re not passing the state to the Parent component using props. We wrap the Parent component in MyContext_Provider as it needs to access the lastName. Notice that the provider has a value prop. here, we can pass whatever state we like.

const Parent = () => {
  return <Child />;

const Kid = () => {
  return <MyContext_Consumer>{context => <p>{context}</p>}</MyContext_Consumer>;

here, we wrap the component inside MyContext_Consumer which actually needs access to the lastName property.

In the above example, we have wrapped the Parent component within MyContext_Provider as it contains the Child component which needs access to the lastName prop.

Will it replace Redux?

After releasing React 16.3, many people thought that the new Context API will kill redux but this claim is greatly exaggerated. A new Context API is not to replace Redux or other third party state management libraries but is another tool for React Developers which is specifically designed to solve the prop drilling problem.

It depends on the situation whether it requires the Context API or Redux. For example, a Context API is great and designed to passing down data to nested components from top to bottom. So, if you’re using Redux just to pass data from top-to-down then we can replace the Redux with new Context API. On contrast Context API doesn’t provide anything like Redux DevTools, adding centralized logic through Middleware. These things are required in large and complex applications where Context API can’t replace Redux totally.

So, the conclusion is Context doesn’t replace Redux. It’s another way to solve a problem and can be used in the appropriate situation.

Quick recap…

  • The new Context API is a re-work of existing Context API which is in experimental state until now.
  • The new context API is designed to pass data anywhere down to the component tree without having to pass it through all the way.
  • The new Context API solves the problem of prop drilling
  • There are 3 important pieces of the new Context API
    • React.createContext: A function that creates the context
    • Provider(Context.Provider): It is returned by createContext and accepts the value prop which can be whatever we want to pass through a component tree. This is very similar to the React-Redux’s Provider
    • Consumer (Context.Consumer): It is also returned by createContext and used to access the values from the context. It uses the render prop pattern. It works a bit like Redux’s connect function, taps into the data and make available to the component which uses it.
  • The new Context API is not a replacement of Redux but another tool to solve a problem if and when Redux brings complexity to the application.


ReactJS Documentation

Everything you need to know about React’s Context API

React’s New Context API Explained – Video

What is Prop Drilling?

Adding Basic Animations to React

By | General, RedBit, Technology | No Comments

Hello React developers! As a dev who is still trying to learn and grow every day, here is a “to the point” post about how I’ve been getting animations out of my head and onto the page. This will only cover basic stuff for now, and I intend to put out another post as I improve and develop better ways of adding animations to my components.

For starters, if you’re interested in adding small animations without downloading an entire library, CSS animations are an easy way to do that. I would personally recommend keeping animations fairly small, as CSS has some limitations as to what is possible. For example, while you can easily animate an element to appear when rendering, there is no time to animate that element as it unmounts. While you can get around this by animating elements in from off-screen, it is not helpful to those using screen readers, and it keeps unused elements on the dom.

Places it makes sense to use CSS include color changes, hover effects, and small, decorative animations; like on a logo for example.

In this example, I apply the animation through a className on the logo itself, running it so that It will always be moving, regardless of the state

What I’m currently excited about though happens to be the React Transition Group library ( What it does is apply a state to your component, which can be used to apply specific styles on the component lifecycle, as well as add and remove the component when the animation is complete.

In the Transition example, these states applied to the component include entering, entered, exiting, and exited. The duration of these states can be a set together as milliseconds, or individually as an object (eg. {entering:300, exiting:500}).

The most important quality of it to me is it’s “exiting” state. CSS lacks the ability to animate on unmount without help, and this library gives you that power. With the ability to animate the removal of an element, there is no need to keep unused elements on the DOM, which will actually improve the accessibility of your platform by not confusing screen readers with hidden components. Animating the ‘exiting’ state also creates a more polished animation that CSS alone can rarely accomplish. I found it incredibly easy to follow, just set styles based on the rendered elements state, though this method is probably better for smaller animations as well.

Within the same library is the ability to use CSS transitions. Like transitions it allows you to apply styles when the element is at different states (keeping in mind that these state names are not quite the same as Transitions). What’s different about this is you apply your styles with classes rather than through inline styles. This is ideal for applying more complicated movements, as well as having reusable and consistent animations for your platform. These can be applied as an object (as seen below) or a string, which is interpreted as “animation” = “animation-enter”, “animation-enter-active”, “animation-enter-done” etc.

Finally, TransitionGroup can be used to manage all child transition objects that exist in a list. TransitionGroup does not actually apply any styles to your components; it’s more or less just a wrapping div with some helper props.

Animations are valuable, fairly simple to begin adding, and increasingly necessary when building the web. While these where very simple additions to my code, they instantly made my project look more engaging, and frankly, we’re pretty fun to work on. Hope you learned something! I’m looking forward to seeing where motion design and animation on the web goes next.

Why Animate?

By | RedBit, Technology | No Comments

From GIF’s to Flash to CSS v3, animation has come a long way on the web, and I have no doubt it has a long way to go. Though I’m by no means an expert, here is what I have learned about why we want animations on the web, and how we can keep ourselves from annoying users with them.

For some background, the web is understood to us through two pathways in our brain: the ventral stream and the dorsal stream. The ventral stream is used for understanding static design and content, while the dorsal stream is used for spatial awareness and animation. Because the dorsal stream happens to be relatively faster, we can reduce a user’s cognitive load by subconsciously processing some of our platform’s less important information more quickly, as well as removing change blindness by drawing users eyes to updating elements.

To expand on that a little, some of that “less important information” might include where certain elements might be hidden in your platform. For example, a user might assume a web page’s menu is kept just outside of their field of vision if it happens to slide in from off-screen, or a menu of additional options might be located “inside” the select input if the animation is anchored there. Sliding an element rather than having it simply appear is more natural, and easier to understand to the user

Besides looking good, animating change reduces the chance that your user might miss it (change blindness). This is where that dorsal stream really helps. Movement can signal to your user that something has changed on screen, without derailing their current workflow. Need an example? Think about a point total rising and falling during a video game. It’s likely a small portion of your screen, but it would be important to the player to know if that value is changing. Hence, a small animation would draw the player’s attention when that value changes without interrupting the task at hand.

So why do we want to use animation on the web? While of course, it’s much cheaper to build a static site, animation adds clear value for your client, as well as for the end user. A platform that actively keeps users interested is more valuable than a platform that reads like a newspaper or lets “the product speak for itself”. Like I pointed out before, animation the perfect way to keep users engaged with your platform while creating a smoother or more enriched experience. It makes it easier for users to discover functionality, draws attention to specific points of contact, or simply just add a sense of “delight” to your platform.

As an example of how some of these animations have improved your workflow online, think of mobile devices. Screens may “nudge” in one direction or another to indicate how to access additional content. In the popular design platform Invision, project components that can be interacted with flash blue when a user clicks the page. Animations don’t need to be complicated, they can be as simple as letting the user know that they have interacted with your platform correctly: button text changing from “Click to Pay” to “Payment Completed” for example. The goal here is to use animation to help users complete the task at hand, whether that be filling out a form, editing a photo, or completing a purchase.

So how does purely decorative animation fit into this? Personally, I go with “less is more”, A) because I’m a beginner, and B) because it’s easy to go overboard. A website filled with moving parts and flashing text can confuse users, and functionality can become impossible to discover. Because the eye is always drawn to movement first, it’s best not to keep a flashy ad on your payment page, eh? If something moves, I’m probably going to try to click on it.

Now that you’re adding animation, you get to really add some personality to your platform. Talking about what characteristics a company holds or wants to portray are excellent starting points for designing what movements your components may have. A law firm, for example, may use animations that feel “strong” or “weighty”. A spa might animate using gradients and opacity to portray a sense of calm. An educational site for children could use cartoonish movements, such as “bounce”, “squash”, or “stretch”. The motions themselves should feel natural, the way they might occur if a user was interacting with them in the real world. Something I was told when thinking about movement, is it can be nice to have a touchstone object to come back to when designing (for example, a bouncy ball or marble). Think about how this object may exist in nature, and base your movements on that.

From my experience so far, animations are fairly easy to start and are actually fun to work on. They add value to the platforms I have contributed to, and are a skill that I’m glad I will get to work on as I improve as a developer. In my follow up post (link to Adding Basic animations to react), I will outline how I’ve been working with animations so far, and hopefully, it will be helpful to you too. Hope you enjoyed learning about animations as much as I have

TechUnder 20 Cup 2017 & 2018 Recap

By | Giving Back, RedBit | One Comment

TechUnder 20 is an organization that has the aim of exposing youth to the technology world and has been running since about 2015. It is currently lead by Denys Linkov who is now at UofT in Computer Science but he joined when he was in highschool.

I’m a believer that not everyone should be coding (and yes I’m a coder since 14) and there are a lot of other opportunities available in the tech industry besides coding. That’s why I have been supporting TU20 both personally (when ever I can) and under RedBit by sponsoring, giving presentations on resume building, sharing contacts in industry and mentoring teams competing in TU20 Cup or just giving advice on what to do and how to get into the industry.

TU20 Cup 2017 Edition

In the 2017 TU20 Cup, I had a team called Team NextGen and they built a prototype of a tutoring platform to help in high school students get tutoring. What was great about this idea was tutors would be students helping other students and all would be done via mobile app. They were so eager and enthusiastic to build a mobile app, but with a limited amount of time and no one on the team ever having built a mobile app this presented a slight challenge. What most of them did have was photoshop skills and some did have coding skills but mostly python and PHP which probably would not help in building the app.

My role as a mentor was to help them going on the right track, so what I suggested is come up with an ideal flow of the app, figure out the screens for the app. And this is exactly what they did

I recommended they build it out using a tool like This is exactly what they did and resulted in this video

Once this was completed they needed to come up with a pitch which included a business model or how they would make money. The presented their concept at the Microsoft offices and did a fantastic job in the preliminaries earning a spot in the finals

In the end, the team placed second place behind a web application called StarSpeak which was a working prototype to help people present with confidence.

Amazing job by the team and this year some are off to university or finishing up highschool and continuing their journeys. Here is the 2017 team

  1. Justin Chan
  2. Andy Yang
  3. Eric Lin
  4. Ahmed Elmarsafawi
  5. Mohamed Elmarsafawi
  6. Aaron Chu

This is a perfect example of how you don’t need to be a coder to be in the technology industry and there are so many other fields in the tech industry that new comers can enter from design to coding to marketing/pitching!

TU20 Cup 2018

The 2018 TU Cup was recently held at the Microsoft offices, and thanks to Microsoft for providing the space again! This year I had a team of four highschool students and was excited to help them out. Some of them did have coding experience and the theme for this year was Smart Cities. The team was call Team Road Alerts.

This year, [GEOTAB](] was involved as a sponsor and opened up their big data pool to be used. With over 900,000+ devices on the road, they collect 2billion records per day and can use AI and Machine learning to predict certain scenarios.

The idea that the team came up with is notifying people and municipalities when there are potholes recognized in the system. So users would sign up for the server and provide proactive maintenance instead of being reactive and waiting for citizens to report. Now because the GEOTAB devices have an accelerometer, they can ‘predict’ if the pothole is a major one or a minor one which means the system can notify at certain levels only.

This year they did get a working prototype going but did not get everything done for the competition and considering they were juggling school and everything else, I think that is fine!

And in the end all the hard work paid off and they came in third place overall and came in first place for the highschool division.

Here is the 2018 participating team
1. Angela Efremova
2. Dimitry Linkov
3. Alexander Tingling
4. Cameron Humes

Giving Back

As technology leaders, we should always give back for the next generation. I expose my kids to technology (and I’m sure they are tired of hearing me!) but I think we should do what we can to help and guide the future generation and get down the right path, even if that path is not being a developer. Definitely looking forward to TU20 Cup 2019!

Optimizing Images for Mobile Devices

By | RedBit, Technology | No Comments

The RedBit team was developing a software system for a customer that consisted of a REST API, Web Application and mobile apps for iOS & Android. The mobile app was using Xamarin Forms was to show images to the user and these images are delivered via the REST API. There was a backend web application where images could be uploaded and these images were being served to iOS and Android devices as required.

The Problem

These images were being served to devices in their raw uploaded size and resolution. Although we limited the file sizes to 2MB, users took full advantage of that and uploaded 2MB images. Sometimes a collection of 15-20 images would be downloaded so a user could potentially download 30-40MB of just images.

This caused two main issues

  1. The application was using a lot more data than it needed to
  2. Low end devices were crashing from out of memory exceptions because of large images

With some images being upwords of 2MB in size and 3 times the resolution of the device, it was pointless for the device showing a hi-res image if it’s pixel density as 1x.

The Solution

We needed to resize images and instead of serving just one image, we would serve a set of images with a range of sizes. Devices can then pick which size is appropriate for their device. The architecture would be as follows

Resizing Images With Azure Functions

Visual Studio Azure Functions SDK has a built in template called Image Resize that worked perfectly for our needs. When you create a new function, you will get a dialog box as follows

NOTE: Make sure you are on .NET Functions v1, to get the dialog box above as v2 does not provide the Image Resizer template. Doesn’t mean you can’t use V2, just means you will have to manually hook things up.

When you fill in the dialog you set your parameters and you will get a file similar to the following

We modified a bit as we needed 3 image sizes. Our images were being uploaded to a blob storage container named Images. The Image Resize Function triggers every time a new image is added to that container.

The function creates three new images and places them into their respective folders:

  • Images-Small
  • Images-Medium
  • Images-Large

Note that this function uses the ImageResizer nuget package.

Serving Multiple Images

Now our REST API was built using ASP.NET Web APIs so to update this we added a new property to send not only the original image, but also the other three images sizes so the consumers of the API (iOS, Android and web app) could chose which one fits their specifications.

We’ll send down a JSON object that is defined by the following class which contains links to each of our new image sizes along with the original image link:

This C# class was used on both ASP.NET to serialize to JSON and then on iOS and Android to deserialize from JSON to object form. The JSON object would look like the following

The Xamarin Client

The mobile clients used to just display the original image that was uploaded. Now with multiple images, the client can be updated to download and show based on the devices DPI. This is similar to how Android use different image sizes based on the devices DPI with iOS doing the same. We will create our own way of utilizing DPI to server appropriate images on mobile.

On Android we had the following helper method

For iOS, we did not have any crashing issues, but these tend to be higher end devices but since we are sharing code across platforms for iOS we had the following

We had an enum to define the image size as follows

Based on your projects needs you can include a wider range of image sizes. You may also include a a set of images for tablets. We won’t get into how to display an image for Xamarin Forms as you can find documentation here

The Conclusion

As with any software, you try to think of scenarios and try to optimize things as much as you can and the RedBit team thought we were doing that by limiting the image upload size to 2MB. But of course, users took full advantage of that. This resulted in users uploading 2MB images but then 15-20 images would need to be downloaded to mobile devices, this obviously became a problem.

By refactoring some code we were able to reduce the footprint on devices drastically and reduce the crash rate on android to almost 0 compared to previous versions, and previous versions were not too bad!

One of the cases we observed was and image size going from 2MB to 50KB. That’s a huge reduction in data costs and memory usage especially on low end devices and can be seen in the crash reports. Users are being served hundreds of images from the application and reducing and providing multiple image options was a relatively easy adjustment with a huge impact.

Our Summer with a High School Intern

By | Giving Back, RedBit | No Comments

This summer 2017, we decided to hire a student, Jeff Awobodu, to help us out on RedBit customer projects. I meet him from a presentation I did at Tech Under 20 event where I tried to answer the question on ‘What are the Kinds of questions I need to prepare for if I am having an interview at a tech company’.

I was one of about 5 presenters and I was quoted as saying the following

And that’s how I truly feel. Even as an intern, if you work at RedBit you will be asked to work on real life projects and that is what we did with Jeff. If you are curious, you can download the presentation from slideshare.

Jeff’s Background

Jeff was not a developer but did take a few programming classes in high school. I noticed he did like art and when he sat at my table after the presentation we talked about his work. One of the projects that intrigued me was he build a motorized longboard that was connected to a remote, same type of remote you use for a RC Car.

I decided to hire Jeff for the summer, to help out on customer projects because of his enthusiasm. Here is a pic of Jeff and his long board and love how it was held by duct-tape

Design Sessions

At RedBit, when building software products, we hold design sessions to try and envision what the customer might want as usually they come with a vision but not really knowing what they need from a design perspective (UX or UI design) or from a technology perspective, sometimes we just get ‘I need an app!’. We decided to include Jeff in a project for one of our startup customers.

The design sprint included working with the customer, our designer, developer and Product Manager, to determine what was required for the software. This was a real life project affecting real customer outcomes and went great and the project is well under development now.


A great way to learn the software development process if you don’t really know how to code is to test software and work with QA. As a next step, we decided to put Jeff as part of the functional QA team to make sure developers are meeting functional requirements of software being delivered. The software being built was a React web application for an insurance company.

Using VSTS we had an existing board and explained the process of when a card should be picked up and sent back to dev with comments. That process was great, and he was efficient at communicating with dev team and pushing back ‘PR Bugs’ when something was not quite right.

At one point there was one bug card that was a small bug and since Jeff did do some HTML and JavaScript I asked him to spend the morning doing a fix for the bug. By the end he resolved the bug, committed code using git and the code ended up in dev branch. His comment :

I can’t believe I just created some code that is going to be on a company’s web application!

Giving Back

This is truly a great feeling to inspire someone to get into this industry, whether it’s as a developer, designer or anything else. As leaders in our field and in our community we need to expose kids and give them the opportunity to succeed. This includes interns where they are paid to work on real world projects and this is beneficial to everyone involved. Jeff is now in his first year studying Computer Science at Queens University, hoping we do another summer with Jeff!

Polyfill with Create React App

By | RedBit, Technology | No Comments


As the front end development world continues revolving and evolving into a fully fledged platform, and as javascript continues to make headway in all facets of the tech stack, more and more functionality is being added almost every day.

While this should be a fantastic development, here comes that giant black cloud that we all know too well: Customers.

If you’ve been in front end development for any time at all, you have been through this scenario: After building your latest and greatest new feature that performs just right, you dust off that ugly step sibling known as Internet Explorer, and……nothing. Something you’ve written has offended the browser that won’t die so deeply that all you see is a blank white page.

After cursing Barb from accounting, and remembering her insistence on using IE8 even though Microsoft ended support for IE in January 2016, brewing another cup of coffee, and calming down a bit, you open up the console to see just what IE could be throwing a fit about now:

It seems that this time, IE doesn’t support Array.find

Introducing Polyfills

A Polyfill is a piece of code that adds functionality to older (or just less compliant) browsers so that you can use the latest and greatest features from the W3C specification

Before we go any further, I should explain what Transpiling is and how it differs from Polyfills.

Transpiling is the process of compiling code from one “language” to another. If you are using React through create-react-app then you are already using the transpiler Babel which converts all of your fancy classes, arrow functions, const and let variables from ES2015 (and above) into code that browsers understand.

If you are wondering which functionalities will require a polyfill, one of the easiest ways to check is to take the list of minimum browser versions you will be supporting and search the fantastic site Can I Use to your heart’s content.

Once you’ve determined which polyfills are required, one good resource which may have pre-made open source polyfills that suit your needs is MDN

Create React App built in Polyfills

Luckily, those of us using create-react-app already have two rather useful polyfills included upon creation of our application.

  • Promise to handle the ECMA6 Promise proposal
  • fetch that has replaced the old XMLHttpRequest

While these two polyfills are great… this begs the question, why not more? Why not Array.find or Array.includes???

Well the answer is: it’s not all about you, now is it?

Actually, the create-react-app developers have only included what they deem absolutely necessary in order keep the size of the library to a minimum. (for a far more thorough discussion, check out this link here)

So for now, we are on our own…


Adding your own polyfills is actually quite easy, especially for those already written and hosted on MDN :). Simply create a new javascript file for the polyfill, and copy in the code (we tend to store these files in an aptly named polyfill folder. As an example, our ArrayFind.js file looks like this:

You’ll notice that this has come directly from the MDN site, with the small addition at the top of the file:

/* eslint no-extend-native: “off” */ which will prevent the linter from complaining and spitting out warnings in the console:


You may find it easiest to create a central file which calls each of the polyfills you’re using. We make use of an index.js file that looks similar to the following:

This way, there is only one file to import via the base index.js file.

Final Thoughts

With a little bit of preparation, you should be able to use most of the Javascript world’s latest and greatest features, while still keeping your customers happy by supporting Barb from accounting’s, umm….. interesting browser preference.

Getting Started with React Flexbox Grid

By | RedBit, Technology | One Comment

Web development technology is fast moving and constantly evolving and seems every time you blink, some new framework has been created. In this article I’ll focus on getting started with React Flexbox Grid. Note that this is not a full fledged tutorial nor a description of flexbox; if that’s what you are looking for then you should check out Chris Coyier’s fantastic write-up: A Complete Guid to Flexbox. The goal of this article is to allow you to quickly get up to speed with react-flexbox-grid and then explore more on your own, or join the RedBit team and we’ll help you!

The code for this tutorial can be found here, while a working copy of the final result can be found here.


If you’ve been a front end developer for any time at all on a team with a designer, you’ve inevitably been handed an image like the one below and told to make it come to life for the web.

Easy, right? … a couple floats here, maybe a media query here and there… and soon you’ve got a few hundred lines of css, thinking: there has to be an easier way.

Well, if you’re already using react, there is…


From the react-flexbox-grid site, the library is described as “a set of React components that implement flexboxgrid.css” In this tutorial, we will use this library to implement the example design above.

Coding the Design

To help things along, I’ve created two sample components for us to place around the screen for different screen sizes:





Understanding the Basics

When using react-flexbox-grid, you will deal with three components:

Grid: The base component that will wrap everything else.

Row: Rows within the grid.

Col: Columns within the grid.

The simplest example would be a one row, one column grid:

Column Sizing

In this (overly) simple example, notice the attribute on the Col element: xs={12}. This determines how many columns (out of twelve) that this column should take up on extra small (xs) screens. The four supported screen sizes are:

lg – 75em (most often 1200px) and up

md – 64em (most often 1024px) to 74em

sm – 48em (most often 768px) to 63em

xs – up to 47em

Mobile First

While this may come across as a bit of a buzz phrase, we will be starting with mobile and moving our way up. Due to the way that the library is written (and more specifically the way that media queries are based on a minimum width), starting with desktop will cause nothing but headaches.

So given that, let’s finally get down to coding, beginning with the mobile page.


The code for the mobile page is actually quite simple: we wrap each Card in a Row component, then wrap the Hero and six Field components in Col components. Since we are only dealing with mobile, we can set only the xs attribute and be on our way. The code would look like this:

Tablet Size

Notice that the code in the previous section does not respond to different screen sizes at all, indicating that the layout will be of terrible quality on larger displays. We’ll update the code to match the design for Tablet-sized screens first. Looking at the design, the fields should be arranged in two rows of three columns, with the Hero component off to the right.


Since we are dealing with a 12 column grid, we should be able to set the column size to 4 (12/3 = 4) and it the library will take care of the rest for the fields.

If you run it now, you’ll notice that we didn’t handle the hero image. In order to do this, we will have to nest the Rows and Cols. Let’s divide the Card into two sections, one for the Hero component and one for the rows of Field components. The resulting code should look like this:

While this looks much closer to the design, you should notice a visual bug right away, the Hero Image is on the wrong side. We could fix the issue by simply moving the image to the end of the parent row… but then the Hero would be at the bottom of the mobile view.

Reordering attributes to the rescue!

react-flexbox-grid has more than the basic column width attributes to help with your layout needs. The one that we’ll use here is Reordering. What this feature allows us to do is specify that the first column of the parent row should be first on mobile, but last for all other page sizes. Unsurprisingly, these attributes are named first and last, respectively. The updated code should look like this:


Finally, let’s implement the layout for Desktop. You’ll see that the only true difference is that we now have a row of four columns, with the second row containing two columns aligned with the first and last columns in the first row:


First we’ll update the Field rows to use three as the value for lg (12/4=3). While the first row properly has the four Field components lined up, notice that the second row’s columns are aligned incorrectly per our design.
Another feature of react-flexbox-grid – distribution attributes – allows us to specify how to distribute the contents of a Row or Column within the available space. This, too, can be defined per screen size so that the layout on smaller displays is unaffected.

In our case we want to use the between attribute on the Row containing the Field components so that the final two (on the second row) are distributed with the superfluous screen real estate left between them. The final code should look like this:

Final Thoughts

We have only scratched the surface of what can be accomplished with react-flexbox-grid. To read more, check out the GitHub repos for both react-flexbox-grid and the underlyling css framework: flexboxgrid.css.

Hacking for Missing Kids – Hockey App, Push Notifications & Wrap Up

By | Events, RedBit, Technology | No Comments

This is the last post in a series on how to get the Xamarin based code for a hackathon we did with Missing Children’s Society of Canada up and running on iOS, Windows & Android. This article will focus on how to distribute the app.

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Hockey App

Although we used Hockey App to distribute the Android application, unfortunately due to time, we did could not complete a full Develop – Test – Build – Distribute pipeline built out for the Xamarin application.


We did end up just manually uploading APKs, but you definitely want to automate your mobile app lifecycle process!image27

Here is an example of a customer app we did at RedBit in Visual Studio Team Services where we have API, Web App, iOS and Android build and release pipelines setup


Definitely worth the time to set this up when building out full software products!

Read More

Hacking for Missing Kids – Running Windows Version

By | Events, RedBit, Technology | No Comments

In the previous article on Hacking for Missing Kids – Running Android Version we looked at how to get the Xamarin app running on Android. Next, is running the application on Windows using our Xamarin based code

For reference here is the series of articles available

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Do the following to run the application on Windows

  1. Right click on the IRIS.Windows project and click Set As Default
  2. Change the Solution Platform to Any CPU
  3. Tap F5 or click the debug button in the tool bar to start debugging on Windows. You can also change the OS version and emulator to run it on from here

When the application runs, you should get the following if running on the


Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

You should end up with a list and then be able to navigate to a case details page.


As you can see, we can literally use almost all the same C# code using Xamarin reducing the time to target all platforms. By no means are these polished apps, but you can get up and running pretty quickly using a Xamarin code base.  Next up, we’ll look at using Hockey App and how it was leveraged to distribute the application as well as push notifications.