Budget Planner Mobile App | React Native | Figma + XD + Sketch FREE | Life Time Update

Here is an example of how to configure the Budget Planner Mobile App using React Native, Figma, XD, and Sketch:

Environment Variables

To configure the environment variables, create a new file named env.js in the root directory of your project and add the following code:

module.exports = {
  API_URL: 'https://api.example.com',
  API_KEY: 'your_api_key',
  APP_NAME: 'Budget Planner',
  APP_VERSION: '1.0.0',
};

Replace https://api.example.com with your actual API URL and your_api_key with your actual API key.

Figma Design

To configure the Figma design, create a new file named figma.config.js in the root directory of your project and add the following code:

module.exports = {
  design: {
    width: 375,
    height: 812,
    orientation: 'portrait',
  },
  styles: {
    colors: {
      primary: '#3498db',
      secondary: '#f1c40f',
    },
  },
};

This configuration sets the design width and height to 375x812 pixels, with a portrait orientation. It also defines two colors, primary and secondary, which can be used throughout the app.

XD Design

To configure the XD design, create a new file named xd.config.js in the root directory of your project and add the following code:

module.exports = {
  design: {
    width: 375,
    height: 812,
    orientation: 'portrait',
  },
  styles: {
    colors: {
      primary: '#3498db',
      secondary: '#f1c40f',
    },
  },
};

This configuration is identical to the Figma configuration, as XD uses the same design file format.

Sketch Design

To configure the Sketch design, create a new file named sketch.config.js in the root directory of your project and add the following code:

module.exports = {
  design: {
    width: 375,
    height: 812,
    orientation: 'portrait',
  },
  styles: {
    colors: {
      primary: '#3498db',
      secondary: '#f1c40f',
    },
  },
};

This configuration is identical to the Figma and XD configurations, as Sketch uses the same design file format.

React Native Configuration

To configure the React Native app, create a new file named react-native.config.js in the root directory of your project and add the following code:

module.exports = {
  name: 'Budget Planner',
  version: '1.0.0',
  android: {
    package: 'com.example.budgetplanner',
  },
  ios: {
    bundleIdentifier: 'com.example.budgetplanner',
  },
};

This configuration sets the app name, version, and package name for Android and iOS platforms.

Other Settings

To configure other settings, create a new file named settings.js in the root directory of your project and add the following code:

module.exports = {
  debug: true,
  analytics: {
    enabled: true,
    trackingId: 'your_tracking_id',
  },
};

This configuration sets the debug mode to true, and enables analytics tracking with the specified tracking ID.

Here is the list of features and information about the Budget Planner Mobile App:

Main Features:

1. Support Android & iOS Devices: The app supports both Android and iOS devices.
2. 84 Light & Dark Mode Screens: The app has a total of 84 light and dark mode screens, providing a comprehensive budgeting experience.
3. Smooth Transition Animations: The app features smooth transition animations for a seamless user experience.
4. Font Awesome & Material Icons: The app includes both Font Awesome and Material Icons for added functionality.
5. Karla Font: The app uses the Karla font for better readability.
6. Responsive Designs: The app has responsive designs that work well on various devices.
7. Animations: The app includes animations for a more engaging user experience.
8. ReactNative Updated Latest Version: The app uses the latest version of ReactNative, ensuring compatibility with the latest devices and operating systems.
9. Free Update Version: The app's update version is free of charge.
10. Full React Native Source Code: The app's full source code is provided.
11. Lifetime Free Upgrade Version: The app's upgrade version is lifetime free.
12. Documentation File: A comprehensive documentation file is provided with the app.
13. Code Flexibility: The app's code is flexible and can be modified to suit individual needs.
14. Figma, XD, Sketch Files (Free): Figma, XD, Sketch files are provided for easy customization.
15. Fully Customizable & Responsive: The app is fully customizable and responsive, adapting to different devices and operating systems.
16. Design System & Style Guide: The app includes a design system and style guide for easy customization.

Other Features:

1. Industry Experts: The app is designed in collaboration with industry experts for maximum effectiveness.
2. Material Icons: In addition to Font Awesome Icons, the app also supports Material Icons.

Images:

1. An image of the app's poster.
2. A screenshot of the app.
3. A barcode scan of the app.

Why Choose Us:

1. Expert Support: The app's design team provides expert support.
2. Fast Customer Support: The app offers fast customer support.

Changelog & Update History:

1. Version 1.2 (21-8-2023): React Native update version 0.72.4.
2. Version 1.1 (1-8-2023): React Native update version 0.72.3.
3. Version 1.0 (5-7-2023): Initial release with React Native Version 0.71.1, React 18.2.0, React Hook Used, React CLI.

Contact:

1. Email support: stonelabindia@gmail.com.

Join us for latest updates:

1. Follow us on Codecanyon.
2. Connect with us on Facebook.
3. Subscribe to our YouTube channel.
4. Visit our Themeforest page.