In many apps, you will see some suggestions listed right under the search bar as you type. To implement this feature in React Native, there is a library called “react-native-google-places-autocomplete”. However, it is not that difficult to implement a simple version of the same feature. If you can build your own search bar, you will have more flexibility in terms of styling and functionality. In this article, I will show you how to build your own search bar with autocomplete functionality.

My Environment

  • ReactNative : 0.63.4

Notes about potential compile issues on iOS and Android

  • iOS:
    If you try to run the app on a simulator…


Hosting a React app on AWS S3 with SSL could be a bit tricky to set up. In this article, I will show you how you can configure everything.

Prerequisites

  • You have aws-cli installed

My Environment

  • aws-cli version 1.17.9

1. Create an S3 bucket

First, create an S3 bucket on AWS. You can use the default settings for most of the options except for the permissions. Uncheck the “Block all public access” option to allow anyone to access your website.


I have been using nodebrew as the node version manager, however, I recently decided to switch to nvm as it is more popular. This article is a note of what I needed to do.

My Environment

  • macOS Catalina: Version 10.15.4

1. Generate a list of global packages installed via the current version of node

First, as current global npm packages belong to the specific version of node installed via nodebrew, you need to take a note of it so you can re-install everything later on. The following command lets you make a JSON file of the list of your global packages. The right side of > is the destination of the output file…


Managing multiple profiles for AWS CLI is super easy and it comes in really handy when you have to deal with multiple AWS accounts or IAM user accounts. In this article, I will show you how you can easily use AWS CLI commands using different AWS accounts.

Prerequisites

My Environment

  • macOS Catalina: Version 10.15.4

1. Create a named profile

In order to create a named profile, you can use the following command. Your terminal will ask your AWS Access Key ID, AWS Secret Access Key, Default region name and Default output…


The UI of what we are building

In React Native, you can create a horizontal snap ScrollView using just simple calculations. In this article, I will show you how easy it can be. The final source code is available on my GitHub.

Prerequisites

  • I will be using Typescript in this article

My Environment

  • React Native: 0.61.5

1. Project Setup

Create a project with the following steps.

// Generate a project
react-native init HorizontalSnapScrollViewExample
// Enter into the project directory
cd HorizontalSnapScrollViewExample
// Add typescript
npm i -D typescript react-native-typescript-transformer
// Add…


Today, I am going to share my knowledge to create a handy reusable custom text component in React Native. The final source code is available on my Github.

Prerequisites

  • I will be using Typescript in this article

My Environment

  • React Native: 0.61.5

1. Generate and setup a React Native project

First, generate a new React Native project with the following code.

react-native init CustomTextExample

Next, add the necessary dependencies.

// Add typescript
npm i -D typescript react-native-typescript-transformer
// Add eslint with typescript plugin
npm i -D eslint
@typescript-eslint/parser @typescript-eslint/eslint-plugin


Photo by Silas Köhler on Unsplash

Recently, I had a situation where I need to create private and public keys with the .pem extention to build an authentication server using NodeJS and JWT. In this article, I will show you how I did it.

0. My Environment

  • macOS Catalina: Version 10.15.1

1. Update OpenSSL

First, update the OpenSSL to use the latest features.

Since High Sierra, Mac adopts LibreSSL instead of OpenSSL by default. In this article, I stick with the classic OpenSSL. First, check the version of OpenSSL with the following command.

// Check OpenSSL version
openssl version

This should return something like OpenSSL 1.0.2t 10 Sep…


In this article, I will show you how to manually set up a Gatsby project with Typescript and Netlifyy CMS without the gatsby-starter-netlify-cms starter.

Prerequisites

  • You have already installed gatsby-cli

1. Setting up a Gatsby project

First, generate a brand new gatsby project with the following command.

gatsby new project-name

2. Add Typescript stuff

Next, add gatsby’s typescript plugin and linting stuff into the gatsby project.

// Move into the project directory
cd project-name
// Add typescript plugin
yarn add gatsby-plugin-typescript
// Add typescript itself and linting stuff
yarn add -D typescript gatsby-plugin-tslint tslint-loader tslint

After installing the dependencies, you need to specify the plugins in the gatsby-config.js file.

// gatsby-config.js


As I described in this article, syncing your WordPress data between the production server and the local server used to be a painful task. Using docker-compose and Wordmove, however, it would be much easier. In this article, I will summarize how I manage WordPress websites.

My Environment

  • OS: macOS Mojave Version 10.14.5

Requirements

  • Already installed docker, docker-compose and Wordmove.
    Run docker -v && docker-compose -v to check if you already have installed Docker and docker-compose.


In this article, I will summarize how I transfer WordPress from the live server to the local environment including the database.

Note: Make sure to back up everything if you try the same thing.

0. Expected Case & Preconditions

Expected Case

  • Already developed a WordPress them on the local environment

Preconditions

  • The local WordPress version is the same as WordPress on the server

1. Export the database on phpMyAdmin

First, export the database on phpMyAdmin in order to import it later on the local…

Kenta Kodashima

I'm a Full-Stack Developer based in Vancouver. Personal Interests: Books, Philosophy, Piano, Movies, Music, Studio Ghibli.

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