logo

Prodtype V2 Image Edit

Website Screen View

Legend of Nom Shop

Club Quarters Stay

Prodtype V1 Tasks Desktop

Festival RN My Schedule

Legend of Nom About

Festival Schedule Desktop

Club Quarter Pre Arrival Reservation Options

Prodtype V2 Docs Desktop

favicon

opengraph

Legend of Nom Contact

Festival Session

Prodtype V2 Document Edit

Club Quarters Reservations

Legend of Nom Home

Prodtype V2 Image Edit Desktop

Club Quarters Inbox

Festival My Schedule

Legend Of Nom Recipe

Prodtype V2 Tasks Desktop

Festival My Session

Club Quarters Account

Festival Share

Prodtype V2 Task Edit Desktop

Club Quarters Mobile Key

Prodtype V2 Tasks

Club Quarters Destinations

Prodtype V2 Task Edit

Caribe Royale

Prodtype V2 Schedule

Buena Vista Suites

Prodtype V2 Schedule Desktop

Prodtype V2 Dashboard

Envi Home

Prodtype V2 Dashboard Desktop

Harbour Mobile Key

Harbour Inbox

Harbour App

Harbour Rewards

Harbour Redeem

Harbour Booking

Harbour Profile

Harbour Preferences

Harbour Reservations

Virgin Temperature

Virgin TV Remote

Virgin TV Remote Channel List

Virgin Profile

Virgin ID Verification

Virgin Mobile Key Verify Device

Virgin Know Card

Virgin Inbox

Virgin Destinations

Async Button Component

 Content Loader Component

Prodtype V1 CMS

Input Options Component

Modal Options Component

Prodtype V1 Tasks

Prodtype V2 Documents

Festival Events

Festival RN

Prodtype Vision

Website Home

Legend of Nom Home Desktop

Club Quarters Welcome

Festival RN Schedule

Club Quarters Home

Website Project View

Legend of Nom Recipe Desktop

Berglund Home

Berglund Team

Berglund Expertise

Berglund Mission

Berglund Blog

Berglund Article

Berglund Contact

Prodtype V1 Documents

Prodtype V1 Document Edit

Runtriz Logo

import React, { useState } from "react";
import { ScrollView, View, Text, Modal, TouchableOpacity } from "react-native";
import tailwind from "twrnc";
import { FontAwesome5 } from "@expo/vector-icons";

const tw = (styles, customStyles = {}, name) => {
  const custom = name ? customStyles[name] : "";
  return tailwind`${styles} ${custom}`;
};

