Javascript

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

Published Apr 26, 2023

Updated Mar 25, 2024

4 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

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.

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.

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.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Mark Shenouda
@MarkSShenouda @markshenouda

Setting Up React Navigation in Expo Web: A Practical Guide

Introduction We have come a long way from the days where we had to write different code for different platforms. Today, we can write code once and run it anywhere using technologies like React Native. React Native is a framework that allows us to write native apps for Android, iOS, and the web, using JavaScript and React. This makes it more interesting for teams that want to cut time/development cost to look into it. We recently launched our Expo-Zustand-Styled Components showcase app here at This Dot Labs. We also showcased how we can use expo, zustand, and styled-components to build a React Native app that can run on Android, iOS, and the web all in one codebase. In this article, we will be looking at React Navigation, how to configure Deep Linking to navigate to different screens, and handling dynamic routes paths in our app. We'll do this by looking at the challenges we had to deal with while working on our showcase app, especially when running the app on the web. Getting started Before we dive in, we need to install all the needed dependencies. Let's make sure we have the expo cli installed. We can do this by running the following command: ` We can now Initialize a new Expo app. We can do this by running the following command: ` Next, we need to install the navigation package, and since we are also building this app for the web, we need to install the needed dependencies. ` You can also leverage our expo-zustand-styled-component starter kit, which offers all configurations to build for IOS, Android, and the web. Setting up the navigation Let's set up our navigation routes. We will use native-stack for our navigation. We can do this by creating a navigation folder in our src folder, and creating an index.ts file in it. This will contain our root navigator. ` We can now import our Routes component in our App.tsx file and render it. ` Creating our screens We can now create our screens. We will create a screens folder in our src folder and a Home.tsx file in it which will contain our home screen. ` We can now import our Home component in our Routes component, and add it to our stack. ` We can now do the same for the other screens we want to add to our stack. Deep linking During the development of the expo showcase kit, we faced an issue on the web. When we navigate to a page, the URL in the browser still remains in the index. This is because we have not configured deep linking. Deep Linking is a way to navigate to different screens in our app using a custom URL link. This is very useful when we want to have individual URLs for each of our pages. This is also useful when we want to share a link to a specific screen in our app, saving the user time and energy in locating a particular page themselves. We can do this by creating a config file in our navigation folder with the following code. ` And then we can import our linking config in our App.tsx file and pass it to the NavigationContainer. ` We will come back to this config file later as we are going to deep dive into more complex routing, and how to handle it. Let's run our app now, and see how it works. Running the app Now, we can run our app. We can do this by running the following command: ` Press w to open it on a web browser, you should see something like this: We can see we are in our index page which is the home page, we can now navigate to the eg Profile page by clicking the button on the home page. To have your preferred page url path, we need to update the linking config with the appropriate page URL. Otherwise, deep linking will use the screen name as the page URL. Handling dynamic routes Say you want to have a page that can be accessed by different users. You can do this by passing the user id as a parameter in the URL. This is called dynamic routing. We can do this by updating our linking config file with the following code. ` This will allow us to access the Profile page by passing the user id as a parameter in the URL. We can now update our Profile page to get the user id from the URL and display it. ` During the development of our showcase app, we were faced with an issue. We needed to replicate a route /tree/main/a/b/c with a pattern as /tree/:branch/:path*, where the path is a/b/cjust like we have in other showcases. ` This didn't work as expected. But on further investigation, we found out that we have to manually handle this route in the getStateFromPath of the linking configuration file, by updating the state and returning it. ` With these configurations, we can now navigate throughout our app using the Link component from react-navigation/native. ` To make use of the path parameter in our Tree page: ` Conclusion In this article, we have seen how to set up our navigation in our expo app using react-navigation/native. We have also seen how to configure deep linking, which will help us to navigate through our app using the URL path. Next, we've learned how to handle dynamic routes, which will help us pass parameters in the URL path, and handle some special cases like the one we had with the Tree page. If you have any questions or run into any trouble, feel free to join the discussions going on at starter.dev or on our Discord....

