A Pokedex made with React Native

Last update: Dec 23, 2021

Pokedex

A simple pokemon search app!

Description:

Application developed in React Native with Expo and Axios.

Prerequisites:

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Cloning the repository:

Assuming you have your machine pre-configured to clone github repositories (if you have not configured it, visit this documentation), clone the repository using the following command in the terminal:

git clone [email protected]:wcamposs/Pokedex.git

Installation and configuration:

Install and configure the environment to run the application, following this tutorial.

Expo Installation:

Expo is used to serve the application and run on both a physical device and an emulator. Install it using the following command on the terminal:

npm install expo-cli --global

Yarn Installation (optional):

Yarn is a dependency manager, it is used to install the dependencies required for the project (it has the same role as npm). If you want to use it (personally I prefer), install it through this tutorial.

Project dependencies installation:

To install the dependency packages used in this project, follow the steps below:

After cloning the repository, access its root folder using the terminal and execute one of the commands below according to the package manager you use (npm or yarn):

  1. Using Yarn:
yarn install
  1. Using NPM:
npm install

After installation, the project can be considered configured and ready to run.

Getting Started:

Assuming you are in the root directory via a terminal, run the following command to run Expo:

  1. Using Yarn:
yarn start
  1. Using NPM:
npm start

Running Application:

The application can be executed in two ways:

  • Using visual interface (that opens automatically after yarn start or npm start)
  • Using commands via terminal (the options will be shown after execute yarn start or npm start)

Running Application via Interface:

A new tab will be opened in the default browser with some options to run the project using Expo.

PS: Make sure your phone and computer are on the same WiFi!

  1. If you want to run on an Android or iOS emulator, make sure that the virtual device is configured and running, then select one of the options below in the expo interface via browser:
  • Run on Android device / emulator
  • Run on iOS simulator
  1. If you want to run through the browser, select the option:
  • Run in web browser
  1. If you want to run the project on a physical device (Android or iOS):

Android:

  • Install the Expo app on the device through the app store. After installation, run the application, select the option scan with QRCode and scan the QRCode that is displayed in the lower left corner on the tab that was automatically opened in the browser using the device's camera.

iOS:

  • Copy the url shown in the browser above the QRCode.
  • Open Expo App in your mobile device, and click on the second tab 'Explore' and enter the URL that starts with exp://192.168... This is a local connection to your computer. You will see your app running in a minute.

(I personally recommend that the project be executed on a mobile device, regardless of whether it is a physical device or an emulator).

Running Application via Terminal:

Just as a new tab is executed by the browser, the same information is also displayed in the terminal, to execute it, type the command for the desired option:

  1. If you want to run on an Android emulator, type on terminal:
a
  1. If you want to run on an iOS emulator, type on terminal (this option will appear only if you have an iOS device configured):
i
  1. If you want to run the project on a physical device (Android or iOS):

Android:

  • Install the Expo app on the device through the app store. After installation, run the application, select the option scan with QRCode and scan the QRCode displayed in the terminal using the device's camera.

Built With:

  • React Native - The framework used
  • Expo - Open-source platform used for build and serve the application for Android, iOS, and web.
  • Axios - Promise based HTTP client for the browser and node.js
  • Poke API - Api used to obtain pokemon data.

GitHub

https://github.com/wcamposs/Pokedex
You might also like...

:clipboard: mobile app for a consultancy hub - made with react native, expo, styled components and typescript

:clipboard: mobile app for a consultancy hub - made with react native, expo, styled components and typescript

Consulty Consulty App A marketplace to find a consultant for your next step. 📋 Project | Features | Integrations | Technologies | Getting Started | L

Apr 19, 2022

Cards Cheap Animated Gesture component animated made with react native, Expo and Reanimated v2

Cards Cheap Animated Gesture component animated made with react native, Expo and Reanimated v2

Cards Cheap Animated Gesture Technologies | How to run | License 📋 Description Cards Cheap Animated Gesture component animated made with react native

Dec 19, 2021

A very simple task app made in React Native

A very simple task app made in React Native

