Software Testing Series Introduction

Hello everyone,

Today, I am going to introduce a new tutorial series about software testing. Software testing is a pretty big topic (with frameworks and scenarios) but I am thinking about writing the following list. Hopefully it might help you to figure something about the topic and they can be useful notes for myself :).

Continue reading Software Testing Series Introduction

React-Native Example #1 Animated Question Screen


In this post, I created an example animated question page. I preferred react-native animatable library for animation. You can use this library or you can find alternative one. You can access updated example application from this link. I shared example project codes on github. You can check it end of this post.

What did I do in this post? I created a simple Question page and I integrated animation library. Questions are coming with animation and when user choose answer, next question is coming with same scenario. If questions finish or user chose wrong answer, result screen is coming with animation. I have a timer too. If times up, again result screen is coming with animation.

What did I use in this example?

React-Native 0.61.4

Expo 3.17.18

Visual Studio Code 1.41.1

I started from create a project step because, this post is first expo example in this blog. Let’s get start.

For create a new project, I used expo init “Project Name” on command prompt. After this command template list came, I chose blank template for my example project. The screenshot is as follows.

After template select, expo suggested to me yarn but I’m using npm. Because of this, I continued with npm.

After selecting the package manager, I waited like 2 mins for a create project. This time can be different for you because of your connection speed or etc. Project create result screenshot is as follows.

Now, my project is ready for development. Before I start, I installed an animation library. You can use as follows command for this and you can check animations from this link.

npm install react-native-animatable –save

After this step, I’m starting to develop my application via VS Code. You can use another alternatives. Firstly, I created Pages folder on root and Styles folder in available assets folder. I used this folders for my example. I didn’t explain a style codes. You can check or update from github links. Let’s start to question page.

I created QuestionPage.js in Pages folder. This example is Single Page application. Because of this, I will call my page from App.js file. The screenshot is as follows.

Before, I was using redux for state management but I used hooks in this example. My variable descriptions are as follows.

resultScreen: I triggered result screen via this variable.

answerAnimation: This variable for animation shape. I shared animation shapes in this post.

wrongAnswerStyle: When quiz start, all answers’ color is same. After user chose, I’m changing wrong answers color. Because user should see what’s correct or wrong. This variable is using for this.

trueAnswerStyle: This is like a wrongAnswerStyle. But this color for correct answer. You can cancel or change this variable.

timerVisible: After user choose an answer, I used timer area hidden with this variable. Because I didn’t show result screen after this. I showed to user correct/wrong answer 2 – 3 seconds.

controlAnswer: After user chose answer, I set users answer to this variable.

trueAnswer: When Question comes, I set true answer for current question in this variable. After user’s chose, I checked with controlAnswer/trueAnswer If this two are same, user gets +10 point and next question appears, If they are different, it goes to next question.

secondCounter: This is for timer.  For example; I did 90 seconds. You can change quiz time with this variable.

restartGame: If this variable is true, All other variables will be default value for new game.

clickableStatus: This is for waiting time. If user is looking correct/wrong answers, second answer can’t appear via this variable.

landingScreenProperty: After finished quiz, this variable will be true and user will see result screen.

nextQuestionSecond: This variable for show correct/wrong answers. I did 3 second for this.

I tried to explain variables in this step, you can change this variables or you can update all of them.

Next step for scenario. I tried to explain scenario with codes. First code part is as follows.

This code block is working after user’s choose. Firstly, I changed ClickableStatus because I don’t want a second answer for same question. I did disabled property true for TouchableHightlight

Now, I can check answer. User can’t check another one. If user’s answer is correct, I changed selected answer’s background color and I gave 3 second for waiting before next question. You can change this color. After all of this process, I showed 2 second loading screen before next question. If user’s answer is wrong, I changed all of answers background color. Correct one is green, others are red. After this, I hidden timer and 3 seconds later I showed result screen.

Before I said, If answer is correct, loading screen is coming. I decided that with this code block. If answer is correct, landingScreenProperty will be true and this code block triggered.