Jun 5, 2023

5 mins

ReactReact Native

State of React Wrap-up | April 26, 2022

In this State of React event, the main topic focused on the React 18 release. Our panelists had a lot of thoughts on the release, its latest features, and the React working group. We also got an update on the state of Redux, and heard about our panelists' experiences at the 2022 React Miami conference. Here is a complete list of the hosts and panelists that participated in the online event. Hosts - Dustin Goodman, Engineering Manager, This Dot Labs, @dustinsgoodman - Dane Grant, Senior Software Engineer, This Dot Labs, @danecando Panelists - Jen Luker, Senior Staff Frontend Engineer, Nav, Inc., @knitcodemonkey - Ben Ilegbodu, Frontend Architect, Stitch Fix, @benmvp - Romello Goodman, Educator at MICA & Senior Engineer, Shopify, @mellogood - Kathleen McMahon, Senior Design Systems Engineer, Northwestern Mutual, @resource11 - Chantastic, DX Engineer, Chromatic, @chantastic - Mark Erikson, Senior Front-End Engineer, Replay, @acemarke You can watch the full State of React event on the This Dot Media YouTube Channel. React 18 is finally here!!! The conversation got started with the panelists sharing their thoughts on the latest release and why they felt like it was a little bit anti-climatic. After years of hard work and anticipation, the final release didn't generate as much noise in the community as previous versions of React. Some of the panelists believe that a lot of the blog posts and conversations about the latest changes happened months ago. This might have contributed to a quiet release this time around. There was also praise for the React 18 working group which did a great job of communicating with the community over the years about progress of the new version. They also tried to incorporate a lot of the community feedback into this latest release. The hard work and care of the React 18 working group also contributed to the quiet and stable release of this latest version. Does the anti-climatic release of React 18 signal that people are tired of React? There was a question posed to the group that maybe people were tired of React and that is why it was anti-climatic. But the panelists believe that this quiet release means that React is becoming more of a standard in the JavaScript ecosystem. They also brought up the good point that a lot of developers have already been working with some of the new features before the official release date. What do the panelists think about the new features of React 18? One of the panelists expressed interest in trying out the new useTransition hook which allows you to specify some states as a lower priority. But they also made the point that there wasn't an immediate need in their current projects to incorporate some of the newer features. Sometimes you are comfortable working in your codebase and it is fine to use the existing hooks that are already there. It might become a situation where new developers learning React for the first time will push for the use of these new features. This led to conversation about how React 18 helped solve a lot of problems that library authors were experiencing. For example, the new concurrent suspense and transition APIs will make it easier for loader indicators. But there was another hook mentioned that peaked the interest of some of the panelists. The useId hook generates a unique random ID that is consistent in server side and client side rendering. The panelists were excited about how easy it was to use and how it would improve on accessibility. They were also grateful that the name was changed from useOpaqueIdentifier to useId. Will the React working group continue? There are no current plans for the React working group, and it has been relatively quiet since the release. But the panelists do believe that this group set the tone for future major releases. As mentioned earlier, the React working group did a great job working with the community and creating a smooth transition from React 17 to React 18. What are some of the new features that developers need to learn before migrating to React 18? The first feature that was mentioned was the new root API. In React 17, this is how you would render your App component. ` But with React 18, you would use the new createRoot API. ` Another feature that was mentioned was flushSync which allows you to opt out of automatic batching. The State of Redux with Mark Erikson At this point of the conversation, we transitioned into a short powerpoint presentation on the state of Redux. Here are the key points mentioned in that presentation. - React-Redux v8.0 is now live. - Redux JS/TS templates for Create React App have been updated. - This new version works with React 16.8, 17, 18 and React Native - React-Redux v8.0 has been converted to TypeScript - Redux Toolkit 1.8 has a new "listener" side effects middleware which allows you to do powerful async/await workflows. - Redux 4.2.0 has officially marked createStore as deprecated Should people start migrating over to React 18 now or is there a waiting period? During this part of the conversation panelists talked about what is supported by React 18. For example, if your application uses Enzyme for testing, then it will not be supported by React 18. This would require you to rewrite all of your tests just to accommodate this latest version. Developers need to understand what is supported by this new version before migrating over. The panelists also pointed out that it will take a few months of the community working with React 18 before potential issues come to light. What was React Miami like? What was it like to have in person conferences again? I think Mark Erikson had the best quote to sum up the 2022 React Miami conference. "Warm, fun, awesome, tiring, weird" Well, that works for me. :) But in all seriousness, both Ben and Kathleen gave talks and enjoyed their time at the conference. The general consensus was that it was nice to connect with the community again in person, even if it was weird at times. Are there any new exciting courses or articles coming out for React 18? There was a lot of a great discussions in the React working group GitHub repository. A lot of authors were able to create great blog posts out of those discussions. There was also a quick shout out to Dustin and Dane for their involvement with the new React beta site. You can learn more about that in this Meta case study. The downside of React being unopinionated Mark brought up the issue he has seen with React developers not knowing what to use for styling, state management and build tools. Since React is unopinionated, there should be a place where developers can learn about the common technologies that work well with React. Luckily for us, This Dot Labs has created a tool to tackle this issue. react.framework.dev is a community driven list of resources for React. Accessibility matters In the closing conversation, there was a lot of discussion on how the new Rect 18 features will improve on accessibility. The panelists also felt like all developers should care more about creating well built accessible applications and take the time to learn about best accessibility practices. Conclusion This was an incredible conversation with a great group of panelists and I would highly suggest you watch the video. You can watch the full State of React event on the This Dot Media YouTube Channel....

