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.
Live demos allow developers to preview components without requiring them to go through the manual process of downloading, installing, and displaying each component individually.
While Snack.expo.io is a great service that can render react-native on the web, it can be frustratingly slow and unreliable. Instead, we can render react-native components with react-native-web, and use react-live to allow live editing. React-live loads faster, is more reliable, and allows much more control over both the editor and the component preview.
To start, clone this simple react-native-web template:
https://github.com/codypearce/react-native-web-simple
-- CODE keep-markup --
git clone git@github.com:codypearce/react-native-web-simple.git
cd react-native-web-simple
npm i
npm start
The app should be running on port 8080. If there are no errors, “Hello World” will be displayed on the page.
Note: The key to running react-native on the web is found in the webpack.config.js file. The code below tells webpack to replace all instances of react-native with react-native-web components.
-- CODE language-jsx keep-markup --
...
**resolve: {
/* auto resolves any react-native import as react-native-web */
alias: {
"react-native": "react-native-web"
},
extensions: [".web.js", ".js"]
},**
...
You should now be able to add react-native components to App.js. However, not all react-native components are supported yet. All supported components are listed here: https://github.com/necolas/react-native-web.
We'll need a component to display in our live demo, so let's recreate this image of Toad using React Native.
We can recreate Toad using only <view></view> components. So first, we need to import <view></view> at the top of App.js.
-- CODE language-jsx keep-markup --
import { View } from ‘react-native’
Next, replace <text>Hello World</text> in the App.js render method with the JSX below:
-- CODE language-jsx keep-markup --
<view style="{styles.body}"></view>
<view style="{styles.Toad}"></view>
<view style="{styles.Toad__head}"></view>
<view style="{[styles.Toad__spot," styles.toad__spot__left]}=""></view>
<view style="{[styles.Toad__spot," styles.toad__spot__top]}=""></view>
<view style="{[styles.Toad__spot," styles.toad__spot__right]}=""></view>
<view style="{styles.Toad__face}"></view>
<view style="{styles.Toad__faceFeatures}"></view>
<view style="{[styles.Toad__eye," styles.toad__eye__left]}=""></view>
<view style="{[styles.Toad__eye," styles.toad__eye__right]}=""></view>
<view style="{[styles.Toad__mouth]}"></view>
<view style="{styles.Toad__tongue}"></view>
React Native requires all styles to be created using StyleSheet, so we need to import the StyleSheet component from react-native.
-- CODE language-jsx keep-markup --
import { View, Stylesheet } from ‘react-native’
Add the following styles to the bottom of the page.
-- CODE language-jsx keep-markup --
/* Functions Mode looks like: */
const styles = StyleSheet.create({
body: {
height: "400px",
display: "flex",
alignItems: "center",
justifyContent: "center",
overflow: "hidden"
},
Toad: {
position: "relative"
},
Toad__head: {
width: "300px",
height: "275px",
backgroundColor: "white",
borderWidth: 4,
borderColor: "black",
borderBottomLeftRadius: 175,
borderBottomRightRadius: 175,
borderTopRightRadius: 250,
borderTopLeftRadius: 250,
position: "relative",
overflow: "hidden" },
Toad__spot: {
height: "125px",
width: "125px",
backgroundColor: "#c4292b",
borderRadius: "100%",
position: "absolute" },
Toad__spot__left: {
height: "140px",
left: "-50px",
top: "80px"
},
Toad__spot__top: {
left: "88px",
top: "0px" },
Toad__spot__right: {
height: "140px",
right: "-50px",
top: "80px" },
Toad__forehead: {
height: "4px",
width: "135px",
backgroundColor: "black",
position: "absolute",
left: "87px",
bottom: "110px",
zIndex: "10",
borderRadius: "100%"
},
Toad__face: {
height: "160px",
width: "150px",
backgroundColor: "#f0caa5",
position: "absolute",
left: "75px",
bottom: "-50px",
borderBottomLeftRadius: 80,
borderBottomRightRadius: 80,
borderTopRightRadius: 60,
borderTopLeftRadius: 60,
borderWidth: 4,
borderColor: "black" },
Toad__faceFeatures: {
width: "100%",
height: "100%",
position: "relative",
borderBottomLeftRadius: 80,
borderBottomRightRadius: 80,
borderTopRightRadius: 40,
borderTopLeftRadius: 40 },
Toad__eye: {
height: "35px",
width: "15px",
backgroundColor: "#222",
position: "absolute",
borderRadius: "100%", top: "35px" },
Toad__eye__left: {
left: "30%" },
Toad__eye__right: {
left: "60%" },
Toad__mouth: {
height: "40px",
width: "60px",
backgroundColor: "#9f4148",
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30,
borderTopRightRadius: 4,
borderTopLeftRadius: 4,
position: "absolute",
left: "calc(75px - 32px)",
top: "95px",
overflow: "hidden" },
Toad__tongue: {
height: "30px",
width: "60px",
backgroundColor: "#d26b74",
borderRadius: "100px",
marginTop: "20px"
}
});
Now, you should see Toad recreated with <view>.</view>
First install:
-- CODE keep-markup --
npm install react-live
Then import all the available components in App.js:
-- CODE language-jsx keep-markup --
import {
LiveProvider,
LiveEditor,
LiveError,
LivePreview
} from 'react-live'
Next, comment out the Toad code and add the following to the render method below the commented out Toad code:
-- CODE language-jsx keep-markup --
<liveprovider code="<strong>This is a live Component</strong>"></liveprovider>
<livepreview></livepreview>
<liveeditor></liveeditor>
<liveerror></liveerror>
You should see the bolded "This is a live Component" text with the JSX below it. If you edit the JSX, the text or component will update in real time. The <liveprovider></liveprovider> simply takes a string of JSX in the code prop and renders that JSX in the <livepreview> </livepreview>component.
The <liveeditor> </liveeditor>component displays the string of JSX as JSX.
Finally, the <liveerror></liveerror> component will show any errors that occurred.
Uncomment the Toad code from above, copy it, and create a string at the top of the page with the full Toad code. Add the Toad styles above the JSX:
-- CODE language-jsx keep-markup --
const toad =`
const styles = StyleSheet.create({
/* full style object */
})
<view style="{styles.body}"></view>
<view style="{styles.Toad}"></view>
<view style="{styles.Toad__head}"></view>
<view style="{[styles.Toad__spot," styles.toad__spot__left]}=""></view>
<view style="{[styles.Toad__spot," styles.toad__spot__top]}=""></view>
<view style="{[styles.Toad__spot," styles.toad__spot__right]}=""></view>
<view style="{styles.Toad__face}"></view>
<view style="{styles.Toad__faceFeatures}"></view>
<view style="{[styles.Toad__eye," styles.toad__eye__left]}=""></view>
<view style="{[styles.Toad__eye," styles.toad__eye__right]}=""></view>
<view style="{[styles.Toad__mouth]}"></view>
<view style="{styles.Toad__tongue}"></view>
Now update the <liveprovider></liveprovider> with the toad JSX string.
-- CODE language-jsx keep-markup --
<liveprovider code="{toad}"></liveprovider>
<livepreview></livepreview>
<liveeditor></liveeditor>
<liveerror></liveerror>
There should be a syntax error shown at the bottom of the page within the <liveerror></liveerror> component because react-live is trying to evaluate the JSX inline and running into a style object. To fix this, first add the noInline prop to the <liveprovider></liveprovider>:
-- CODE language-jsx keep-markup --
<liveprovider code="{toad}" noinline=""></liveprovider>
<livepreview></livepreview>
<liveeditor></liveeditor>
<liveerror></liveerror>
Then wrap the Toad JSX in a render() within the string:
-- CODE language-jsx keep-markup --
const toad = `
const styles = StyleSheet.create({
// full style object
})
render(
<view style="{styles.body}"></view>
<view style="{styles.Toad}"></view>
<view style="{styles.Toad__head}"></view>
<view style="{[styles.Toad__spot," styles.toad__spot__left]}=""></view>
<view style="{[styles.Toad__spot," styles.toad__spot__top]}=""></view>
<view style="{[styles.Toad__spot," styles.toad__spot__right]}=""></view>
<view style="{styles.Toad__face}"></view>
<view style="{styles.Toad__faceFeatures}"></view>
<view style="{[styles.Toad__eye," styles.toad__eye__left]}=""></view>
<view style="{[styles.Toad__eye," styles.toad__eye__right]}=""></view>
<view style="{[styles.Toad__mouth]}"></view>
<view style="{styles.Toad__tongue}"></view>
);
`;
Scrolling to the bottom of the page again you will see another error “ReferenceError: View is not defined”. By default, react-live does not have references to react-native components, so we need to provide react-live with a reference to both <view> and StyleSheet to render properly. We can do this with the scope prop which allows the code passed into the code prop access variables and components.</view>
Update <liveprovider></liveprovider> as follows:
-- CODE language-jsx keep-markup --
<liveprovider code="{toad}" noinline="" scope="{{" view,="" stylesheet="" }}=""></liveprovider>
<livepreview></livepreview>
<liveeditor></liveeditor>
<liveerror></liveerror>
You should see Toad nested inside the <livepreview> and all the Toad JSX and styles below. Since this is a live component, you can change the styles or JSX see them update in real time. Try changing Toad's colors or head size, and watch the image update in real time. Check out the react-live docs to learn how to customize the LiveEditor and LivePreview </livepreview>https://github.com/FormidableLabs/react-live.
---
At FullStack Labs, we pride ourselves on our ability to push the capabilities of cutting-edge frameworks like React Native. Interested in learning more about using React Native on the web? Contact us.
We’d love to learn more about your project.
Engagements start at $75,000.