Skip to content

Our React/React Native articles


The Unfortunate Demise of App Center - An Obituary

March 15, 2024Mo Khazali6 min read

Today is a sad day for the React Native ecosystem. Microsoft very quietly announced that App Center is being "retired" in just over a year's time (at the end of March 2025). Over the years of building React Native apps, I used App Center on many, many projects. It was the one-stop shop for building…

Continue reading →

Three Hacks to Level Up Your Maestro Testing

March 14, 2024Claire Squires10 min read

Introduction Our team at Theodo UK recently had the delightful challenge of building a universal app - an app that runs on multiple operating systems from a single codebase. This project presented many interesting technical problems, including the task of automating end-to-end testing for the mobile…

Continue reading →

Flutter vs React Native - A guide from every experience level

January 05, 2024Justin Kek8 min read

Introduction If you’re reading this article you’ve probably decided to use a cross-platform framework over native development. Cross-platform frameworks allow you to deploy to multiple platforms from a single codebase, which has two main benefits: Cost and time savings Consistency in UX/UI The two…

Continue reading →

Visualising your bundle size in Expo Router apps

December 28, 2023Mo Khazali4 min read

TLDR Run npx expo export -p web --dump-sourcemap in your project. This will create a dist directory with your exported project along with the sourcemaps. Run npx source-map-explorer dist/**/*.js to get the graphic representation of your sourcemaps. Before the days of Hermes, a major concern when…

Continue reading →

Nightly End-to-End & Performance Tests with Flashlight

November 30, 2023Mo Khazali5 min read

Several years ago, I was working on a web project that had quite a number of critical web flows that needed to be regularly tested to make sure that there weren't any regressions from functionality or performance across the app. On the web, this was pretty easy. We had nightly Cypress tests running…

Continue reading →

What's the point of StyleSheets in React Native?

October 27, 2023Mo Khazali3 min read

Over the years, I've heard whispers of the mystic powers of StyleSheet.create, and how not using StyleSheet would negatively affect performance. The other day, curiosity got the better of me, and I went down a rabbit-hole of looking into the React Native source code to see if I can validate the…

Continue reading →

Using RCTView & RCTText in React Native for Performance Gains

October 10, 2023Mo Khazali4 min read

I recently published an article and thread comparing iOS rendering performance across SwiftUI, React Native, and Flutter. The results showed that SwiftUI (unsurprisingly) performs the best, followed by React Native and Flutter respectively. I got some interesting feedback and suggestions from the…

Continue reading →

Microfrontends in Mobile with React Native

September 29, 2023Mo Khazali8 min read

Introduction This article is meant to be an exploration of the state of creating Microfrontends (MFEs) for native mobile apps in 2023. It covers the history of MFEs, giving a brief intro, and then looks into how React Native's architecture can theoretically make MFEs possible. We look at a naive…

Continue reading →

Comparing iOS rendering performance: SwiftUI vs. React Native vs. Flutter

September 14, 2023Mo Khazali5 min read

When SwiftUI first came out, I remember reading about complaints around its performance. Some animations were janky (compared to UIKit) and app layouts were getting recalculated far too much, resulting in unnecessary computation power being used. People reported it being generally slower than UIKit…

Continue reading →

Revolutionise Your Mobile Project: React Native or Swift – The Ultimate Choice

September 13, 2023George Alexiou6 min read

In the ever-evolving landscape of app development, choosing the right programming language and framework can significantly affect the outcome of your project. This article aims to compare Swift and TypeScript, two popular languages, and dive deeper into the frameworks built upon them: SwiftUI and…

Continue reading →

Firebase Dynamic Links are being shut down: Time to go Universal with Expo Router?

August 15, 2023Mo Khazali3 min read

Google has a reputation for killing or discontinuing its products and services. There's literally a website called Killed By Google, which has a list of all the services that have been discontinued over the years. Recently, Google has been hinting that developers should not use Google Dynamic Links…

Continue reading →

SolidJS for beginners: a story of virtual DOM and signals

July 28, 2023Elise RECEJAC6 min read

Signals are everywhere. After some years of React domination where signals were put aside, they are now back! A lot of rising frameworks use it (like Preact or Qwik), and even Angular integrated it in version 16. I would like to focus on a less-known framework: SolidJS. It first appeared in 2021 in…

Continue reading →

Communicating with BLE devices with Expo mobile apps

July 11, 2023Rohan Samuel8 min read

In this article, we will be understanding what BLE (Bluetooth Low Energy) is, the use cases for BLE, how the GATT profile defines how BLE devices communicate with each other, and using these concepts to build a React Native mobile app with Expo and Expo Config Plugins that can scan, connect, read…

Continue reading →

Conquer the Search Realm: Unleashing Postgres' Full Text Search Potential!

June 30, 2023Joshua Radin-GrantEvgenia Brusnitskaya4 min read

