Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A dynamic programming language used in all sorts of web and mobile applications.
A cross-platform programming language designed to run robust applications on any device.
A UI toolkit used to build natively compiled applications from a single codebase.
A functional programming language that’s ideal for scalability, maintainability, and reliability.
A Customer Relationship Management (CRM) platform that seamlessly integrates with your business operations.
A high-performance programming language that makes it easy to build simple, reliable, and efficient software.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
Enforce consistent theme use throughout your application with a reusable Box component.
A theme is a series of configurable design constraints such as colors, typographies, font sizes, font weights, spacing scale, etc.
When it comes to design, consistency is key to making a final product that looks polished. Sharing the same color palette, spacing between elements, and breakpoints across all components goes a long way in creating a pleasant UI. You can, of course, achieve this without implementing a theme, but being constrained by your theme will make it harder to deviate from it. It will also make it easier to make decisions as you build. Instead of asking yourself if a support text looks better at 15px or 16px, you simply stick to your scale. In that case, it’s either a small text or a regular text.
The box component is the basic building block to implement our theme in our application. We can think of it as a `View` with special style props that will receive the keys on the theme object and map them to their corresponding values.
Let’s start by creating a new React Native app with expo-cli:
Follow the instructions on your console and pick the blank template under managed workflow.
After the installation completes, switch to your project’s folder and run
Now let’s add a theme file for our application:
We’ll be using the Styled System library to build our Box. Styled System provides a collection of utility functions that allows us to map styles to component properties based on a global theme object.
Let’s go ahead and create a file, system.js under src/utils to put some of the boilerplate necessary to create our components:
Now we can create a Box.js file under a components directory:
-- CODE language-jsx keep-markup --
/* components/Box.js */
import React from "react";
import styled from "@emotion/native";
import { viewProps } from "../utils/system";
import { useTheme } from "emotion-theming";
const StyledBox = styled.View(viewProps);
/* Since shadows in React Native consist of multiple properties,
we include this function to help us map them from one key to
multiple values. */
functionmapShadowToStyle(key, theme) {
const _obj = theme.shadows[key];
if (!_obj) return {};
return _obj;
}
exportconst Box = React.forwardRef((props, ref) => {
const { shadow, style, children, ...rest } = props;
const theme = useTheme();
const _shadow = shadow && mapShadowToStyle(shadow, theme);
return (
<styledbox ref="{ref}" {...rest}="" style="{[style," {="" ..._shadow="" }]}=""></styledbox>
{children}
);
});
Box.displayName = "Box";
Great, now let’s go back to our App.js and start using our Box component. But first, we have to make sure to include a ThemeProvider so that Styled System can pull in our global theme and apply it to the Box. Once we’ve done that we can put our newly created Box component into action:
-- CODE language-jsx keep-markup --
import { StatusBar } from "expo-status-bar";
import React from "react";
import { Text } from "react-native";
import { ThemeProvider } from "emotion-theming";
import theme from "./src/theme";
import { Box } from "./src/components/Box";
export default function App() {
return (
<themeprovider theme="{theme}"></themeprovider>
<box flex="{1}" alignitems="center" backgroundcolor="background"></box>
<box margintop="{6}" padding="{4}" backgroundcolor="primary" shadow="md"></box>
<text style="{{" color:="" "white"="" }}="">Hello from a box component!</text>
<statusbar style="auto"></statusbar>
);
}
Notice that the numerical values we’re using on the margin and padding properties don’t map to pixels, but instead use the values defined previously on our space scale:
-- CODE language-jsx keep-markup --
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
We can also make use of our color palette and reference it directly on the backgroundColor properties and even use the shadows on our theme!
It would certainly be nice if in the example above we could also use our theme to render the message. Since React Native requires us to place text inside Text components (unlike web browsers, where any element can have inner text), we can’t use our Box to replace Text components.
Personally, I don’t find it as useful to define a general purpose text component. Instead, I prefer defining typographic components that have a clear purpose, such as Heading, Content, etc.
Let’s look at a possible implementation for a Heading component:
-- CODE language-jsx keep-markup --
import styled from "@emotion/native";import React from "react";
import {
typography,
space,
color,
layout,
flexbox,
border,
fontSize,
fontWeight,
compose,
} from "styled-system";
exportconst textProps = compose(
typography,
space,
color,
layout,
flexbox,
border
);
exportconst StyledText = styled.Text(textProps);
exportfunctionHeading({
color = "text",
size = "xl",
fontWeight = "heading",
...props
}) {
return (
color={color}
fontWeight={fontWeight}
fontSize={size}
{...props}
/>
);
}
Heading.displayName = "Heading";
Great, now we have a Heading with some useful defaults that we can reuse in our application. Let’s go back to our App.js and include this Heading component:
-- CODE language-jsx keep-markup --
/* App.js */
...
<box flex="{1}" alignitems="center" backgroundcolor="background"></box>
<heading mt="{4}">I'm a Heading!</heading>
<box margintop="{6}" padding="{4}" backgroundcolor="primary" shadow="md"></box>
<text style="{{" color:="" "white"="" }}="">Hello from a box component!</text>
...
Going back to our app, we can see it in action:
These two components will give us a solid foundation to build on our theme and implement a design system throughout our application. From here, we could reuse them to implement layout primitives such as a Stack, Inline, or Grid, and typography components such as SubHeading, Content or TextLink. The theme object can also be extended with your brand colors, new shadows and much more. Hopefully you can use this foundation to create awesome components in your React Native app!
Using techniques like what is listed above, we have had the opportunity to address clients’ concerns and they love it! If you are interested in joining our team, please visit our Careers page.
We’d love to learn more about your project.
Engagements start at $75,000.