shubhatrashid / react-native-pokemon-cards-app

React Native Pokémon App Documentation

Table of Contents

1. Introduction
2. Installation
3. Dependencies
4. Folder Structure
5. Getting Started
6. Components
   • PokemonList
   • PokemonCard
7. API Integration
8. Styling
9. Running the App
10. Troubleshooting
11. Future Enhancements
12. Conclusion

---

1. Introduction

This documentation provides information on how to set up and use a React Native app that renders a list of Pokémon along with their HP, images, and powers.

2. Installation

To get started, clone the repository from GitHub:

git clone https://github.com/your-username/react-native-pokemon-app.git
cd react-native-pokemon-app

Install the dependencies using:

npm install

or

yarn install

3. Dependencies

The app relies on the following dependencies:

• react-native: The core React Native library.
• axios: For making HTTP requests to the Pokémon API.
• react-navigation: For handling navigation between screens.

Install these dependencies using:

npm install axios react-navigation

or

yarn add axios react-navigation

4. Folder Structure

The project has the following folder structure:

|-- src
|   |-- components
|       |-- PokemonList.js
|       |-- PokemonCard.js
|   |-- screens
|       |-- HomeScreen.js
|   |-- App.js
|-- package.json

5. Getting Started

Ensure that you have a working React Native development environment set up. If not, follow the official React Native documentation for instructions.

6. Components

6.1 PokemonList

The PokemonList component renders a scrollable list of Pokémon. It fetches data from the Pokémon API and passes it to the PokemonCard component.

6.2 PokemonCard

The PokemonCard component displays information about a single Pokémon, including its name, HP, image, and powers.

7. API Integration

The app integrates with the Pokémon API to retrieve information about Pokémon. The API endpoints are called in the PokemonList component.

8. Styling

Basic styling is applied using inline styles in the components. Feel free to enhance the styling based on your design preferences.

9. Running the App

To run the app on an emulator or physical device, use the following command:

npx react-native run-android

or

npx react-native run-ios

10. Troubleshooting

If you encounter issues, refer to the React Native troubleshooting guide.

11. Future Enhancements

Potential future enhancements include:

• Implementing pagination for the Pokémon list.
• Adding a search feature to find specific Pokémon.
• Enhancing the UI with animations and transitions.

12. Conclusion

Congratulations! You have successfully set up and documented a React Native app that renders Pokémon information. Feel free to explore and customize the app further based on your requirements. If you have any questions or feedback, please refer to the GitHub repository for support.