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 to wherever you want your react native app to be in your terminal, I usually use the Downloads or Documents folder on Mac and enter the command. …


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.

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 have done this, open the terminal within Visual Studio Code and make sure you are in your folder root location. …


In this tutorial I will show you how to use the ES6 functionality of “.find" and “.findIndex".

Image for post
Image for post

The .find method is used to find the first element in an array that matches a certain criteria and if a certain criteria is met then that element/value is returned. If you wanted to do this using methods in ES5 you would use “indexOf" or “lastIndexOf", however, these methods only allow you to search for one value at a time.

.find

The .find method accepts 2 arguments. The first is the callback function which runs on every element in the array you are using the .find method with. …


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 ☺

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 below called “myPaddedStartString" which is used to invoke the “padStart" method of the String object to pad the letter “C" to the left of the “myVar" variable until the length of the “myPaddedStartString" method is 10 characters. …


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 the API through a request body from our app. …


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 the user already has already signed up, I usually do this via an SQL query selects the data from the user table where the email address sent in through the app form is equal to the email column in the database and get the count of this, if the email is found in the database that means the user has already signed, however, if no email address is found then we can assume this is a new user and we can go ahead with inserting the data given into the database. …


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 for the connections to be reused upon future requests (if anybody has a better explanation than that feel free to share in the comments). …


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.

Once you have installed this we will go on and create a Heroku app and then attach a database to this app. You will need to go to this link here and create an account with Heroku if you haven’t already. …


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 create 2 files that we will be using in the project. …


Hi everyone, it has been a loooong time since I have written an article and thought I would do another today regarding adding sound to a react native app. Let’s go!

Image for post
Image for post

Firstly, the documentation for this can be found here — https://www.npmjs.com/package/react-native-sound and has a lot of great stuff in it, but if you like the format of Medium feel free to stick around!

I will be using React-Native 0.60 version or greater so you will most likely need to do a pod install but I will talk about that later.

The first thing you will want to do is to open your command prompt/terminal and create a react-native project, to do this enter the below. …

About

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