export const ModalOptions = (props) => {
  const { items, itemPress, selectedId } = props;
  const [DefaultShowModal, SetDefaultShowModal] = useState(false);
  const ShowModal = props.ShowModal || DefaultShowModal;
  const SetShowModal = props.SetShowModal || SetDefaultShowModal;
  return (
    <>
      <Modal
        transparent
        animationType="fade"
        presentationStyle="overFullScreen"
        visible={ShowModal}
      >
        <View style={tw("flex-1 w-full relative p-4 pb-12 min-w-[300px]")}>
          <View style={tw("absolute inset-0 bg-black opacity-50")}></View>
          <View style={tw("w-full mx-auto mt-auto lg:mb-auto max-w-[500px]")}>
            <ScrollView style={tw("w-full bg-white relative rounded-lg")}>
              <View style={tw("w-full max-h-[500px]")}>
                <View style={tw("w-full")}>
                  {items?.map((item, index) => {
                    return (
                      <TouchableOpacity
                        key={`ModalOptionItem-${item.id}`}
                        style={tw(
                          "w-full border-b border-gray-300 flex flex-row items-center min-h-10"
                        )}
                        onPress={() => itemPress(item)}
                      >
                        <View
                          style={tw("flex-1 px-2 flex flex-row items-center")}
                        >
                          <Text style={tw("text-black text-base")}>
                            {item.name}
                          </Text>
                        </View>
                        <View
                          style={tw("w-10 flex items-center justify-center")}
                        >
                          {selectedId === item.id && (
                            <FontAwesome5
                              name="check"
                              style={tw("text-black text-lg")}
                            />
                          )}
                        </View>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>
            </ScrollView>
            <View style={tw("pt-2 w-full h-12")}>
              <Button
                styles={{
                  button: "bg-white",
                  text: "text-black font-medium",
                }}
                text="Done"
                onPress={() => SetShowModal(false)}
              />
            </View>
          </View>
        </View>
      </Modal>
    </>
  );
};

export const Button = ({ text, onPress, styles = {} }) => {
  return (
    <TouchableOpacity
      style={tw(
        "w-full h-10 flex items-center justify-center bg-blue-500 rounded-lg",
        styles,
        "button"
      )}
      onPress={onPress}
    >
      <Text
        style={tw(
          "text-center text-white text-base leading-none",
          styles,
          "text"
        )}
      >
        {text}
      </Text>
    </TouchableOpacity>
  );
};

export default function App() {
  const items = [
    {
      id: "trail",
      name: "Trial",
    },
    {
      id: "beta",
      name: "Beta",
    },
    {
      id: "basic",
      name: "Basic",
    },
    {
      id: "premium",
      name: "Premium",
    },
  ];
  const [Value, SetValue] = useState("basic");
  const [ShowModal, SetShowModal] = useState(false);
  return (
    <View style={tw("flex-1 w-full p-4 flex justify-center items-center")}>
      <Button text="Launch Modal Options" onPress={() => SetShowModal(true)} />
      <ModalOptions
        {...{
          ShowModal,
          SetShowModal,
          items,
          itemPress: (item) => SetValue(item.id),
          selectedId: Value,
        }}
      />
      <View style={tw("py-4 flex flex-row items-center")}>
        <Text style={tw("font-bold text-lg")}>Selected:</Text>
        <Text style={tw("text-lg px-2 capitalize")}>{Value}</Text>
      </View>
    </View>
  );
}


ModalOptions

My personal website to share progress, experience and code





Website

Projects

## Expo 
- @prodtype/modal-options
- [Expo Snack](https://snack.expo.dev/@prodtype/modal-options)

## Dependencies
 - [Tailwind React Native Classnames **twrnc** 3.3.3](https://github.com/jaredh159/tailwind-react-native-classnames)
 - [@expo/vector-icons 12.0.0",](https://docs.expo.dev/guides/icons/)



React Native Modal Options

Linkedin


## Dependencies
- [Required dependency here](https://github.com/facebook/react-native)




Twitter

New Component

The Runtriz Native Platform is an agnostic white-labeled native application built for hotels. The app services the hotel guest and offers digital functionality to discover brand destinations, book rooms, and access all in-room features from their mobile device. These services include: 
- Skipping the line to check-in and out 
- Mobile key access to unlock the door
- Adjust the thermostat before you arrive
- Dim the lights without having to get out of bed
- Order room service 
- Chat with hotel staff

# Motivation
The motivation for building the Runtriz Native Platform is to offer an affordable option for hotels. Custom native development can get very expensive, especially if you want to serve all users and the various devices. At Runtriz, we've had over ten years of experience building a web platform, and we want to bring that experience to native platforms. 

# Goal
The goal is to build an agnostic platform that can be white-labeled for any hotel brand and handle the various integrations for loyalty, property management, locks, point of sale, housekeeping, and in-room devices.

# Technology Stack
- React Native with Expo
- Mobix State Tree
- AWS Lambda

# Progress
## Completed
- Loyalty Login
- Guest's Hotel Services
- Property Management Reservations
- Destinations
- Brand Information
- Notifications
- Mobile key
## Objectives
- In-room devices
- Check-in
- Check out

# Status
This project is in active development.

Innovative digital solutions for hotels, casinos and hospitality enterprises

Runtriz Native Platform

Site

## Expo
- @prodtype/async-button
- [Expo Snack](https://snack.expo.dev/@prodtype/async-button)

## Dependencies
- [Tailwind React Native Classnames **twrnc** 3.3.3](https://github.com/jaredh159/tailwind-react-native-classnames)
- [@expo/vector-icons 12.0.0",](https://docs.expo.dev/guides/icons/)

React Native Async Button


Intro here...

# Motivation
Motivation here... 

# Goal
Goal here...

# Technology Stack
- Tech stack here

# Progress
## Completed
- Completed here 

## Objectives
- Objective here... 

# Status
Current status here...







Resume

## Runtriz, Los Angeles 
**VP of Engineering**
*July 2018 - Present*
- Work directly with the CEO and CTO
- Plan & execute the idea to delivery 
- Lead the product team’s internal and external engineers
- Align Product with Sales, Marketing & Customer Success
- Measure & Improve product cycles
- Architected Native App development
- Integrated in room automation

**Lead Product Manager/Engineer**
*January 2014 - July 2018*
- Manage team through agile process and automation
- Analyze idea to delivery product cycle to increase releases
- Established BDD to align business and technical teams
- Architected service framework to increase delivery cycles

**Infrastructure Architect/DevOps**
*January 2014 -  July 2018*
- Delivered micro service environment
- Deployed zero downtime infrastructure with AWS
- Implemented continuous integration & delivery with Gitlab-CI
- Increased infrastructure capacity to handle 25x
- Migrated dedicated Rackspace servers to AWS
- Migrated development & production environments to Docker

**Lead Developer**
*January 2012 - December 2014*
- Delivered Staff Application for Caesars Entertainment
- Integrated Laravel and Ember framework
- Delivered branded white label applications 
- Created vagrant environment for developers

**Web Developer**
*August  2010 -  January 2012*
- Migrated server side apps to single page apps
- Designed hotel client’s application
- Diagnosed and patched production errors 

## Freelancer, Los Angeles 
*May  2008 - December 2010*
- E-commerce website for retail clothes 
- Guest registration application
- Social platform for deals on dining





Experiences

Your productivity workspace

Every workflow consists of content, tasks, communication, and scheduling. Prodtype will encapsulate these features to enable productive workflows.

# Motivation
I use Apple notes for its offline capabilities but cannot efficiently collaborate with others. I use Trello to manage software objectives, but it is hard to prioritize personal tasks. I use Notion to collaborate on notes with team members, but it is hard to stay organized. These tools are great at one specific role but lack when wanting to be productive and available in various scenarios. I want to build a platform that combines all the pros and eliminates the cons. 

# Goal
The goal for Prodtype is to focus on the core requirements to be productive in content, tasks, communication, and scheduling with the ability to extend. The core must be offline first, collaborative, and extensible. It needs to work on mobile, tablet, and desktop so that workflows can be accessible anywhere and anytime.

# Technology Stack
- Expo, React Native, React Native Web
- Electron Desktop App
- Mobx State Tree
- AWS Serverless Architecture

# Progress
## Completed
- Tasks
- Content
- Chat
- Scheduling
## Objectives
- Website
- Automation
- Twitter Scheduling

# Status
Active


Prodtype V2


## Expo 
- @prodtype/input-options
- [Expo Snack](https://snack.expo.dev/@prodtype/input-options)

## Dependencies
 - [Tailwind React Native Classnames **twrnc** 3.3.3](https://github.com/jaredh159/tailwind-react-native-classnames)



React Native Input Options

Screens

Components

Save everything, organize, automate and integrate with any application

Content management software that is offline, sharable, and organized. Each content can have automation for repetitive tasks, and users can get notified for review or spaced learning.

# Motivation
I want to build an offline-first note application that can automatically organize content based on its type and set up automation for specific content that will remind me to review and learn. 

I currently have to use several different applications with repetitive tasks done manually. For example, I add words to a notion table to improve my vocabulary but need to add definitions and review them manually. I can add articles to Pocket App and read them later, but save that reference to other content manually. I can take screenshots of my applications to display on my website but manually upload them to my computer, then to AWS S3 and add each record to the database. 

# Technology Stack
- Nextjs
- Mobx State Tree
- AWS Serverless Architecture

# Progress
- Continuing this project in React Native as Prodtype v2

# Status
Abandoned


Prodtype V1 - Content Management

## Expo
- @prodtype/content-loading
- [Expo Snack](https://snack.expo.dev/@prodtype/content-loading)

## Dependencies
 - [Tailwind React Native Classnames **twrnc** 3.3.3](https://github.com/jaredh159/tailwind-react-native-classnames)


React Native Content Loader 

 

:root {
  /** colors **/
  --background: #F3F4F6;
  --onBackground: #222222;
  --surface: #FFFFFF;
  --onSurface: #222222;

  --primary-50: #F0FCF9;
  --primary-100: #C6F7E9;
  --primary-200: #8EEDD1;
  --primary-300: #5FE3C0;
  --primary-400: #2DCCA7;
  --primary-500: #17B897;
  --primary-600: #079A82;
  --primary-700: #048271;
  --primary-800: #016457;
  --primary-900: #004440;

  --onPrimary-50: #016457;
  --onPrimary-100: #016457;
  --onPrimary-200: #004440;
  --onPrimary-300: #004440;
  --onPrimary-400: #FFFFFF;
  --onPrimary-500: #FFFFFF;
  --onPrimary-600: #FFFFFF;
  --onPrimary-700: #FFFFFF;
  --onPrimary-800: #FFFFFF;
  --onPrimary-900: #FFFFFF;

  --secondary-50: #FFFBEA;
  --secondary-100: #FFF3C4;
  --secondary-200: #FCE588;
  --secondary-300: #FADB5F;
  --secondary-400: #F7C948;
  --secondary-500: #F0B429;
  --secondary-600: #DE911D;
  --secondary-700: #CB6E17;
  --secondary-800: #B44D12;
  --secondary-900: #8D2B0B;

  --onSecondary-50: #CB6E17;
  --onSecondary-100: #CB6E17;
  --onSecondary-200: #B44D12;
  --onSecondary-300: #B44D12;
  --onSecondary-400: #FFFFFF;
  --onSecondary-500: #FFFFFF;
  --onSecondary-600: #FFFFFF;
  --onSecondary-700: #FFFFFF;
  --onSecondary-800: #FFFFFF;
  --onSecondary-900: #FFFFFF;

  --supporting-50: #FFE3E3;
  --supporting-100: #FFBDBD;
  --supporting-200: #FF9B9B;
  --supporting-300: #F86A6A;
  --supporting-400: #EF4E4E;
  --supporting-500: #E12D39;
  --supporting-600: #CF1124;
  --supporting-700: #AB091E;
  --supporting-800: #8A041A;
  --supporting-900: #610316; 

  --neutrals-50: #F7F7F7;
  --neutrals-100: #E1E1E1;
  --neutrals-200: #CFCFCF;
  --neutrals-300: #B1B1B1;
  --neutrals-400: #9E9E9E;
  --neutrals-500: #7E7E7E;
  --neutrals-600: #626262;
  --neutrals-700: #515151;
  --neutrals-800: #3B3B3B;
  --neutrals-900: #222222; 

  /** typography **/
  --headlineFamily: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --subtitleFamily: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --bodyFamily: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --captionFamily: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --buttonFamily: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}



**Languages:** Typescript, Javascript, Nodejs, PHP, BASH, SQL, HTML5/CSS
**Amazon Web Services:** CF, ELB, ECS, EC2, RDS, SQS, Lambda, DynamoDB 
**Frameworks:**  React Native, Expo, Serverless, Tailwindcss, Emberjs, Laravel
**Clients:** Virgin Hotels, Caesars,1Hotels, Best Western, Club Quarters Hotels, Rosewood
**Integrations:** Lutron, Crestron, Infor, Cendyn, Honeywell, Alice, Agilysys, Guestware, Kyc, RGuest, Airship, Hotsos, Assa Abloy, Salto
**Tools:** Terraform, Fastlane, Behat, Gherkin, Swagger, Phantomjs, Selenium
**Services:** Gitlab CI Runner, Shippable, Saucelabs, Digital Ocean

Skills

Tool focused on the immediate tasks and gets out of your way

A system to prioritize tasks daily. 

# Motivation
I want a task manager that automatically archives completed tasks and help me improve my prioritization system. 

# Technology Stack
- Nextjs
- React Native & Electron Native Web Apps
- AWS Serverless Architecture 

# Progress
- Continuing this project in React Native as Prodtype v2

# Status
Abandoned


Prodtype v1 - Prodtype Task Management

## University of Southern California (USC)
**Los Angeles, CA**
*December 2010*
**Bachelor of Science**
- Business Administration 
- Entrepreneurship



Education

React Native application for scheduling artists you want to see and share the schedule with friends

Schedule and organize the artist you want to see at a festival and share with friends.

# Motivation
I want the experience of building a native first application that can target both native platforms and web browsers. 

# Technology Stack
- React Native with Expo
- Mobx State Tree
- Firebase

# Progress
## Completed
- Event List
- Event Schedule
- Add/Remove Artist
- My Schedule
- User Sign up / Log in
- Viewing user's schedule (backend not implemented)
## Objectives
- Save schedule to firebase
- Share schedule with other users

## Status
This project has been paused.

## Links
- [Expo web application](https://prodtype.com/_/festivals)
- Native has not been released




Festival Scheduler Native

import React, { useState, useEffect } from "react";
import { View, Text, ActivityIndicator } from "react-native";
import tailwind from "twrnc";

const tw = (styles, customStyles = {}, name) => {
  const custom = name ? customStyles[name] : "";
  return tailwind`${styles} ${custom}`;
};

export const Loading = (props) => {
  const { isLoading, styles, children, color, skelton } = props;
  if (isLoading) {
    return (
      <View
        style={tw(
          "flex-1 w-full flex justify-center items-center",
          styles,
          "container"
        )}
      >
        {skelton ? (
          skelton
        ) : (
          <ActivityIndicator color={color || tw("text-gray-500").color} />
        )}
      </View>
    );
  } else if (children) {
    return <>{children}</>;
  } else {
    return <></>;
  }
};

export const timeout = async (ms: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, ms);
  });
};

export default function App() {
  const [isLoading, SetIsLoading] = useState(true);
  const fetching = async () => {
    await timeout(3000);
    SetIsLoading(false);
  };
  useEffect(() => {
    fetching();
  }, []);
  return (
    <View style={tw("flex-1 w-full p-4 flex justify-center items-center")}>
      <View style={tw("flex-1 w-full")}>
        <Text style={tw("font-bold text-2xl pb-2 px-2")}>Default Loader</Text>
        <Loading isLoading={isLoading}>
          <View
            style={tw("w-full py-2 flex items-center justify-center flex-1")}
          >
            <Text style={tw("font-bold text-2xl")}>Done!</Text>
          </View>
        </Loading>
      </View>
      <View style={tw("flex-1 w-full")}>
        <Text style={tw("font-bold text-2xl pb-2 px-2")}>Skelton Loader</Text>
        <Loading
          isLoading={isLoading}
          skelton={
            <View
              style={tw(
                "w-full p-2 flex flex-1 border border-gray-200 shadow rounded"
              )}
            >
              <Text style={tw("font-bold text-2xl h-8 bg-gray-100")}></Text>
              <Text
                style={tw("mt-2 text-xs font-medium h-24 bg-gray-100")}
              ></Text>
            </View>
          }
        >
          <View
            style={tw(
              "w-full p-2 flex flex-1 border border-gray-200 shadow rounded"
            )}
          >
            <Text style={tw("font-bold text-2xl")}>Header</Text>
            <Text style={tw("mt-2 text-xs font-medium")}>
              Eaque ipsa quae ab illo inventore veritatis et quasi. Laboris nisi
              ut aliquip ex ea commodo consequat. Temporibus autem quibusdam et
              aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
              voluptates repudiandae sint et molestiae non recusandae.
            </Text>
          </View>
        </Loading>
      </View>
    </View>
  );
}


ContentLoading

Web application for scheduling artists you want to see and share the schedule with friends

Schedule and organize the artist you want to see at a festival. 

# Motivation
I want to share the building of this application in public and offer my experiences. Also, the current options for sharing schedules get lost in messages. I want a hub to see my friends' schedules so I don't miss the opportunity to share the moment. 

# Technology Stack
- Nextjs
- Redux with Sagas
- Progressive Web Application
- React Native - Wrap web application for better offline experience

# Progress
## Completed
- Single page scheduling
- Add/Remove artist
- Adjust start and end times to prioritize artists with the same set time
- View my schedule
## Objective
- Sharing

## Status
This project has been archived with the focus of going [native first](https://deanmraz.com/projects/festival-native).

## Links
- [Web Application](https://prodtype.com/app/festival/events)






Festival Scheduler Web Application

I am the VP of Engineering @runtriz, and I like to work on projects in public.

Dean Mraz

Social

Gluten-free recipes that are fun and delicious

[legendofnom.com](https://legendofnom.com/)



Legend Of Nom

import React, { useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import tailwind from "twrnc";

const tw = (styles) => {
  return tailwind`${styles}`;
}

export const InputOptions = ({items, selectedId, onChange, label}) => {
  const [Selected, SetSelected] = useState(selectedId);
  return (
    <View style={tw("w-full")}>
      {label && (
        <View style={tw("pb-1")}>
          <Text
            style={tw("text-sm font-medium capitalize")}
          >
            {label}
          </Text>
        </View>
      )}
      <View
        style={tw("w-full")}
      >
        {items?.map((item) => {
          return (
            <TouchableOpacity
              key={`input-option-${item.id}`}
              activeOpacity={0.5}
              onPress={() => {
                SetSelected(item.id);
                if (onChange) {
                  onChange(item.id);
                }
              }}
            >
              <View
                style={tw(
                  `mt-4 w-full rounded-lg border-2 border-gray-200 flex flex-row min-h-24 overflow-hidden bg-white py-4 px-6 ${
                    Selected === item.id
                      ? "border-blue-500"
                      : "border-gray-200"
                  }`
                )}
              >
                <View style={tw("flex-1 flex justify-center")}>
                  <View style={tw("w-full")}>
                    <Text style={tw("font-medium text-black text-lg")}>
                      {item.name}
                    </Text>
                  </View>
                  <View style={tw("w-full")}>
                    <Text style={tw("text-gray-500 text-sm")}>
                      {item.description}
                    </Text>
                  </View>
                </View>
                <View style={tw("pl-4 flex justify-center items-end")}>
                  <Text style={tw("font-medium text-black text-lg")}>
                    {item.price}
                  </Text>
                  <Text style={tw("text-gray-500 text-sm")}>
                    {item.interval}
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
};

export default function App() {
  const items = [
    {
      id: "trail",
      name: "Trial",
      description: "7 day trial, no credit card required",
      price: "$0",
      interval: "7 days",
    },
    {
      id: "beta",
      name: "Beta",
      description:
        "Beta pricing is a flat fee per month. Future cost will include storage size.",
      price: "$6",
      interval: "/mo",
    },
    {
      id: "basic",
      name: "Basic",
      description: "10GB of storage. $0.25 per GB-month thereafter",
      price: "$12",
      interval: "/mo",
    },
    {
      id: "premium",
      name: "Premium",
      description: "100GB of storage. $0.25 per GB-month thereafter",
      price: "$24",
      interval: "/mo",
    },
  ];
  const [Value, SetValue] = useState("basic")
  return (
    <View style={tw("flex-1 w-full p-4 flex justify-center items-center")}>
      <InputOptions label="subscription" items={items} selectedId={Value} onChange={(id) => SetValue(id)} />
      <View style={tw("py-4 flex flex-row items-center")}>
        <Text style={tw("font-bold text-lg")}>
          Selected:
        </Text>
        <Text style={tw("text-lg px-2 capitalize")}>
          {Value}
        </Text>
      </View>
    </View>
  );
}


InputOptions

import React, { useState } from "react";
import {
  TouchableOpacity,
  View,
  Text,
  ActivityIndicator,
  Platform,
} from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
import tailwind from "twrnc";

const tw = (styles, customStyles = {}, name) => {
  const custom = name ? customStyles[name] : "";
  return tailwind`${styles} ${custom}`;
};

export const Button = (props) => {
  const { text, loadingText, icon, isLoading, onPress, onLongPress } = props;
  const styles = props?.styles || {};
  return (
    <TouchableOpacity
      style={[
        tw("rounded-lg", styles, "container"),
        {
          ...(Platform.OS === "web"
            ? {
                // outlineColor: getColor("primary-400"),
                outlineColor: "transparent",
                outlineWidth: 2,
              }
            : {}),
        },
      ]}
      onPress={onPress}
      onLongPress={onLongPress}
    >
      <View
        style={[
          tw(
            "w-full h-10 flex items-center justify-center bg-blue-500 rounded-lg",
            styles,
            "button"
          ),
        ]}
      >
        {isLoading ? (
          <View style={tw("w-full flex flex-row justify-center items-center")}>
            <ActivityIndicator
              color={tw("text-white", styles, "loading").color}
            />
            {loadingText && (
              <Text
                style={tw(
                  "text-center text-white text-base pl-2",
                  styles,
                  "loadingText"
                )}
              >
                {loadingText}
              </Text>
            )}
          </View>
        ) : (
          <View style={tw("flex flex-row items-center", styles, "content")}>
            {text && (
              <Text
                style={tw(
                  "text-center text-white text-base leading-none",
                  styles,
                  "text"
                )}
              >
                {text}
              </Text>
            )}
            {icon && (
              <FontAwesome5
                solid={true}
                name={icon}
                style={tw("text-white p-2", styles, "icon")}
              />
            )}
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

export const timeout = async (ms: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, ms);
  });
};

export default function App() {
  const [isLoading, SetIsLoading] = useState(false);
  return (
    <View
      style={tw(
        "flex-1 w-full px-4 py-12 flex justify-between items-center mx-auto max-w-[400px]"
      )}
    >
      <View style={tw("w-full")}>
        <Text style={tw("font-medium text-gray-400 pb-2 px-2")}>Text</Text>
        <Button
          text="Submit"
          isLoading={isLoading}
          onPress={async () => {
            SetIsLoading(true);
            await timeout(3000);
            SetIsLoading(false);
          }}
        />
      </View>
      <View style={tw("w-full")}>
        <Text style={tw("font-medium text-gray-400 pb-2 px-2")}>Icon</Text>
        <Button
          icon="arrow-right"
          isLoading={isLoading}
          onPress={async () => {
            SetIsLoading(true);
            await timeout(3000);
            SetIsLoading(false);
          }}
        />
      </View>
      <View style={tw("w-full")}>
        <Text style={tw("font-medium text-gray-400 pb-2 px-2")}>
          Text & Icon
        </Text>
        <Button
          text="Submit"
          icon="arrow-right"
          isLoading={isLoading}
          onPress={async () => {
            SetIsLoading(true);
            await timeout(3000);
            SetIsLoading(false);
          }}
        />
      </View>
      <View style={tw("w-full")}>
        <Text style={tw("font-medium text-gray-400 pb-2 px-2")}>
          Custom Loading Text
        </Text>
        <Button
          text="Submit"
          loadingText="Submitting..."
          isLoading={isLoading}
          onPress={async () => {
            SetIsLoading(true);
            await timeout(3000);
            SetIsLoading(false);
          }}
        />
      </View>
      <View style={tw("w-full")}>
        <Text style={tw("font-medium text-gray-400 pb-2 px-2")}>
          Custom Styling
        </Text>
        <Button
          styles={{
            button: "bg-pink-500",
            text: "text-orange-200",
            loading: "text-teal-200",
          }}
          text="Submit"
          isLoading={isLoading}
          onPress={async () => {
            SetIsLoading(true);
            await timeout(3000);
            SetIsLoading(false);
          }}
        />
      </View>
    </View>
  );
}


AsyncButton

Blog

Business website for The Berglund Group law firm

[www.berglundgroup.com](https://www.berglundgroup.com/)






The Berglund Group

Mobile Screen

Large Screen