May 3, 2022

6 mins

ReactReact Native

Redux Toolkit 2.0 release

Intro Redux Toolkit On December 4, 2023, Mark Erikson announced that Redux Toolkit 2.0 has been released! This change is considered a major version of the library and comes with breaking changes because, as the core team declared, it has been 4+ years since they released Redux tool kit, and they needed to clean up the code and standardize the way Redux apps are written. One of these changes is you no longer need to import the core redux library, RTK is a wrapper of it. In this article, we are going to focus on the main breaking changes and new features in RTK 2.0 Some general notes on the change * Standalone getDefaultMiddleware and getType removed * The package definitions now include an exports field to specify which artifacts to load, with a modern ESM build * UMD has been dropped * Typescript rewrite createSlice and createReducer One of the major changes is object syntax for createSlice.extraReducers and createReducer removed. In RTK 2.0, Redux team has opted to remove the 'object' form for createReducer and createSlice.extraReducers, as the 'builder callback' form offers greater flexibility and is more TypeScript-friendly, making it the preferred choice for both APIs So an example like this: ` Should be like this: ` Middlewares Now the configureStore.middleware must be a callback. That’s because before to add a middleware to the Redux store, you had to add it to the array of configureStore.middleware, but this is turning off the default middleware. Now it’s a callback function that should return an array with middlewares, the default middleware is being passed in the parameters of the callback function so the developer can include it or not in the middleware array like this: ` Enhancers Store enhancers are a formal mechanism for adding capabilities to Redux itself like adding some additional capabilities to the store. It could change how reducers process data, or how dispatch works. Most people will never need to write one. But similar to the middlewares, enhancers also must be a callback function that receives getDefaultEnhancers and should return enhancers back. ` autoBatchEnhancer In version 1.9.0, the Redux team introduced a new autoBatchEnhancer that, when multiple "low-priority" actions are dispatched consecutively. This enhancement aims to optimize performance by reducing the impact of UI updates, typically the most resource-intensive part of the update process. While RTK Query automatically marks most of its internal actions as "low-pri" users need to add the autoBatchEnhancer to the store for this feature to take effect. To simplify this process, configureStore has been updated to include the autoBatchEnhancer in the store setup by default, allowing users to benefit from improved performance without manual store configuration adjustments. AnyAction and UnknownAction The Redux TS types have historically exported an AnyAction type that lacks precise type safety, allowing for loose typology like console.log(action.whatever). However, to promote safer typing practices, they've introduced UnknownAction, which treats all fields beyond action.type as unknown, nudging users towards creating type guards with assertions for better type safety when accessing action objects. UnknownAction is now the default action object type in Redux, while AnyAction remains available but deprecated. RTK Query behavior They've addressed issues with RTK Query, such as problems with dispatch(endpoint.initiate(arg, {subscription: false})) and incorrect resolution timing for triggered lazy queries, by reworking RTKQ to consistently track cache entries. Additionally, they've introduced internal logic to delay tag invalidation for consecutive mutations, controlled by the new invalidationBehavior flag on createApi, with the default being 'delayed'. In RTK 1.9, the subscription status has been optimized syncing to the Redux state for performance, primarily for display in the Redux DevTools "RTK Query" panel. Conclusion This version is a major version of Redux Toolkit and it has a lot of breaking changes but what is important its source code has been cleaned and rewritten in TS will improve the developer experience for sure and on the final user experience as well, We discussed here only the headlines and the most used features but of course you can find all of the changes on The official Redux Github Releases page...

