Search Image App

This project allows you to search different images from the internet using the Pixabay API.

Prerequisites

• Node.js > 12 and npm (Recommended: Use nvm)
• Watchman
• Xcode 12
• Cocoapods 1.10.1
• JDK > 11
• Android Studio and Android SDK

Base dependencies

• axios for networking.
• prop-types to type-check our components exposed properties.
• react-native-config to manage envionments.
• react-navigation navigation library.
• react-native-async-storage as storage solution.
• redux for state management.
• redux-thunk to dispatch asynchronous actions.

Usage

Option 1: Using React-Native-Rename

You can start by cloning this repository and using react-native-rename. In the current state of this project, it should give you no issues at all, just run the script, delete your node modules and reinstall them and you should be good to go.

Keep in mind that this library can cause trouble if you are renaming a project that uses Pods on the iOS side.

After that you should proceed as with any javascript project:

• Go to your project's root folder and run npm install.
• If you are using Xcode 12.5 or higher got to /ios and execute pod install --repo-update`
• Run npm run ios or npm run android to start your application!

(Using yarn: yarn ios or yarn android)

Option 2: Copy the structure to your project

If you want to roll on your own and don't want to use this as a template, you can create your project and then copy the /src folder (which has all the code of your application) and update your index.js.

Keep in mind that if you do this, you'll have to install and link all dependencies (as well as adding all the necessary native code for each library that requires it).

If you encountered error (IOS), follow steps below:

• Delete node_modules in the root directory

• Run the command npm install or yarn install

• Change directory to ios by running cd \ios

• Delete Podfile.lock

• Run the commands below: pod deintegrate pod install

• Go back to the root directory, command is cd ..

• rebuild the app using npm install & npx react-native run-ios

  BONUS(IOS): You can run to a specific simulator by running the command npx react-native run-ios --simulator="iPhone 13 Pro Max"

Folder structure

This template follows a very simple project structure:

• src: This folder is the main container of all the code inside your application.
  • actions: This folder contains all actions that can be dispatched to redux.
  • assets: Asset folder to store all images, fonts, etc.
  • components: Folder to store any common component that you use through your app (such as a generic button)
  • constants: Folder to store any kind of constant that you have.
  • navigation: Folder to store the navigators.
  • reducers: This folder should have all your reducers, and expose the combined result using its index.js
  • screens: Folder that contains all your application screens/features.
    • Screen: Each screen should be stored inside its folder and inside it a file for its code and a separate one for the styles and tests.
      • Screen.js
  • store: Folder to put all redux middlewares and the store.
  • App.js: Main component that starts your whole app.
  • index.js: Entry point of your application as per React-Native standards.

Components

Components are the basic blocks of a react native application, but since we​​ aim to minimize development complexity, all the components are at the same nesting level.

Another important thing is the use of propTypes to check the kind of data that your components need to work properly. If the component receives some data from others, the type of these props must be defined, and in case you need it the default value of the property too.

Static resources:

To keep an application scalable and organized, the global static resources that are used in the application have to be created in a specific file.

Redux

Once the components are defined, they are tied to the management of information through the application. For this, Redux is implemented with the store-reducer-action structure as usual, however, not only the data is handled through the actions but the success and error responses are also defined by the same form.

Controllers folder and API connection handler

To keep the networking layer simple, the template uses a single Axios instance in the fetch.js. It uses interceptors to define common side effects for the responses.

When you need communication with a service you have to create a function to manage the operation and grouping according to the kind of transaction inside a controller file, please keep all of those inside the controllers' folder.

While the data transfer between the API and the app is working you must use the success and error actions that help you to catch the result of the operation. With this method, you can track the interaction through the redux store. This is useful because you can create behaviors based on those states in a quick and simple way

Redux folders

4 folders divide the redux work

• Store: Here you define the store shape and you can configure the persistReducer and middlewares.
• Actions: Remember to create the file and the corresponding test for each action classification. Here you define actions for success and error scenarios.
• Reducers: You have the error and success reducers by default. Create the other classifications and try to keep simple each file. Here you modify the store.
• Types: Create one file for each action classification. Here you define what part of the store you need to see in your interface.

Screens

In this folder, you have the main objects to apply the composition architecture. Just create a folder for each screen you have in your application, call all the components and static resources you need to render the scene and finally use the corresponding hooks to interact with redux and create behaviors depending on the store.

To keep the structure, extract the styles from the main file and place it in a {namefile.styles.js} do the same for the set of tests needed for each screen with the file {namefile.test.js}