You’ve been working on your application for a while with Postgres and have realised that it would be great for users to be able to search key values in your database. Well, look no further! This article will introduce you to Postgres Full Text Search (FTS) - a simple keyword matching engine - tell…

Continue reading →

Boost Your Next.js Commerce with Sylius: Introducing Sylext

June 05, 2023Charles DUVIGNEAU2 min read

If you are a PHP developer looking to create a fully customized e-commerce website, we recommend using Sylius as your e-commerce solution. With its modular and decoupled architecture, Sylius makes it effortless to integrate with third-party services and extend its functionality using custom code…

Continue reading →

Building Whitelabel Mobile Apps: A Comprehensive Guide of Technical Considerations

May 25, 2023Mo Khazali7 min read

Introduction Imagine this scenario: You've just joined as a lead engineer at Burrito Ring, an international chain of average tasting TexMex fast food. Your first project is to develop a mobile app that allows users to view the menu, check allergens, and order food within the restaurant. After six…

Continue reading →

Teaching Custom Knowledge to AI Chatbots

May 23, 2023Will Alexander7 min read

This article explains how to build a chatbot that's an expert on your custom knowledge base - by augmenting ChatGPT using embedding similarity search in Supabase. We also discuss prompt engineering, suggest hyperparameter values, evaluate performance, and propose further work. Background You’ve…

Continue reading →

The State of Building Native Mobile and Web Apps from a Single Codebase with React Native in 2023

May 03, 2023Mo Khazali8 min read

This article is a write-up based on a talk I've given called "Building Universal Apps in React Native". It was first delivered at iJS Conference London in April 2023. This article is not meant to go into detail about all of the components to build a universal app, rather it aims to break down the…

Continue reading →

Effective Strategies for Testing React Native Apps: Striking a Balance Between Testing UI and Business Logic

April 20, 2023Mo Khazali7 min read

Testing in software development is a contentious topic, with advocates on both ends of the spectrum. On one hand, there are those who argue against writing any tests at all, while on the other hand, there are companies that insist on 100% test coverage. I remember I went on a project where there was…

Continue reading →

Are Typecript Enums Really Harmful?

March 30, 2023Michael Kim8 min read

🤺 Are TypeScript Enums Really Harmful? One of the current trends in the TypeScript space seems to be criticising TypeScript native enums and claiming they are unsafe to use. I first came across the "enum drama" through videos from big creators in the space such as Matt Pocock and Theo, who…

Continue reading →

Handling Supabase Password Reset in React Native

March 29, 2023Mo Khazali7 min read

When working on a project that used Supabase for its authentication, we faced many issues in the password reset flow. Our app was using React Native on the front end, and Supabase on the backend. The official documentation had a section describing how to implement the password reset flow using the…

Continue reading →

From Responsive on Mobile to Mobile-First

March 16, 2023Mo Khazali3 min read

It’s no secret that web development has changed massively with the rise of smartphones. Back in the day, websites were typically targeting desktop resolutions, and many websites required you to use a computer to have a pleasant experience. Here’s a little flashback: when Apple was launching…

Continue reading →

Getting started on CloudCannon with Next.js

March 10, 2023Ana Schlienger14 min read

CloudCannon is an up-and-coming CMS, both super interesting and powerful! It is backed by Git, a strength we will see in this article because it makes it easy for the site manager to maintain. Even though it is used by large editorial teams at Netflix and Twitch, the developer community is pretty…

Continue reading →

One Hook Per Screen: a simple architecture for scalable React Native apps

February 13, 2023Mo Khazali5 min read

“Architecture is the decisions that you wish you could get right early in a project” Ralph Johnson When I built my first site, the web felt like a simpler place. I would create an html file for my markup, a css file to have all of my styles, and js files if I had any interactivity or logic. This…

Continue reading →

Stop Building Auth: a case for using prebuilt authentication in React Native

January 31, 2023Mo Khazali7 min read

Authentication is simultaneously one the most and least important parts of your application. By default, most mobile apps will remember the user’s credentials (since phones are normally personal devices). This means that the user might spend a couple of minutes signing up, or a few seconds logging…

Continue reading →

How to build mobile apps like the world is ending

January 20, 2023Henry Deacy4 min read

When I began my career as an app developer, the main appeal to me was the idea that I could create without material. I didn’t need paint, bricks or steel, just my keyboard and enough time. Of course, another aspect which is becoming harder and harder to overlook is energy usage, and more importantly…

Continue reading →

Installing native modules in the EAS build process

January 16, 2023Francisco Costa19 min read

A step by step guide on how to write your own Expo plugin for a project that requires native dependencies that arent included in Expo. Suitable for developers who are interested in writting their own plugin or facing problems adding native dependencies to the EAS CI. Furthermore, the main example in…

Continue reading →