Mar 8, 2024

3 mins

ReduxJavaScript

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

In this episode of the Modern Web Podcast, Danny Thompson sits down with Ferdinand Como and Baptiste Leproux from Nuxt Labs to uncover the story behind Nuxt Studio, a tool that's transforming how developers and non-technical users interact with Nuxt applications. Ferdinand and Baptiste share how Nuxt Studio bridges the gap between developer customization and user-friendly content management. Built to empower agencies, freelancers, and their clients, Nuxt Studio combines powerful features like live previews, Vue component integration, and schema-driven forms to make managing content seamless. The conversation also explores the broader mission of Nuxt Labs—building sustainable open-source tools that enhance developer experience and meet real-world needs. With insights into the future of Nuxt Studio and its potential to scale for larger organizations, this episode is a must-listen for anyone passionate about innovation in web development. Chapters 1. Introduction and Setting the Stage (00:00:00) 2. The Vision Behind Nuxt Studio (00:03:10) 3. Nuxt Studio’s Core Features (00:08:45) 4. Challenges in Building Nuxt Studio (00:16:20) 5. Target Audience and Use Cases (00:22:35) 6. Sustainability in Open Source (00:29:00) 7. The Future of Nuxt Studio (00:35:10) 8. Nuxt Studio’s Role in the Nuxt Ecosystem (00:42:30) 9. Closing Thoughts and What’s Next (00:48:00) 10. Sponsor Shoutout and Wrap-Up (00:53:20) Follow Baptiste Leproux and Ferdinand Coumau Baptiste Twitter: https://x.com/_larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/ Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot: thisdot.co...

Nov 20, 2024

2 mins

VueNuxtJS

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

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

Intro

Problems This Kit Addresses

React Native Styling

Skip the Tedious Steps of Installing React Navigation

Defining a better organization pattern for components to scale your app

Conclusion

Mark Shenouda

You might also like

Setting Up React Navigation in Expo Web: A Practical Guide

State of React Wrap-up | April 26, 2022

Redux Toolkit 2.0 release

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Let's innovate together!

You might also like

Setting Up React Navigation in Expo Web: A Practical Guide

State of React Wrap-up | April 26, 2022

Redux Toolkit 2.0 release

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Intro

Problems This Kit Addresses

React Native Styling

Share Components Across Platforms

Skip the Tedious Steps of Installing React Navigation

Defining a better organization pattern for components to scale your app

Conclusion

Mark Shenouda

Setting Up React Navigation in Expo Web: A Practical Guide

State of React Wrap-up | April 26, 2022

Redux Toolkit 2.0 release

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Let's innovate together!

Setting Up React Navigation in Expo Web: A Practical Guide

State of React Wrap-up | April 26, 2022

Redux Toolkit 2.0 release

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau