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!

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.

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…

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.

Once you have done this, open the terminal/command prompt and navigate to the folder you have just created. Once you have done this, enter the command react-native init rnvideoproject.

This will begin to create the React Native project and all the necessary files/folders. Once this has completed (it may take a few minutes) open the folder in your favourite code editor. I always use Visual Studio Code. Once you…

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

Happy new year by the way ☺

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.

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.

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.

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.

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.

Once you have installed this we will…