Installing native modules in the EAS build process

January 16, 2023Francisco Costa19 min read

A step by step guide on how to write your own Expo plugin for a project that requires native dependencies that arent included in Expo. Suitable for developers who are interested in writting their own plugin or facing problems adding native dependencies to the EAS CI. Furthermore, the main example in…

Continue reading →

Preview Branches for React Native with Expo

January 09, 2023Mo Khazali4 min read

A Github Action to automatically generate preview branches using EAS (Expo Application Services) as part of a CI/CD workflow, creating live deployments that allow the reviewer to functionally check any changes in the app before the feature is merged into staging. React Native developers often get…

Continue reading →

Optimising screen load times for legacy low-end devices in React Native

December 19, 2022Mo Khazali7 min read

You’ve developed your React Native application and you’re ready to release it out to the public. All is going well, until you start testing on real phones. While your app is perfectly smooth and snappy on your shiny new iPhone 14 Pro, others give you a different story… An Android user reports that…

Continue reading →

Optimising screen load times for legacy low-end devices in React Native

December 19, 2022Mo Khazali7 min read

You’ve developed your React Native application and you’re ready to release it out to the public. All is going well, until you start testing on real phones. While your app is perfectly smooth and snappy on your shiny new iPhone 14 Pro, others give you a different story… An Android user reports that…

Continue reading →

Creating a Controlled Form with React Hook Forms

June 24, 2022Rohan Samuel12 min read

React Hook Forms is a form library for React applications to build forms with easy to configure validation through the process of calling hooks to build form state and context. React Hook Forms serve as an alternative to another popular form library, Formik. The use cases for React Hook Forms is how…

Continue reading →

Increasing user acquisition by 15% through experiments on the onboarding funnel

June 15, 2022Francisco Costa6 min read

A summary of my findings while helping a business increase their user acquisition by performing modifications and experiments to their onboarding funnel. A increase of ~15% was seen when synchronous email verification was removed from the flow, this however did come at the cost of a few risks to the…

Continue reading →

Increasing user acquisition by 15% through experiments on the onboarding funnel

June 15, 2022Francisco Costa6 min read

A summary of my findings while helping a business increase their user acquisition by performing modifications and experiments to their onboarding funnel. A increase of ~15% was seen when synchronous email verification was removed from the flow, this however did come at the cost of a few risks to the…

Continue reading →

Embedding videos in a React Native app

May 20, 2022Aleksandra Kulbaka3 min read

Web Illustrations by Storyset For the last few months, I have been working on a React Native multimedia app. We already supported reading articles and listening to podcasts, but the problem started when we began to implement the video player. The app crashed, video player didn’t render as expected…

Continue reading →

How to externalize large libraries from your application bundle?

April 27, 2022Guillaume Vagner8 min read

During the past months, I spent a lot of time trying to improve the frontend developer experience of about 15 developers on a large e-commerce website. The objectives included the reduction of our bundle size and CI run times. During this time, the development team introduced 3D assets, using the…

Continue reading →

React Hooks and Tips to Avoid Useless Component Render Applied on Lists

January 31, 2022Louise Loisel9 min read

A few weeks ago, I encountered children list rerender issues on the project I was working on. In this article you will learn : how I debugged a react performance issue why virtualization is not always suitable for list rendering issues what is memoization how to memoize react components and…

Continue reading →

Mastering React-admin Resources to Improve Your App Performance

January 18, 2022Morgane Riclet6 min read