💻 Project This is a very simple task application built on React Native and Expo. 🔧 How it Works There are two features, the user can add a new task

May 15, 2021

💵 Bill Tracker App, made with React Native + Typescript

💵 Bill Tracker App, made with React Native + Typescript

Billy About the project This project is developed solely by Estee Tey. Motivations I had built Billy intended for these few specific target audiences:

Apr 30, 2022

ReactNative iOS app that fetches your current location and display Intstagram photos that were made near to you

ReactNative iOS app that fetches your current location and display Intstagram photos that were made near to you

react-native-example Example of using ReactNative to build simple iOS app, that fetches your current location and display Intstagram photos that where

Feb 14, 2022

A practical app made with RN CLI and TypeScript

A practical app made with RN CLI and TypeScript

⚛️ React Native Movie Pokedex App This project was created with React Native CLI and TypeScript template. Description This project is a practical conf

Feb 1, 2022

Urban Eatery: An app which is made with an aim of bringing back traditional food

Urban Eatery: An app which is made with an aim of bringing back traditional food

Urban Eatery "Good Food for Good Moments" Urban Eatery is an app where you can o

Apr 20, 2022

Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg

Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg

Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg, @react-navigation/native, @react-navigation/stack, expo-constants, expo-font, expo-location and expo-mail-composer consuming the features of the Node.js - Ecoleta API

Feb 3, 2022

A react-native-drawer implemented example and scaffolding for react-native-router-flux.

A react-native-drawer implemented example and scaffolding for react-native-router-flux.

Deprecated - This repo uses obsolete versions of react-native-router-flux and react-native-drawer. I update the repo for now. But I may not update on

Feb 14, 2022
Pokédex - React Native App
Pokédex - React Native App

React Native Pokédex App Demo About the project Created with Expo and TypeScript. Renders pokémons list and a detail page. It uses a locally saved use

Apr 25, 2022
React Native Pokedex - Expo
React Native Pokedex - Expo

React Native Pokedex - Expo

Apr 12, 2022
Hacker News iOS and Android App - Made with React Native.
Hacker News iOS and Android App - Made with React Native.

DEPRECATED FOR NOW - uses an old version of react native See other react native example apps here: https://expo.io/featured HackerNews-React-Native Ha

May 16, 2022
iOS Conference App made with React Native.
iOS Conference App made with React Native.

Nortal TechDay 2015 Conference React Native App Dependencies TwitterKit (use the Fabric Mac-app or manually insert API keys in Info.plist) react-nativ

Feb 14, 2022
NewYork Times Top Stories app made with React Native with sqlite for Android - http://i.imgur.com/SU9B3TM.gifv
NewYork Times Top Stories app made with React Native with sqlite for Android - http://i.imgur.com/SU9B3TM.gifv

NewYork Times Top Stories - React Native NewYork Times news reader Android, made with React-Native. ##Features/components Uses React Native 0.25.1 wit

Feb 14, 2022
A shopping mobile application made with react native for Android.
A shopping mobile application made with react native for Android.

This project is a simplified implementation of a shopping system, the project aims to provide the basic features that are expected to be found in a mobile e-commerce applicaion where users can purchase and sell products.

Apr 15, 2022
A file manager app made with React Native & Expo

A file manager app made with React Native & Expo

May 6, 2022
reminder to drink water, made with react native
 reminder to drink water, made with react native

DRINKWATER reminder to drink water, made with react native ⚡️ ScreenShots Install $ git clone https://github.com/ORG/PROJECT.git $ cd PROJECT $ npm in

Feb 9, 2022
Android mobile client for Reddit - Made in React Native

Redditech | Reddit client Recreate the Reddit client using the Reddit open API. Following this subject which you can find here ! Contributors Gabriel

Jan 27, 2022
A Non-Comparable WhatsApp Clone made using react-native (Expo) and FireBase.

WhatsApp-Clone-React-Native A Non-Comparable WhatsApp Clone made using react-native (Expo) and FireBase. Whatsapp.CLone.final.Vid.online-video-cutter.

Apr 28, 2022