With React Navigation

Image for post
Image for post
Photo by Samuel Zeller on Unsplash

In this tutorial, we will be walking through the primary features and setup of the React Navigation, Drawer Navigator.

If you haven’t already, I recommend taking a look at Intro to React Navigation before reading this tutorial. It covers initial configuration and setup for this project.

Currently we have a view that looks something like this:

Source code: here

Image for post
Image for post

To get started with drawer navigation, you need to install the package react-navigation-drawer so we can import createDrawerNavigator. Run the following in your terminal:

expo install react-navigation-drawer

Now that we have the react-navigation-drawer installed, we can start writing the actual application.

Please note, that you can also remove the react-navigation-tabs package from the package.json


With React Navigation

Image for post
Image for post
Photo by Annie Theby on Unsplash

In this tutorial, we will be walking through the primary features and setup of the React Navigation, Bottom Tab Navigator.

Before reading through this tutorial — if you haven’t already, I recommend taking a look at Intro to React Navigation. It will cover the initial configuration and set up for this project.

Currently, we have a view that looks like this:

Source code: here

Image for post
Image for post

Right now we have no styling, icons, or customization of any kind. In the last tutorial, Intro to React Navigation, we created our screens without any navigation options.

In addition to the app view, our ScreenOne.js and BottomTabNavigator.js


An easy to use view controller for React Native

Image for post
Image for post
Photo by Alexander Andrews on Unsplash

The base of this example project has been built with the Expo CLI. For simplicity’s sake, we’re starting with the blank JavaScript template.

For any questions relating to the Expo CLI, please reference their excellently maintained documentation. I will also be posting about how/why to use Expo in the near future.

When you start your project and open the simulator (our project, will be using the iOS simulator for iPhone 11 Pro Max), you’ll see this:

Image for post
Image for post

This is the default view, with no bells or whistles. From here we can fully develop our own screens and navigation, from scratch.

To get started with React Navigation, we will need to install the additional dependencies that aren’t generated by the blank Expo template. …


A quick custom snippet guide

Image for post
Image for post
Octocat from Atom homepage

First, you’ll need Atom installed:

  1. Type cd ~/.atom into your terminal
  2. Enter atom . to open your .atom files in the Atom editor
  3. Open the snippets.cson file view in your editor:
Image for post
Image for post

4. Create your custom snippet with the following structure:

'.source':
'name':
'prefix': 'typed text'
'body': 'snippet output'

Single-line Snip Example (JavaScript)

'.source.js':
'Single-line Snippet':
'prefix': 'singleLineSnippet'
'body': 'function snippet() {console.log("In One Line!")}'

This will generate function snippet() {console.log("In One Line!")} when you begin typing singleLineSnippet and hit enter in a JavaScript file.

Before enter :

Image for post
Image for post

After enter :

Image for post
Image for post

Multi-line Snip Example (JavaScript)

'.source.js':
'Multi-line Snippet':
'prefix': 'multiLineSnippet'
'body': """
function snippet() {
console.log("This")
console.log("Took")
console.log("Multiple")
console.log("Lines") …


You stop contributing when you stop learning

Image for post
Image for post
Photo by NordWood Themes on Unsplash

I wrote an article a couple of weeks ago about prioritization and understanding goals in a broader context. A big part of remaining goal-oriented, while still navigating a complex problem or project, is being able to learn quickly and becoming comfortable with not knowing.

Get Comfortable Not Knowing

At the start of any project, anticipating there will be problems you don’t yet know how to solve is incredibly helpful. This anticipation allows you to approach all tasks — even the ones you’re familiar with — flexibly and with less discouragement as you progress.

Often, relearning a familiar task reveals quicker or more efficient solutions to problems you didn’t anticipate. Better implementation of a familiar component will often compensate for deficiencies elsewhere. …


In software development and in life

Image for post
Image for post
Photo by Romain Vignes on Unsplash

While many of the analogies I use relate to software development, I’ve found the concepts outlined here to be useful in other contexts. I feel that it is helpful to acknowledge that though the concepts are applicable in a software context, I have developed these perspectives primarily outside of the realm of software.

Every project comes with a unique set of challenges and obstacles. To ensure success, it’s important that you approach any given project with a clearly defined purpose.

Separate Signal from the Noise

Often people talk about goals in general terms: “I want to build something that changes the way we _______.” …

About

Sean Watters

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store