Let me tell you the story of how I improved my react-admin app runtime loading performance from 1 minute to 1 second. I work at Theodo on a project with many websites. To configure and manage all of them, we had an administration tool (let's call it AdminV1). But AdminV1 was old: it was an Angular…

Continue reading →

TypeScript: How Type Guards Can Help You Get Rid of 'as'

January 12, 2022Fatine Benhsain7 min read

In TypeScript (TS), the "as" keyword is widely used when manipulating types. However, you should employ it with caution, as it does not provide any guarantee on the real types of your objects and could generate unexpected bugs. In this article, I will go into more detail about “as” and explain how…

Continue reading →

The React Testing Library Guide I Wish I Had

December 21, 2021Elise RECEJAC6 min read

I would like to share with you a great library I have found, which makes front-end tests fun to write! With this article, you will be able to write serenely your first tests with React Testing Library. To have a deeper understanding of the library you can use the documentation. Is it really useful…

Continue reading →

Building Terravision(2021) using Deck.gl and Carto

December 07, 2021Eddie MG9 min read

Adding a detailed and interactive map to a web app can be a time consuming process. Pairing deck.gl and carto with react can make it pain free. Using Carto to manage your data and Deck.gl to render it can make for a great developer and user experience. Resulting in a web app rich with detailed and…

Continue reading →

How to Generate Beautiful PDFs with React and Puppeteer

October 27, 2021Clément Marcilhacy7 min read

I recently had to provide a new functionality on my project: the "download as PDF" one. The first thing I wondered was why should we provide this functionality? Doesn't it already exist natively with pretty much all web browsers with a right mouse click / print / "save as pdf" option? Well I tried…

Continue reading →

Migrating from React Redux to React Query

October 19, 2021Robert Hofmann7 min read

React Redux is an extremely popular package, receiving about 4.5 million weekly downloads. Another popular package, Redux Saga, is a Redux side effect manager — it alone receives over 900k weekly downloads. The combination of React Redux with either Redux Saga or Redux Thunk is one of the most…

Continue reading →

A Newbie's Guide to React Query

June 03, 2021Alex Liu5 min read

Let's say you're building an application that relies heavily on displaying and interacting with database information (super rare situation as a dev, I know). You're also pretty good at React and Redux, so you start building your app with those libraries. Next, you make an API request for a dataset…

Continue reading →

Spice up Your Website with a DocuSign Electronic Signature Embedded Tool

May 14, 2021Alexandre Lac7 min read

Introduction Integrating electronic signing in a website is not always so easy. If you ever get tired of spamming users who already have an overflowing mailbox with DocuSign emails, then you have landed on the right article. Let me show you how to replace them with an elegant embedded tool that will…

Continue reading →

How to develop on Shopify in 2021

April 28, 2021Quentin Churet8 min read

As a software developer, I often hear that No-Code is the future of app development. That in a few years, automatically generated code will replace all the frameworks that we currently have. With my young experience in this field I'm quite sceptical, because I still believe that to truly answer a…

Continue reading →

The React Native Guide I Wish I Had! - Part 1: Environment and Stateless Components

March 22, 2021Benjamin Gowers7 min read

During my first week at Theodo, I had a lot to learn about the main technologies used within the company. I focused my attention on learning to build a simple React Native application using Typescript and Redux. Quick Links → Part 1 - focuses on setting up your environment for react native…

Continue reading →

The React Native Guide I Wish I Had! - Part 2: Redux and Stateful Components

March 22, 2021Benjamin Gowers9 min read

This article takes you through a crash course of redux implementation, as well as adding it to your Todos application. Quick Links → Part 1 - focuses on setting up your environment for react native, typescript and redux, as well as creating stateless components for a Todos app. → Part 2 - focuses on…

Continue reading →

Using Native Incoming Call UI for your React Native App (How I Wrote My First Native Module)

March 17, 2021Francisco Costa8 min read

A story about my struggles implementing native call display functionality and how this led me to writting my own native module for android. Suitable for developers who are interested in how to get started with native modules for android within React Native or implementing native UI for incoming…

Continue reading →

Using Native Incoming Call UI for your React Native App (How I Wrote My First Native Module)

March 17, 2021Francisco Costa8 min read

A story about my struggles implementing native call display functionality and how this led me to writting my own native module for android. Suitable for developers who are interested in how to get started with native modules for android within React Native or implementing native UI for incoming…

Continue reading →

Build your own stickers component with react-konva

November 16, 2020Sarah Hamilton7 min read

Konva.js is an awesome HTML5 Canvas JavaScript framework that enables high performance animations for desktop and mobile applications. The framework's capabilities are useful and versatile - it can be integrated for many different and varied use cases. Konva.js deals well with touch genstures, drag…

Continue reading →

Build an Animated Accordion List in React Native

June 27, 2020Benjamin Piggin6 min read

Accordion lists (or ExpandableListViews) are now a material design staple and show up in quite a few apps. They are a great way to dynamically display information to a user. When it comes to implementing one in your own app, sure, there are libraries that you can use. But implementing one yourself…

Continue reading →

Why it’s time to consider Azure to host your static application

June 15, 2020Clément Pasteau2 min read

The line between static & dynamic web applications is not what it used to be. With new frameworks like Gatsby or NextJS, the Jamstack is a strong option to get your application running in no time, whilst being able to scale it as needed. When it comes to hosting your app, there are dozens of…

Continue reading →

Reduce redux boilerplate with redux-toolkit

April 20, 2020Daniel Tchangang3 min read

You're looking for an easier way to write your reducer, aren't you ? When writing plain redux, you have to define an action, an actionCreator and a reducer to update the store of your app. The reducer is in most cases a big switch to handle all the actions dispatched by actionCreators in your app…

Continue reading →

Demystifying Building Native Modules for React Native

April 17, 2020Kamile Matulenaite6 min read

You’ve just released a new native SDK. Could you bring more business to your company by releasing on a cross-platform development framework? Maybe you’re a developer, longing for a native module of an open-source platform API (or even the third-party SDK above 🙄) to be released. Could you fast…

Continue reading →

How to convert an imperative library to a declarative React component: the Sketchfab Viewer

April 10, 2020Alex de Boutray5 min read

I love using React for multiple reasons. I like the writing style, I like the tooling, I like the ecosystem. But sometimes you run into a library that doesn't have a React adapter. It can either be pretty old, kind of niche, closed source, etc. In this series of articles, we’ll look into how to…

Continue reading →

How DUOLAB uses artificial intelligence to improve your skin

April 03, 2020Sarah Hamilton3 min read

For a long time people (including myself) have used the same skin care routine everyday. Only occasionally do we switch up our products for a different brand. The creams are opened and resealed multiple times a week, resulting in the products containing preservatives and other unnatural ingredients…

Continue reading →

Your React App Deserves a Proper Seo

November 18, 2019Rémi Mondenx6 min read

SEO has become an integral part of a developer’s daily missions. Creating a robust, performant and well-designed web app is great, but useless if you don’t manage to get traffic on it. That’s where SEO gets in the game. In this article, you will understand why it is difficult to have a good SEO when…

Continue reading →

Make writing End to End tests child's play with Puppeteer and Jest

August 29, 2019Alex White5 min read

We all know writing tests is important. Unit testing is now a standard in software development, sometimes we even write them before the code. Snapshot testing is becoming more and more common to check that the UI doesn't change unexpectedly. However, the dev community still has a long way to go with…

Continue reading →

How I chose the #1 graph library for my React project

August 15, 2019Tomas Piga9 min read

The thorough comparison you need between the best React graphing libraries to give you an exact insight into which library best benefits your project, and how you can choose other libraries based on the same criteria.

Continue reading →

How I chose the #1 graph library for my React project

August 15, 2019Tomas Piga9 min read

The thorough comparison you need between the best React graphing libraries to give you an exact insight into which library best benefits your project, and how you can choose other libraries based on the same criteria.

Continue reading →

How I ruined my application performances by using React context instead of Redux

July 16, 2019Georges Biaux5 min read

TL;DR I used React contexts instead of Redux for centralized states Without a selector system, my components where getting lots of data as props, some of them were often changing and not necessary to build the view Any changes in these contexts objects caused almost all my components to rerender I…

Continue reading →

React: Fantastic Hooks and How to Use Them

May 02, 2019Brendan Daoud6 min read

A couple months ago, React hooks were officially released, the hype was high and we decided to put them to the test on a project. Here is what I learnt and why I strongly advise you to give them a try also. What are those? Let's begin the tour with the basics: what are React hooks? React has a very…

Continue reading →

React: Fantastic Hooks and How to Use Them

May 02, 2019Brendan Daoud6 min read

A couple months ago, React hooks were officially released, the hype was high and we decided to put them to the test on a project. Here is what I learnt and why I strongly advise you to give them a try also. What are those? Let's begin the tour with the basics: what are React hooks? React has a very…

Continue reading →

Give a Second API to Your React-admin App

April 19, 2019Romain Batby5 min read

React-admin is a frontend framework for building back-offices running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. React Admin (previously named Admin-on-rest) is an Open Source project maintained by marmelab. If you do not know what React Admin is capable of…

Continue reading →

The React Developer Pocketbook: Learn to develop React 2019

April 01, 2019Leo Siddall-Butchers1 min read

The inspiration for this guide came about after realizing that the blog article I had read the most was ‘_A Complete Guide to Flexbox’. _There are two reasons for this, firstly, I am very forgetful, and secondly, it is a quick and simple way to find the information I need. This list aims to give you…

Continue reading →

Create a login screen in less than 5 minutes with Formik and Yup

March 06, 2019Gavin Williams4 min read

In this article, you will quickly learn how to build a simple login form using Formik and Yup. For those who don’t know, Formik is a relatively new but already widely-used form library for React. As a much less complex alternative to Redux Form, it keeps your React forms far simpler than and more…

Continue reading →

Create a login screen in less than 5 minutes with Formik and Yup

March 06, 2019Gavin Williams4 min read

In this article, you will quickly learn how to build a simple login form using Formik and Yup. For those who don’t know, Formik is a relatively new but already widely-used form library for React. As a much less complex alternative to Redux Form, it keeps your React forms far simpler than and more…

Continue reading →

Build React App Faster by Writing your Own Higher-Order Components

March 04, 2019Benoît de Malet3 min read

Now that hooks have officially been released in React 16.8 and that everybody is trying to convince you to rewrite all your React projects using nothing but hooks, let's see if there is still something to achieve using Higher-Order Components. (Spoiler alert: the answer is "yes") In this article, we…

Continue reading →

Wow your customers with simple UI & UX principles

January 28, 2019Tomas Piga7 min read

When it comes to the web, the main idea of a website or app is to either sell a product (including services) or be that product. Generally, a product is about delivering a message or some sort of value to a User. Many people don’t value the U in that sentence. User experience is about maximising the…

Continue reading →

Wow your customers with simple UI & UX principles

January 28, 2019Tomas Piga7 min read

When it comes to the web, the main idea of a website or app is to either sell a product (including services) or be that product. Generally, a product is about delivering a message or some sort of value to a User. Many people don’t value the U in that sentence. User experience is about maximising the…

Continue reading →

Wow your customers with simple UI & UX principles

January 28, 2019Tomas Piga7 min read

When it comes to the web, the main idea of a website or app is to either sell a product (including services) or be that product. Generally, a product is about delivering a message or some sort of value to a User. Many people don’t value the U in that sentence. User experience is about maximising the…

Continue reading →

5 Gotchas using Victory Chart for Data Visualisation

January 05, 2019Kamile Matulenaite6 min read

5 gotchas using Victory Chart for data visualisation Victory Chart is a React chart library for data visualisation built on top of D3. Formidable Labs have produced a neat set of documentation - easy to follow, full of examples and an editable demo section (we love those!). However, there are a few…

Continue reading →

5 Gotchas using Victory Chart for Data Visualisation

January 05, 2019Kamile Matulenaite6 min read

5 gotchas using Victory Chart for data visualisation Victory Chart is a React chart library for data visualisation built on top of D3. Formidable Labs have produced a neat set of documentation - easy to follow, full of examples and an editable demo section (we love those!). However, there are a few…

Continue reading →

What is Kotlin and should we be using it for app development?

December 07, 2018Abbie Howell5 min read

Kotlin is an object-oriented programming language for making Android apps that uses Java-like syntax with functional programming features. It was created by Jetbrains, the makers of hugely popular IDEs like IntelliJ and PyCharm, and is used by big companies such as Pinterest, Uber, and Atlassian. At…

Continue reading →

We want you to make reusable UI components

October 02, 2018Léo Anesi2 min read

A year ago I was a young developer starting his journey on React. My client came to see my team and told us: “We need to make reusable components”, I asked him: “What is a reusable component?” and the answer was “This project is a pilot on the subject”. 2 months later another developer tried to use…

Continue reading →

Save Time Writing Jest Tests with jest-each (+ Examples)

September 21, 2018Mike Riddelsdell4 min read

jest-each is a small library that lets you write jest test cases with just one line. It was added to Jest in version 23.0.1 and makes editing, adding and reading tests much easier. This article will show you how a jest-each test is written with examples of where we use it on our projects. A simple…

Continue reading →

Save Time Writing Jest Tests with jest-each (+ Examples)

September 21, 2018Mike Riddelsdell4 min read

jest-each is a small library that lets you write jest test cases with just one line. It was added to Jest in version 23.0.1 and makes editing, adding and reading tests much easier. This article will show you how a jest-each test is written with examples of where we use it on our projects. A simple…

Continue reading →

Save Time Writing Jest Tests with jest-each (+ Examples)

September 21, 2018Mike Riddelsdell4 min read

jest-each is a small library that lets you write jest test cases with just one line. It was added to Jest in version 23.0.1 and makes editing, adding and reading tests much easier. This article will show you how a jest-each test is written with examples of where we use it on our projects. A simple…

Continue reading →

React-Virtualized: Why, When and How you should use it

September 11, 2018Cyril Gaunet4 min read

Why What is a Virtual DOM ? The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory. Then, it is synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. Performance and windowing You might know…

Continue reading →

Build an awesome scrollable modal in React Native

August 20, 2018Antoine Garcia3 min read

At some point during the development of your React Native application, you will use a Modal. A Modal is a component that appears on top of everything. There are a lot of cool libraries out there for modals, so today, we’ll have a look a the best libraries for different use cases. Click on "Tap to…

Continue reading →

Build an awesome scrollable modal in React Native

August 20, 2018Antoine Garcia3 min read

At some point during the development of your React Native application, you will use a Modal. A Modal is a component that appears on top of everything. There are a lot of cool libraries out there for modals, so today, we’ll have a look a the best libraries for different use cases. Click on "Tap to…

Continue reading →

Installing Private NPM Packages on AppCenter

July 19, 2018Ben Ellerby1 min read

AppCenter is a great CI platform for Mobile Apps. At Theodo we use it as the standard tool for our react-native projects. In a recent project, we needed to have a shared NPM package between the React and React-Native applications. There is no mention of how to achieve this in the AppCenter…

Continue reading →

Next.js: Use Server-Side Rendering in your React App // Part 1

April 27, 2018Baptiste Jan6 min read

Usually, we are completely running React.js on client-side: Javascript is interpreted by your browser. The initial html returned by the server contains a placeholder, e.g. <div id="root"></div>, and then, once all your scripts are loaded, the entire UI is rendered in the browser. We call it client…

Continue reading →

Next.js: Use Server-Side Rendering in your React App // Part 1

April 27, 2018Baptiste Jan6 min read

Usually, we are completely running React.js on client-side: Javascript is interpreted by your browser. The initial html returned by the server contains a placeholder, e.g. <div id="root"></div>, and then, once all your scripts are loaded, the entire UI is rendered in the browser. We call it client…

Continue reading →

How not to Make your Projects Succeed with ImmutableJS! - Part 1

April 16, 2018Jérémy Dardour7 min read

ImmutableJS When I first learned about ImmutableJS I was convinced it was a great addition to any project. So I tried to make it a working standard at Theodo. As we offer scrum web development teams for various projects going from POC for startups to years lasting ones for banks, we bootstrap…

Continue reading →

How not to Make your Projects Succeed with ImmutableJS! - Part 1

April 16, 2018Jérémy Dardour7 min read

ImmutableJS When I first learned about ImmutableJS I was convinced it was a great addition to any project. So I tried to make it a working standard at Theodo. As we offer scrum web development teams for various projects going from POC for startups to years lasting ones for banks, we bootstrap…

Continue reading →

Customize Your ReactJS App Using styled-components, cross-env and webpack

February 28, 2018Darya Talanina4 min read

As a web developer you may have already worked on a project where you had a single web application that was used by several different clients. The app would use a single code base but then it would need to have several variants, each personalized for a specific client: you may need to change the…

Continue reading →

Customize Your ReactJS App Using styled-components, cross-env and webpack

February 28, 2018Darya Talanina4 min read

As a web developer you may have already worked on a project where you had a single web application that was used by several different clients. The app would use a single code base but then it would need to have several variants, each personalized for a specific client: you may need to change the…

Continue reading →

Build your own smart mirror for less than 50€

February 26, 2018Jean-Philippe Dos Santos3 min read

Smart mirrors are straight from science fiction but it turns out that building your own smart mirror isnt just science fiction or Tom Cruise's favorite activity. Its actually easy to build your own version... and I will show you how. I recently built one to save time each morning by answering this…

Continue reading →

Build a Real-time Notification System With GraphQL, React and Apollo

February 22, 2018Loïc Carbonne6 min read

Real-time has opened new opportunities in web applications. By allowing users to get access to data as soon as it’s available, it provides them a better experience. Thanks to real-time, you can edit documents collaboratively, play online with your friends, know exactly when your pizza delivery man…

Continue reading →

Building a Google Analytics Funnel from Firebase in React-Native (a simple workaround)

January 15, 2018Ben Ellerby2 min read

Google Analytics funnels are a standard way to monitor conversion on a typical purchase flow (e.g. buying a book on an ecommerce site, subscribing to an online service or taking out an insurance policy). Google have moved to have Firebase as their standard mobile app analytics platform, and there is…

Continue reading →

React and HTML : Beware of the traps

January 12, 2018Elie Dutheil4 min read

If you ever used React you may have noticed that you can easily forget how to write a static webpage because it adds a layer of abstraction that changes the way the page is created. But in the end, all code written in JSX will generate a classic DOM. In this article I'll show you mistakes I made and…

Continue reading →

Clean your Tests from React-Intl "Missing message" Errors in Console

December 21, 2017Yannick Wolff4 min read

Why is it important? While programming on a project, you run your tests all the time, so it's important not to lose time analysing the results of your tests. We want to immediatly spot which tests are failing, not being disturb by any flashing red false negative errors, which take all the place in…

Continue reading →

Your Preact Progressive Web App using Preact-CLI, Webpack, Material Design and Web APIs

November 11, 2017Laurent Ros9 min read

This article will introduce you to the world of Progressive Web Apps, to the Preact framework and to Web APIs. It will guide you through 15 minutes of code to create your first Preact Progressive Web App! Status of PWAs today Progressive Web Apps are taking over the web! They are the future of…

Continue reading →

How to write the perfect React component (a Theodo standard)

October 23, 2017Clément Pasteau5 min read

What is the perfect React component? The component should have one purpose only, rendering The component should be small and easily understandable The component should rerender only if needed How to create the perfect React component? Logic Functions Atomic Design Selectors and Reselectors Functions…

Continue reading →

Load Scripts in Your React Bundle Asynchronously: Win at SEO!

July 23, 2017Félix Mézière3 min read

On my current project, the team (and our client 😱) realised our React website performance rating was below industry-standard, using tools like Google Page Speed Insights. As reported by the tool, the main cause for this are render-blocking scripts like Stripe, Paypal, fonts or even the bundle…

Continue reading →

React London 2017 Review

May 03, 2017Jack Lawrence-Jones6 min read

On a breezy day in March, I, along with three other TheodoUK-ers, attended React London 2017. Standing in the stark light of the Westminster sun that silhouetted the brutalist architecture of the QEII Centre, we admired the conference's production value - check out that flag! But would we actually…

Continue reading →

React London 2017 Review

May 03, 2017Jack Lawrence-Jones6 min read

On a breezy day in March, I, along with three other TheodoUK-ers, attended React London 2017. Standing in the stark light of the Westminster sun that silhouetted the brutalist architecture of the QEII Centre, we admired the conference's production value - check out that flag! But would we actually…

Continue reading →

React Native Layout Tricks

April 25, 2017Louis Zawadzki2 min read

The basics of positioning are pretty well explained in the official React Native documentation. However, it only covers simple cases such as centering items or putting one element on top, middle and bottom. Here I intend to cover some cases that are quite common but for which I couldn’t find a…

Continue reading →

React Native Layout Tricks

April 25, 2017Louis Zawadzki2 min read

The basics of positioning are pretty well explained in the official React Native documentation. However, it only covers simple cases such as centering items or putting one element on top, middle and bottom. Here I intend to cover some cases that are quite common but for which I couldn’t find a…

Continue reading →

Adding Drag & Drop to Your Web App, the Simple Way (demos)

April 24, 2017Pierre-Louis Le Portz5 min read

Drag & drop has become such a common feature on the web that people think it's a no-brainer for developers. A few months back, a client told me: "How can it be that hard, it's all over the internet!" and at that time I had no idea how to implement it. If you want to learn how it's done, you are in…

Continue reading →

Enzyme : Fast and Simple React Testing

April 04, 2017Ambroise Laurent7 min read

React has quickly climbed its way to being a top framework choice for Javascript single page applications. What's not to like? A declarative syntax for UI Virtual-DOM for performance The possibility of server-side rendering. There is however one area that could be improved; its built-in testing…

Continue reading →

How To Create an Authentication System and a Persistent User Session with React Native

March 01, 2017Fernando Beck10 min read

When developing a mobile app, it's common to have to build an authentication system. However, requiring the users to provide their username and password every time they launches the app, severely deteriorates the user experience. Lately, I have been working on a side project to build a mobile app…

Continue reading →

How to Load Your React Application Twice as Fast With Isomorphic Application

February 24, 2017Clément Escolano4 min read

How to improve the speed of a React application? React is an incredible framework. You may have already learnt it from another post. However, it is a client-side framework and as such, it has a few drawbacks: search bots do not see the page content * a user with disabled javascript cannot see the…

Continue reading →

Bootstrap a Cross Platform App in 10 minutes with React Native

December 09, 2016Grégoire Hamaide5 min read

Mobile Apps are a crucial part of our daily life. Yet, building a native mobile app for everyone requires to have knowledge in at least two languages: Java for Android and Swift or Objective-C for iOS. At least, that’s what I thought until I discovered React Native. What is React Native? React…

Continue reading →

Go With the Flow - A Static Type Checking Tool for JavaScript

November 30, 2016Jérémy Dardour3 min read

Static Type Checking is Life, Static Type Checking is Love Javascript has been a hot topic for web developers for some time now. It's fast, runs everywhere and offers many wonderful frameworks such as Angular and React. However, its lack of static typing can be a real pain for developers, bugs only…

Continue reading →

iOS Development from Linux

October 18, 2016Richard Miller6 min read

Unfortunately there's no way* to develop an iOS app without a Mac. Fortunately that doesn't mean you need to switch to a Macbook, there is another way. *No legal way. You might find articles suggesting installing OS X (or macOS as it's now branded) in a virtual machine, but this breaches Apple's…

Continue reading →

The Meetup Checklist

October 07, 2016Nathan Gaberel4 min read

Three months ago, we organized our first meetup in London: the React Native London meetup. Fourty React Native developers showed up at our office to discuss the use of Redux alongside React Native and a whole lot of other things. Since then we have organized two other such meetups. Overall, I think…

Continue reading →

Introduction to React: learn how to make your UI dynamic and awesome!

February 15, 2016Corentin de Boisset8 min read

What is React? According to its developers, React is a JavaScript library for creating user interfaces. It is designed to solve one problem: building large applications with data that changes over time. It has had an ultra-fast success lately and is used in many famous websites like Facebook…

Continue reading →

How to quickly improve Users “Loading” Experience?

December 03, 2015Nicolas Boutin2 min read

29th October 2015, Amsterdam, Netherlands @Velocity Conf At the last VelocityConf (http://velocityconf.com/devops-web-performance-eu-2015) in Amsterdam, we attended a very interesting talk about waiting phases. You have an app. Everything works, but it's slow and users are bored and some even leave…

Continue reading →

How to quickly develop a quiz component with ReactJS

November 20, 2015Benjamin Bonny4 min read

This is a quick tutorial showing how you can develop a simple and reusable component using ReactJS. The need We want a component that can display a quiz. We need to display a question, allow the user to select one or more answers, validate its answers and go to the next question. After all questions…

Continue reading →