In this article I am going to show you from scratch how to implement a searchable/filtered list of data in React.

Image for post
Image for post

The first thing we need to do is create a react project. To do this create a folder on your desktop which will contain the project. In addition, navigate to this folder in a terminal and then enter the below command.

npx create-react-app reactsearchable

Now open the project in your chosen code editor.


For many of my React-Native projects I like to create popup modals which contain extra information about the item that I either click or long-click, there is a very good package simply called “react-native-modal” which I use a lot for this functionality. So I thought since I have written an article in a while I would do a tutorial on how to create a modal for your react native application and add a few nice things to it to make it look presentable. Let’s get to it!

Image for post
Image for post

So firstly as always we will need a react native application, so navigate…


Recently I have been converting many of class components within my project to functional components the main reasoning for this is that recently I have been using and experimenting with hooks which are a fantastic addition to both React and React-Native. So I thought it would be cool to create an article explaining the “useContext” hook as well as write some simple example code.

Image for post
Image for post

What is useContext?

useContext is a hook that allows us to pass data to components that are multiple levels within the component tree without having to pass in props to each level of the component tree . An example…


Use local and URL-based videos in your React Native app

video clapper board used to record scene, take, and other production details
video clapper board used to record scene, take, and other production details
Photo by Donovan Silva on Unsplash

Get Started

The first thing you will need to do is to create a folder anywhere on your system. I like to use the downloads or desktop folder. Create a folder named rnvideoproject.


I thought it would be cool if i spent some time researching and learning some ES7 features and share that with you!

Image for post
Image for post

You can use an online code editor such as https://jsfiddle.net/ to write these statements in and then open the “web inspector” to see the output in the console.

PadStart

In incredibly simple terms “padStart" is used to “pad" or “concatenate" a string to the start of another string up to a specified length. So let’s say we have a variable like the below.

let myVar = “6";

We also have another variable…


Thank you following me on this small journey regarding the implementation of login functionality with React-Native. I am hoping this will be the last tutorial of the lot and it doesn’t drag out too much further. So in this tutorial I will be focusing on the “signin” endpoint within the API as well as testing this endpoint in postman.

Image for post
Image for post

Ok we shall start with opening up our API again and make a new “POST” endpoint named “signin” with a callback function.

app.post('/signin',function(req,res){});

I will again create 2 variables within this endpoint of email and password which will passed into…


Welcome to my fourth tutorial of the series, in this tutorial we will go through the SQL required for the signup method on our API.

Image for post
Image for post
A pug, one of my favourite dogs.

First off I must admit I did make a minor mistake in my previous tutorial when defining the connection pool, you will need to assign the “createPool” function to a variable like the below so we can refer to it later in our API calls.

const myPool =   mysql.createPool({user:process.env.USER,password:process.env.PASSWORD,database:process.env.DATABASE,host:process.env.HOST,connectionLimit:10});

Now when a user goes to signup for an account to use a service we first need to check if…


Welcome to my 3rd tutorial about how to implement login functionality using React-Native, NodeJS and MySQL, in this article we will go through creating our own config variables in Heroku to then use these in our API when we have published it, go over MySQL connection pooling and then start with integrating an empty route with a react-native project.

Image for post
Image for post

Ok so the first step is to use the “createPool” method of the “mysql” package just below all of the “require” statements. A connection pool is basically a cache of database connections which is maintained within the databases memory in order…


Welcome to part 2 of my tutorial the previous story finished with me mentioning the npm packages you will need to install, there will be another package you will need to install another for commnunicating between the database and API.

Image for post
Image for post
npm install mysql

This is a node.js driver for “mysql” which basically means you can run queries, create connection pools and do all sorts of other things with this package when connecting to a database. We will be using this to make queries to the database we will make on a Heroku app.


I have implemented login functionality for one of my personal projects so I thought it would be cool to do an article on it, letsss go!

Image for post
Image for post

NOTE: I will be using Heroku to setup the api so you will need to create a Heroku account, also, you will also need MySQL workbench to be able manage the database we will be using.

Our first step is to create a react native project and open this project using a code editor, I usually use Visual Studio code.

react-native init usersiginproject

Now in your code editor terminal run the below command to…

Alex

Software Developer in the UK. With a keen passion for React Native.

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