https://github.com/remidosol/react-native-marvel-api-demo

react-native-marvel-api-demo is my first experience about Cross-Platform Mobile App Development using React Native that coded via TypeScript.
https://github.com/remidosol/react-native-marvel-api-demo

axios axios-typescript babel-preset-expo context-api demo expo marvel-api react-native react-native-expo react-native-paper typescript

Last synced: about 1 month ago
JSON representation

react-native-marvel-api-demo is my first experience about Cross-Platform Mobile App Development using React Native that coded via TypeScript.

Host: GitHub
URL: https://github.com/remidosol/react-native-marvel-api-demo
Owner: remidosol
License: mit
Created: 2020-10-11T15:52:54.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-10-14T15:53:14.000Z (over 4 years ago)
Last Synced: 2024-05-13T09:36:31.348Z (about 1 year ago)
Topics: axios, axios-typescript, babel-preset-expo, context-api, demo, expo, marvel-api, react-native, react-native-expo, react-native-paper, typescript
Language: TypeScript
Homepage:
Size: 7.38 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# react-native-marvel-api-demo

**react-native-marvel-api-demo** is my first experience about *Cross-Platform Mobile App Development* using **React Native** that coded via ***TypeScript***.

Context API has been used for state management and theme.

Data have been fetched from [Marvel API](https://developer.marvel.com/).

## Requirements

**You must create a Marvel Developer Account** [**here**](https://www.marvel.com/register).

After you do this, you may read the **Authentication doc for generating API Key and Hash** [**here**](https://developer.marvel.com/documentation/authorization)

Then, in project's code, you should ***search*** for **"YOURAPIKEY"** and **"YOURHASH"** keywords and replace all with yours, otherwise project will be down or will not run as expected.

## Installation of Some Important Dependencies

[Expo](https://github.com/expo/react-native/releases/tag/sdk-38.0.2), [react-native-paper](https://github.com/callstack/react-native-paper/releases/tag/v4.0.1), [@react-navigation/native](https://github.com/react-navigation/react-navigation/releases/tag/%40react-navigation%2Fnative%405.7.3), [@react-navigation/stack](https://github.com/react-navigation/react-navigation/releases/tag/%40react-navigation%2Fstack%405.9.0), [@react-navigation/material-bottom-tabs](https://github.com/react-navigation/react-navigation/releases/tag/%40react-navigation%2Fmaterial-bottom-tabs%405.2.16), [@react-navigation/drawer](https://github.com/react-navigation/react-navigation/releases/tag/%40react-navigation%2Fdrawer%405.9.0), [@react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/releases/tag/%40react-navigation%2Fbottom-tabs%405.9.0) and [axios](https://github.com/axios/axios/releases/tag/v0.19.2) have been used to develop this demo.

Before, I installed globally some packages.

```bash
npm install -g @react-native-community/cli
npm install -g expo-cli
```

Creation of Project:

![Creation of Project](./ScreenShots/expoInit.gif)

## Running

Install all dependecies:

```PowerShell
yarn
```

Run project via Expo on LAN:

```PowerShell
yarn start
```

Or run project via Expo on Tunnel:

```PowerShell
yarn start --tunnel
```

**You can run this project on you smart phone by scanning QR code on this [***Expo Project Link***](https://expo.io/@remidosol/projects/react-native-marvel-api-demo).**

## Some Screens