How to Set Up LearnPress Mobile: Step-by-Step

This article will guide LearnPress LMS users on How to Set up LearnPress Mobile. In case you want to learn more about LearnPress Mobile and its features, please read LearnPress Mobile: Definition, Features, and FAQs.

To begin setting up LearnPress Mobile, please ensure you have the following prepared:

• WordPress website uses LearnPress LMS.

• React Native Environment / Flutter Environment (Depends on the source code you purchased)

Set Up LearnPress Mobile with React Native

To be able to set up LearnPress Mobile with React Native, you need to set up the environment and understand some necessary concepts, in this section we will provide:

• Set Up React Native Environment
• File Structure & Terminology for React Native
• Customize Your LearnPress Mobile with React Native

Set Up React Native Environment

These libraries are required to ensure the development environment is set up correctly to build and run mobile apps using React Native:

• NodeJS 18.18.2 Version. Node.js is a JavaScript runtime used for running scripts and managing dependencies. (You can use the latest NodeJS version, but to avoid errors during setup, we recommend version 18.18.2)
• Yarn. Yarn is a package manager, similar to npm (which comes with NodeJS), that helps install project dependencies faster and more efficiently.
• Xcode (Mac-only) for iOS application. Xcode is Apple’s integrated development environment (IDE) required to build and run iOS apps.
• Android Studio for Android application. Android Studio is needed for Android development. It provides all the necessary tools to build and test Android apps, including an emulator for running the app on your computer.

Once all the dependencies and libraries are installed, you’ll need to:

• Extract the download package.
• Copy/Cut to the project folder.
• Run the following scripts:
  • yarn install: Installs all the necessary project dependencies defined in package.json.
  • yarn pod: If you’re building the app for iOS, this will install the CocoaPods dependencies, which are used for managing libraries in Xcode projects.
  • yarn start: Starts the development server, which you’ll use to test the mobile app on your device or emulator.

File Structure & Terminology for React Native

Here is a detailed guide to help you navigate and modify the necessary components while minimizing the risk of breaking your app (for React Native):

• Actions. Redux Actions are responsible for triggering changes in the application state. Be cautious when modifying these files because they control how the app responds to various user interactions. Incorrect changes to Redux Actions may cause the application to malfunction or crash.

• API. This section contains the API configurations, such as endpoint URLs for communicating with your server. You can edit the URLs here to point the app to different data sources or backend services. Be sure to verify any changes to prevent connectivity issues.

• Assets. The Assets folder includes static files like images and fonts.
  • Images: If you need to update any visuals in the app, such as the homepage logo, you can locate the relevant image file here. For example, to change the logo on the homepage, navigate to assets > img > icon-home.png and replace it with your new logo.
  • Fonts: Unless you specifically need to change the app’s fonts, it’s recommended to leave these files untouched to avoid layout issues.

• Common. The Common folder contains reusable functions that are used across various parts of the app. These are essential utilities that perform frequent tasks and should only be altered if you understand their impact on the overall app functionality.

• Component. The Component folder holds reusable components that build the user interface. Here’s a breakdown of the key sections:
  • bottom-tab-item: This file contains the code for the bottom tab navigation bar. You can modify the style of the icons and titles, adjusting properties like color and font size to fit your design preferences.
  • common: Contains general UI elements like the progress bar on the home screen’s Overview section and the countdown timer in the quiz. Explore this folder to see how these components are used throughout the app.
  • item-list: This file holds components used on various screens. For example:
    • item-course is used on the Course screen to display individual courses.
    • item-my-course is used on the My Courses screen for listing the user’s enrolled courses.
  • list: This is a FlatList component, often used for displaying lists of items on different screens.

• Navigations. The Navigations folder contains the global configuration and routing for the bottom tab navigation. Here, you can add, remove, or reorder the tabs that appear in the app’s bottom navigation bar. Be sure to follow the router structure to avoid breaking navigation functionality.

• Screens. The Screens folder is where the layout and content for all app screens are located. The folder structure is organized by individual screens, making it easy to find and edit specific pages. For example:
  • login contains the code for the login screen.
  • home includes the home screen layout.
  • courses holds the course listing and details pages.
  • profile is where you can modify the user’s profile screen.

Each screen has its own folder, making it easy to identify and work on specific areas of the app without getting lost in the codebase.

This structure allows you to customize LearnPress Mobile efficiently while keeping your changes organized. Be sure to test thoroughly after making modifications to ensure the app is working correctly. Don’t forget to back up before you change anything you’re not sure about.

Customize Your LearnPress Mobile with React Native

Now that you have set up your React Native development environment and understand the terminology and file structure, let’s move on to customizing LearnPress Mobile. Please follow the detailed instructions provided by our best developers at LearnPress Mobile App documentation (React Native)

Set Up LearnPress Mobile with Flutter

To be able to set up LearnPress Mobile with Flutter, you need to set up the environment and understand some necessary concepts, in this section we will provide:

• Set Up Flutter Environment
• File Structure & Terminology for Flutter
• Customize Your LearnPress Mobile with Flutter

Set Up Flutter Environment

You need to download and setup Flutter SDK from flutter.dev. You can follow the documentation, choose your development environment:

• Install Flutter for Windows
• Install Flutter for MacOS
• Install Flutter for Linux

If you have any difficulty during the installation process, you can refer to the Flutter installation tutorial video provided by GeeksforGeeks.

File Structure & Terminology for Flutter

Here is a detailed guide to help you navigate and modify the necessary components while minimizing the risk of breaking your app (for Flutter):

• Backend:
  • API: This directory holds the source code for API configuration that connects to the server.
  • Binding: This directory includes class bindings for dependencies when using GetX.
  • Models: Contains data classes that package information for transferring data between the client and server.
  • Parse: This directory has classes that analyze and manage connections to the database, as well as process data received from the API.

• Controllers: A directory with classes that handle processing functions.
• Helper: A directory containing commonly used classes throughout the app.
• Util: This folder holds the app’s configuration files and constant variables, along with the initialization of dependent classes.
• View: A folder that includes the components and user interfaces for the app’s screens.
• env.dart: This file contains essential configurations for the app, such as appName, apiBaseURL, and websiteURL.
• Assets: This directory includes images and fonts. It’s generally not recommended to change the app’s font. In the Images section, you can find the application images. For instance, to change the homepage logo, navigate to assets > img > icon-home.png.

Customize Your LearnPress Mobile with Flutter

Now that you have set up your Flutter development environment and understand the terminology and file structure, let’s move on to customizing LearnPress Mobile. Please follow the detailed instructions provided by our best developers at LearnPress Mobile App documentation (Flutter)

Set Up LearnPress Mobile Using Customization Service

We provide the source code and documentation to help you set up and publish LearnPress Mobile on your own. You’ll be responsible for the entire process, from configuring the app to uploading it to Google Play or the iOS App Store.

If you are unable to set up LearnPress Mobile yourself, you can contact us through our Customization Service and we will handle the setup and publishing of LearnPress Mobile for you. The cost will depend on any additional customization you require.

What to Do If You Have Trouble Setting Up LearnPress Mobile?

Make sure you have followed the correct steps to set up your development environment according to our instructions. In case you have checked and followed the steps correctly and still get an error, please contact us with details that you think may help in troubleshooting.

You can contact us via:

• Help Center
• Offical ThimPress Facebook page

Contact US | ThimPress:

Website: https://thimpress.com/

Fanpage: https://www.facebook.com/ThimPress

YouTube: https://www.youtube.com/c/ThimPressDesign

Twitter (X): https://twitter.com/thimpress