Introducing the new Expo, Styled Components, and Zustand Starter Kit

Intro

We are delighted to announce our brand new Expo React Native starter kit to our Starter.dev kits collection. We built this starter kit to enable our team members who work mostly with web technologies to make an easy transition for them to work on native mobile apps with their current knowledge without any extra effort.

This Starter kit contains:

• Expo a React native wrapper.
• Styled Components lets you write actual CSS in your JavaScript-like web.
• Zustand A small, fast, and scalable barebones state-management solution.
• TypeScript JavaScript with syntax for types.
• Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
• React Navigation Routing and navigation for Expo and React Native apps.

Problems This Kit Addresses

React Native Styling

One of the most difficult things for React Native beginners is its styling system. It's difficult for people who come from a web background because it’s not similar to CSS at all. It has different units, and each property accepts a different value. For more information visit React Native Style Documentation styled-components/native fixed that problem, you literally write CSS like for web and it translates the CSS code to a React Native Styles without any extra effort.

Share Components Across Platforms

Thanks to the Expo team, we can use the React Native components cross-platform, even with frameworks like Next.js. This saves teams a lot of work. Instead of building the same feature twice, one for the web and the other for the mobile apps, we only build it once.

Let me show you an example:

A lot of libraries in the React ecosystem use the setImmediate() API (like react-native-reanimated). It’s a method used to break up long-running operations, and run a callback function immediately after the browser has completed other operations such as events and display updates, which Next.js doesn't polyfill by default. To fix this, you can polyfill it yourself.

First, we need to install set immediate package

yarn add setimmediate

Then import it in the app root pages/_app.js

import 'setimmediate';

Use the @expo/next-adapter in the next.config.js

const { withExpo } = require('@expo/next-adapter');

module.exports = withExpo({
  /* next.config.js code */
});

Add image support with next-images

const { withExpo } = require('@expo/next-adapter');
const withImages = require('next-images');

module.exports = withExpo(
  withImages({
    projectRoot: __dirname,
  })
);

Add font support with next-fonts

const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');

module.exports = withExpo(
  withFonts({
    projectRoot: __dirname,
  })
);

Now you can use your Expo React Native components in Next.js site.

Skip the Tedious Steps of Installing React Navigation

We use React Navigation in almost every project we work on, it’s a necessary piece of the app, so we already set it up so you can start your new app quickly.

We also grouped the screens under the src/screens directory, where each screen has its own folder with its related files.

Defining a better organization pattern for components to scale your app

We structured this project from our experiences with big React projects. One challenging part of using React is that it gives the developer a lot of freedom to choose their own file structure. However this is not good on a bigger app scale, because every developer has their own way to organize the files, and with a big React project that a lot of developers are working on, we usually end up with a mess. We figured this structure out from the previous projects we built.

Imagine we have a component, and this component has different files like, testing, …etc

Our way to structure the components is:

Each component has its own folder:

components/
	FirstComponent/
	SecondComponent/

Each folder has the component files

components/
	FirstComponent/
		FirstComponent.tsx
		FirstComponent.test.tsx
		FirstComponent.stories.tsx

// …etc
	SecondComponent/
		SecondComponent.tsx
		SecondComponent.test.tsx
		SecondComponent.stories.tsx

// …etc

The problem now is the importing sentences gonna be ugly like this:

import FirstComponent from ‘./components/FirstComponent/FirstComponent’;

So it solve this, we add in each Component folder an index.ts file with the following:

export { default } from ‘./FirstComponent’;

Now the folder structure will look like this:

components/
	FirstComponent/
		Index.ts	<- To solve the import sentences 
		FirstComponent.tsx
		FirstComponent.test.tsx
		FirstComponent.stories.tsx

// …etc
	SecondComponent/
		Index.ts	<- To solve the import sentences 
		SecondComponent.tsx
		SecondComponent.test.tsx
		SecondComponent.stories.tsx

// …etc

Now the import sentence will be much cleaner:

import FirstComponent from ‘./components/FirstComponent’

This can help keep your files and folders organized, and help scale your codebase with time.

Conclusion

This starter kit is the result of a lot of experience we gained on React projects we built internally and for clients. It helps you to start quickly without going through the tedious task of installing and setting up dev tools, and at the same time, it helps your app scale more easily.