Firstly, I updated controlAnswer with default and changed timer value with 0 in this block. Before I decided nextQuestionSecond 3. After 3 second, everything changed with default and everything ready for new question. You can show points or etc. in this 3 second.

This screenshot is last screenshot for methods. I prepared first if case for timer. If resultscreen didn’t show and user didn’t answer yet, this timer triggered.

Second if case for restart game. If user click restart button, this block triggered to restart game.

I showed methods to you. Now, let’s check screens. First screen is Question screen. The screenshot is as follows.

I used view and animated.view in this screen. Animated. came from my library. If you used different or if you didn’t include this library, this won’t come on your project. You can see how can you add this library in your project.

The next screen is result page. The screenshot is as follows.

I added a button on result screen. I didn’t write score but if you want you can add quickly. If user click this button, restartGame value will be true and application will be restart.

The final screen is loading (or landing) screen. I just added static text on this screen. The screenshot is as follows. This page is optional, If you want you can remove this page.

Finally, I wrote a few if case for trigger this pages. The screenshot is as follows.

You can check example as follows link;

Expo: exp://


The screenshots;

Thank you.

How to Send Push Notification via Firebase


This post is about Push Notification (For android because I just tried on android device). I will be send push notification to my virtual device end of this post. I used firebase for send.

I skipped create a new project part. Let’s get start. Firstly, I created new project on firebase portal. I opened and clicked Get Started button for start create process. The screenshot is as follows.

After this, I clicked Add Project button on the next page and a new pop-up form opened on my browser. I entered project name and selected analytics location. Finally, I accepted term’s of use before clicking to create button. Now, we have a firebase project. The pop-up form’s screenshots is as follows.

After created project result screen will be as follows.

I clicked Continue in this pop up and then clicked Cloud Messaging button in menu of the left hand side in the next page.

After created a new firebase project, I returned to my react-native project. I opened my project with VS Code. (You can use different Ide after this step.) I opened AndroidManifest.xml (The location is /android/app/src/main/) in react-native project and copied package name. The screenshot is as follows.

In this step I will add firebase to my react-native application. After copied my package name, I returned firebase page. Before I created a new project but I need to enter package name from my react-native application. You can think like an relation. I paste my package name on this screen. The screenshot is as follows.

When I click, firebase gave to me configuration file. I downloaded this file and copied /android/app folder. The screenshot is as follows.

After copied this file, I included react-native firebase package to my react-native application. Firebase library is as follows. You should run this command on command prompt.

npm install –save react-native-firebase

react-native link react-native-firebase

When the library included, I configured some documents for this package. Let’s get start to configuration. Firstly, I added two new library in /android/app/src/main/java/com/pushnotificationexample/ file. The added libraries as follows.

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;

And then I went GetPackages section in same file and added two new line as follow.

new RNFirebasePackage(),
new RNFirebaseMessagingPackage()

The screenshot of the changes is as follows.

Now, I finished my updates and closed After close this file I opened /android/settings.gradle and I added the following new two line in this document.

include ‘:react-native-firebase’
project(‘:react-native-firebase’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-firebase/android’)

The screenshot of changes are as follows.

Latest modification is in build.gradle file. (in /android/app/) I added following line in this file.

implementation “”

The screenshot of changes are as follows.

Google wants two new changes. They are for firebase SDK.

For first node should change build.gradle file. (in the /android/ folder.) The screenshot of up to date file is as follows.

Last two lines are for the other build.gradle file. (in the /android/app/ folder) The screenshot of up to date is as follows.

If you finished updates, you can skip next step. It’s not important for now. The screenshot is as follows.

After skip this step, I returned my react-native project and opened App.js file. This file in the root directory. I opened this file and added as follows line. This line for firebase library.

import firebase from ‘react-native-firebase’

After added this library, I added AsyncStorage component between react-native components. Next step for notification methods. Let’s get start.

getToken method;

I used this method for take user token. After this, I added second method for permission request. Permission request method is as follows.

requestPermission method;

Before request permission, we should check the permission. I created another method for this.

checkPermission method;

