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

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

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

How to Truncate Strings Easily with CSS

You'll often need to truncate text when working with user interfaces, especially when displaying content within a limited space. CSS provides a straightforward way to handle this scenario, ensuring that long text strings are cut off gracefully without affecting the overall layout. CSS Truncation Techniques Single-Line Truncation If you want to truncate a single line of text, CSS provides a simple solution. The key properties to use here are overflow, white-space, and text-overflow. ` Explanation of properties: * white-space: nowrap: This ensures the text stays on a single line, preventing wrapping. * overflow: hidden: This hides any content that overflows the container. * text-overflow: ellipsis: This adds the ellipsis (…) at the end of the truncated text. Multi-Line Truncation While truncating a single line of text is common, sometimes you may want to display multiple lines but still cut off the text when it exceeds a certain number of lines. You can use a combination of CSS properties such as -webkit-line-clamp along with the display and overflow properties. ` Live example: Explanation of properties: * display: -webkit-box: This is a legacy flexbox-like display property that works with the -webkit-line-clamp property. * -webkit-line-clamp: Specifies the number of lines to show before truncating. * -webkit-box-orient: vertical: Ensures the box is laid out vertically for proper multi-line truncation. * overflow: hidden: Prevents content overflow. * text-overflow: ellipsis: Adds an ellipsis after the truncated content. Why Use CSS for Text Truncation Over JavaScript Techniques? While it’s possible to truncate text using JavaScript, CSS is often a better choice for this task for several reasons. Let's explore why CSS-based truncation techniques are generally preferred over JavaScript. Performance Efficiency CSS operates directly within the browser's layout engine, meaning it doesn’t require additional processing or event handling as JavaScript does. When using JavaScript to truncate text, the script needs to run on page load (or after DOM manipulation), and sometimes, it needs to listen for events such as window resizing to adjust truncation. This can introduce unnecessary overhead, especially in complex or resource-constrained environments like mobile devices. CSS, on the other hand, is declarative. Once applied, it allows the browser to handle text rendering without any further execution or processing. This leads to faster load times and a smoother user experience. Simplicity and Maintainability CSS solutions are much simpler to implement and maintain than their JavaScript counterparts. All it takes is a few lines of CSS to implement truncation. In contrast, a JavaScript solution would require you to write and maintain a function that manually trims strings, inserts ellipses, and re-adjusts the text whenever the window is resized. Here's the JavaScript Truncation Example to compare the complexity: JavaScript Truncation Example: ` At the example above, we truncated the text to 50 characters which may be 1 line on large screens and 6 lines on mobile and in that case we will need to add more code to truncate it responsively. As you can see, the CSS solution we used earlier is more concise and readable, whereas the JavaScript version is more verbose and requires managing the string length manually. Responsiveness Without Extra Code With CSS, truncation can adapt automatically to different screen sizes and layouts. You can use relative units (like percentages or vw/vh), media queries, or flexbox/grid properties to ensure the text truncates appropriately in various contexts. If you were using JavaScript, you’d need to write additional logic to detect changes in the viewport size and update the truncation manually. This would likely involve adding event listeners for window resize events, which can degrade performance and lead to more complex code. CSS Example for Responsive Truncation: ` To achieve this in JavaScript, you’d need to add more code to handle the width adjustments dynamically, making it more complex to maintain and troubleshoot. Separation of Concerns CSS handles the presentation layer of your website, while JavaScript should focus on dynamic functionality or data manipulation. By keeping truncation logic within your CSS, you're adhering to the principle of separation of concerns, where each layer of your web application has a clear, well-defined role. Using JavaScript for visual tasks like truncation mixes these concerns, making your codebase harder to maintain, debug, and scale. CSS is purpose-built for layout and visual control, and truncation is naturally a part of that domain. Browser Support and Cross-Browser Consistency Modern CSS properties like text-overflow and -webkit-line-clamp are widely supported across all major browsers. This means that CSS solutions for truncation are generally consistent and reliable. JavaScript solutions, on the other hand, may behave differently depending on the browser environment and require additional testing and handling for cross-browser compatibility. While older browsers may not support specific CSS truncation techniques (e.g., multi-line truncation), fallback options (like single-line truncation) can be easily managed through CSS alone. With JavaScript, more complex logic might be required to handle such situations. Reduced Risk of Layout Shifting JavaScript-based text truncation risks causing layout shifting, especially during initial page loads or window resizes. The browser may need to recalculate the layout multiple times, leading to content flashing or jumpy behavior as text truncation is applied. CSS-based truncation is applied as part of the browser’s natural rendering flow, eliminating this risk and ensuring a smoother experience for the user. Conclusion CSS is the optimal solution for truncating text in most cases due to its simplicity, efficiency, and responsiveness. It leverages the power of the browser’s rendering engine, avoids the overhead of JavaScript, and keeps your code clean and maintainable. While JavaScript truncation has its use cases, CSS should always be your go-to solution for truncating strings, especially in static or predictable layouts. If you like this post, check out the other CSS posts on our blog!...

Sep 13, 2024

4 mins

CSS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

In this episode of Leadership Exchange, host Rob Ocel chats with Jerry Reghunadh, Senior Director of Enterprise Architecture at Data Nimbus, about leadership, AI adoption, and data-driven decision-making. Jerry shares his career journey, insights on leveraging tools like ChatGPT and Copilot, and strategies for building effective data pipelines. They explore how companies can avoid "analysis paralysis," adopt AI strategically, and evaluate new technologies to solve real-world problems. Tune in for practical advice on aligning innovation with business goals and staying competitive in a rapidly evolving tech landscape. Chapters 00:00 – Introduction 00:31 – Jerry’s Leadership Journey 02:01 – Discussing AI in Leadership 03:59 – Experimenting with AI Tools 06:24 – Overcoming Analysis Paralysis 09:18 – Importance of Early AI Adoption 13:12 – AI’s Impact on Efficiency 14:30 – Sponsor Message 16:26 – Setting Realistic Goals for AI 19:41 – Data Management and AI 23:09 – Is AI Just a Fad? 27:22 – Testing New Technologies 29:56 – Final Thoughts on AI 30:25 – Connect with Jerry 30:44 – Closing Remarks 31:20 – Outro Follow Jerry on Social Media Linkedin: https://www.linkedin.com/in/jerrymannel/ Sponsored by This Dot: thisdot.co...

Nov 18, 2024

1 min

AIEngineering Leadership

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

State of React Wrap-up | April 26, 2022

Setting Up React Navigation in Expo Web: A Practical Guide

How to Truncate Strings Easily with CSS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

Let's innovate together!

You might also like

State of React Wrap-up | April 26, 2022

Setting Up React Navigation in Expo Web: A Practical Guide

How to Truncate Strings Easily with CSS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

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

State of React Wrap-up | April 26, 2022

Setting Up React Navigation in Expo Web: A Practical Guide

How to Truncate Strings Easily with CSS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

Let's innovate together!

State of React Wrap-up | April 26, 2022

Setting Up React Navigation in Expo Web: A Practical Guide

How to Truncate Strings Easily with CSS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh