I started a repo to hold all my React Native assets that I share across my applications.


This repo is a location for my shared components that I use across my personal projects. Some of these components are more mature than others. I implement as many features as I need to accomplish my goals. If there is a feature missing please feel free to submit a pull request and I will gladly merge it in.

Modal Example

Animated Line on Text Input Example

Drop Shadow Text Input Example

There are a bunch of Material UI frameworks and ports for React Native.  I wanted some simple lightweight components for one of my projects.  So I made a few simple components that have a Material UI feel to them.  My most used component has to be the Text Input as it is used pretty much everywhere.  Here I will break down that component.


Full disclosure: DYMO has their own javascript based label printing module but there are two problems with it: 1) It does not work with Node.js and 2) it is minified and obfuscated.

So, I wrote my own library.  https://github.com/dsandor/dymojs

I searched for a suitable module and found something on npm but to my dismay it just wrapped the .NET SDK.  A little poking around and some network inspection I found that the folks at DYMO simply wrote a REST service that wraps their C# library and run it via mono on Mac and .NET on Windows.  I captured some calls to figure out how it worked and determined there are really only two calls that matter: GetPrinters and PrintLabel.

Both functions are exposed in the dymojs module.

Check out the tests directory in the repo for an example of printing a test label.


Posting my key bindings for sublime here.  These give you HOME, Shift+HOME, END, Shift+END functionality that is more sane than the defaults.  After 20 years of pressing Shift + Home to highlight from the cursor to the BOL in every editor ever created it is beyond frustrating to have to change that.  The only worse default key bindings I have ever used was TextPad on Windows.  (<<Shudder>>  That is an awful editor.)



I finally completed my old-school ceiling fan remote upgrade.  This mishmash of components allows me to operate my Hampton Bay ceiling fan and light through my Amazon Echo Dot.

By the way, all of this cost:

ESP8266 – $2.59
L78L33 – $0.18
Relay Board – $5.99
Old Remote & Old USB cable $0.00

For a total of only $8.76.

These remotes operate on an RF frequency that is a pain to control with an arduino even with a special RF board.  It operates just outside of the frequency of the common and cheap ones.  I did not want to spend too much money on this project so I opted to hard wire some female jumper cables so I can easily disconnect them.  I soldered these leads to the five buttons and ground.


The remote is connected to the relays on this sainsmart 5v relay board.

The relay board is powered by a 5v lead from an old USB cable and ground.  This provides the current to flip the relays.  The other three wires (white, purple, blue) are wired into three digital GPIO pins on the ESP8266 chip.

The ESP8266 is programmed as an Arduino and boots up as a web server with a tiny REST API built in to allow turning on and off the GPIO’s.  This little guy is powered via a 3v3 lead.  To get 3v3 I used an STI L78L33 voltage regulator attached to the USB power cord.  This gives me a perfect 3.3v to power the ESP8266.  The relay board expects the GPIO’s to go low (go to ground) in order to activate the switch so I have these GPIO’s normally high until the REST API is called and then the appropriate GPIO is pulled low for about 250ms.

Connecting the ESP8266 to your computer for programming.

Sorry for the terrible diagram.  To program the ESP8266 as an arduino you need to connect it to an FTDI or USB SERIAL interface.  I purchased one from Tayda here for about $2.

Connect to REST pin on the ESP8266 to the RST pin on the FTDI board.

Connect the GPI00 pin on the ESP8266 to the DTR pin on the FTDI board.

Next, connect TX on the ESP8266 to RX on the FTDI board and the RX on the ESP8266 to the TX on the FTDI.

Finally, connect 3V3 (3.3v) from the FDTI to the VCC on the ESP8266 and connect GND together on both boards.

Bridging the REST API to Alexa

In order to control these components from the Amazon Echo Dot I wrote a tiny little NodeJS module that allows me to spoof a Belkin WeMo device.  The module provides discovery and when a command is spoken to Alexa I simply make a GET request to this ESP8266 web server and request the correct GPIO to be toggled.

Check out the fauxmojs node module here.

The ESP8266 (Arduino) Code

Below is the code I used for the ESP8266.  (I will put this code on github soon.)


This article will describe how to program the ESP8266 IoT board to make HTTP Post requests to http://dweet.io.

Parts List

Breakout Board $0.22

ESP8266 Chip $2.59

USB FTDI Programmer $1.99

Total price: $4.80 and if you already have a USB FTDI board it’s only $2.81.

I’ll let that sink in for a moment.  For $2.89 you can connect to your Wifi and communicate to a server on the internet.  The ESP8266 that I bought from TaydaElectronics has 8 GPIO pins available for interacting with the physical world.  In this example we will not be using the GPIO.  Instead we will periodically send a message to dweet.io that the device is alive.  Below you will see images of all the parts.

ESP8266 ESP-12 Buy it here.

ESP8266 Breakout Board Buy here.

USB FTDI Adapter Buy here.

Connecting the ESP8266 to the FTDI adapter for programming.

After you have soldered the ESP8266 to the breakout board and installed the pin headers you are ready to program the micro controller.


Solder a female jumper wire to the 3V3 point on the FTDI connector.  Connect this to the VCC pin on the breakout board (lower left pin).
Solder a female jumper wire to the RTS point on the FTDI connector.  Connect this to the REST pin on the breakout board (top left pin).

Next, connect the rest of the pins from the FTDI header to the ESP8266.

DTR from the FTDI connects to GPI00.
GND connects to GND.
RXD on the FTDI connects to TXD on the Breakout Board (BB).
TXD on the FTDI connects to RXD on the BB.

This configuration is called the Programming Configuration.  When in this configuration your device will be detected by the Arduino IDE and can be programmed.


In the Arduino IDE select the ESP8266 board from the Tools | Board menu.  Also, after you connect the USB FTDI adapter to your computer you should then have a port named /dev/cu.SLAB_USBtoUART select that port.  If you do not have the ESP8266 board please go to the Board Manager in the Arduino IDE and download the board definition.

Open the Ardunio IDE INO file below or cut and paste the following code into the IDE.


Be sure to change the your-ssid, and your-password with the appropriate values for your wifi network.  Also, the your-thing-name will be the device name that you are posting data to on dweet.io.

When you compile and upload this to your device you can then unhook the REST and GPI00 pins then power cycle your ESP8266 by removing the GND and reattaching it.  Within about four seconds the dweet.io url for your device should start showing data: https://dweet.io/follow/your-thing-name


Configuring ReactJS from scratch

Walthrough of creating a ReactJS application from scratch with every step documented. This should be good enough for someone that is a total beginner.

The code for this post is located on github.

Techology Stack

Please download and install NodeJS and Webstorm to follow this tutorial webpack and react-materialized will be installed later.

Setup directory

I am going to create my project in the ~/Projects/bbq/bbqweb directory.

Create the folder & change into it.

Initialize the directory with npm.

Press return for each question. When complete you should have a package.json file in your directory.

Install react, babel, and webpack.

Install webpack

Install react

Check your setup

List your directory and you should now have a package.json file and a node_modules directory. If you list the contents of the node_modules directory you will find a bunch of directoies for all the components you just installed with those two npm i commands.

Create the .babelrc config file.

Create the following file in your new project directory with your favorite text editor. Make sure it is properly named. Windows users will need to make sure there is not a .txt file extension on the end after saving.

Create the index.html file.

This is the file that serves up the application to the browser and is the first resource loaded by the web browser. The file is basically only going to point to your webpack bundle.


This HTML file will not do anything yet. We still need to configure webpack and create the ReactJS index file. Don’t worry that there is no src/public/bundle.js file. We are going to get that created next.

Create the webpack.config.js

Babel is used to transpile the code we write for ReactJS into a more supported form of JavaScript. This lets us write modern code that would not be directly supported by all browsers. This file configures babel to understand ReactJS.

Configure npm to run and build your application

Edit your package.json file and edit the scripts section to look like mine below. You are adding the dev and build scripts to this file to make things a little easier.

Create the ReactJS entry point to your application index.jsx

Edit the new file named src/app/index.jsx, paste in the code below, and save it.

To run the application type npm run dev in the project root folder.  This will start a mini web server.  Just point your web browser to http://localhost:3000 and you should see your web application.