In summary, Firstly I used checkPermission method. If I have the permission, I need user token. Because of this, I use getToken method. But If I don’t have a permission, I need a permission first. Because of this I use requestPermission method. If user give permission, third method will be getToken method. If user reject request, This notification don’t work. Token is required for notification.

I added this line for trigger to all scenario. The screenshot is as follows.

I used for Genymotion for test. You can use alternatives. I need token for send notification. My device screenshot is as follows.

I clicked to Open GAPPS button top of right corner in the window to install google play store. When It finishes, the device will be restart. After restart, I opened my application and started debug mode for token. For the debug mode, I pressed CTRL + M in Genymotion. After browser opened, I opened to When debugger opened, It will start localhost but we should change localhost to I returned to Genymotion and restarted application. After start, I returned my debugger screen. (in browser) and pressed F12 I checked console tab and I saw user token. The screenshot is as follows.

I copied this token and returned to firebase. Let’s send notification. I clicked Send your first message button in the Cloud Messaging page and create a new notification. The screenshot is as follows.

I filled the second textbox and then clicked Test On Device I used token in this page. The screenshot is as follows.

I selected my application in second step and clicked to next button. The screenshot is as follows.

Click here for github link

Before I wrote this article on another platform in Turkish. That is why some screenshots are Turkish.

How to do Hamburger Menu in React-Native (Android) Application


I will try to explain “How to do Hamburger menu in React-Native? (Android)” in this post. Just android because, I couldn’t test on iOS application yet. I used windows computer in this application. Let’s get start to development.

I assume, you know “How to create a new project in react-native” I skipped this step. I use Visual Studio Code for my react-native applications. You can use this IDE or you can find alternatives. I will use screenshots from VS Code in this article. After create project, I created Pages folder for my screens. This folder is optional. You can use alternatives.(It’s mean different folder name) But I will create my all pages in this folder.

After create my example pages, I included some libraries in my project. You should run respectively as follow commands in command prompt.

npm install native-base –save
react-native link
npm install react-native-elements

After included this libraries, I created empty pages. (for hamburger menu items) My example page names are “HomePage.js, ProfilePage.js, SettingsPage.js, NotificationPage.js” Again, you can use different page names in here.

Empty Page Example

I shared my example page source code’s ın screenshots. You can find GitHub links end of this post. I didn’t add any component in this page. Just a page name for test.

In this step, I will include navigation library to my project. You should run this command in command prompt for this.

npm i react-navigation

After included react-navigation library, I cleared App.js file and I designed my navigation menu in this file. First step for design, I added my libraries and pages to App.js file.

Include libraries and pages

Finally, everything is ready for hamburger menu. Let’s start to design hamburger menu. If you know web programming you can think as html. It’s easy. Before share my design code block, let me explain to you my sections.

I added logo area for application and then text area for username or application name.

After then, I added DrawerItems tag for menu items. My pages will be show in via this items.

Finally, I added two icon for contact, information or etc. This icons are clickable and will be in bottom page.

I created assets folder in my root directory. If I don’t, application will give an error. After create assets folder, I copied no-image.png to this folder. I used this in hamburger menu. (Logo area) My designed codes are as follows.

Hamburger design codes.

I defined my pages when design finished. You can think Select – Option. I used this items in my design. My items screenshot as follows.

DrawerNavigator items.

If you want to add more item, you should insert more code block as follow.

Single item example.

After above step finished, I added code in bottom of App.js file as follow.

Menu finished. If I try to start my application after this step, I will see as follows error.

Error example

The solution is simple. Before I run my application (or after stopped via CTRL + C in command prompt) and then run this code in command prompt.

npm install –save react-native-gesture-handler
react-native link react-native-gesture-handler

After included and linked this package I can start application in virtual device. (Genymotion or etc.) I can see my hamburger menu like as follows.

Hamburger menu v1

Now, my menu ready for use but I will add icon for my items. It’s not required but It will be good with this icons. Before we added native-base library to current project. I used this library in this step. This code block should be over to Render method. This code block’s screenshot as follows. (static navigationOptions)

You can use for menu icons. You should change name properties in above code. Finally, our project is as follows.

You can find project code in here.