DEV Community: Muhammad Hasbi

Axero Bento: Reinventing the Intranet for the Future of Work

Muhammad Hasbi — Sun, 27 Jul 2025 13:45:38 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

This project utilizes a Bento layout to depart from the traditional designs commonly seen in other projects. The styling follows a modern, isomorphic approach and incorporates smooth initial transitions to ensure an engaging user experience. Furthermore, the widget layout is intentionally designed to follow natural eye-tracking patterns, creating an intuitive, minimalist, and easy-to-navigate flow for the user.

My Journey

When I first came across the Axero Frontend Challenge, I was excited by the idea of reimagining how intranets could look and feel. Most dashboards I’ve seen are cluttered, overly technical, and hard to navigate—so I set out to build something different. I wanted to create a space that feels clean, intuitive, and modern—something a team would genuinely enjoy using day to day. This led me to experiment with Bento-style layouts, natural eye-tracking flows, and smooth transitions to craft a dashboard experience that’s not only functional, but delightful.

What I Learned

Working on this project taught me the importance of layout psychology—how visual hierarchy and flow can impact usability in a big way. I also deepened my understanding of responsive design using CSS Grid/Flexbox and practiced structuring components to be both reusable and accessible. Lastly, I gained valuable experience implementing smooth page transitions and dynamic layouts that respond well to real user behavior, which I plan to apply in future UI/UX projects.

Demo

Axero

[New] React Native & Android SDK 15: A Developer's Guide

Muhammad Hasbi — Sat, 12 Jul 2025 06:26:52 +0000

Google Announcement

Google recently announced new requirements for apps targeting Android 15." This immediately establishes the "why." In this guide, we'll walk you through exactly how to get your React Native app compliant.
Let's jump into the steps.

Prerequisites

Before you start, note that targeting Android 15 requires the following configuration and tools.

1. Update Android SDK Versions

In your android/build.gradle file, update the SDK versions:

compileSdkVersion = 35
targetSdkVersion = 35

You can find the official requirements on the Android 15 setup page.

2. Required Development Tools

Ensure your development environment is up to date:

Java version 17
Node.js version 23.7.0 (Avoid typescript issue)

Don't forget to also upgrade your Android Emulator SDK to 35 to test your changes.

Upgrade Process

To update your project to a React Native version that supports Android SDK 35, the official React Native Upgrade Helper is your best tool. It provides a detailed diff of the changes between versions.

To update existing React Native Version that approved by Android SDK 15, please follow this

➡️ View the React Native 0.72.1 to 0.78.0 Upgrade Diff

Follow the changes suggested by the upgrade helper. Below are some common manual fixes you might need to apply afterward.

Post-Upgrade Fixes

After running the upgrade, you may encounter a few specific issues. Here’s how to solve them.

1. Main Component Name Correction

The upgrade process might reset your main component name. Check the following file: android/app/src/main/java/com/your-app-name/MainActivity.kt.

You'll need to update this line to use your app's actual name. You can find the correct name in your app.json file under the name or displayName key.

# android/app/src/main/java/com/your-app-name/MainActivity.kt

override fun getMainComponentName(): String = "RnDiffApp"

2. iOS Firebase Configuration (If Applicable)

If you're using Firebase and building for iOS, you may need to update your ios/Podfile to handle static frameworks. Inside your target block, add the following lines (adjust them based on your specific Firebase integration):

#ios/Podfile

target 'Development' do
  config = use_native_modules!

  flags = get_default_flags()

  use_frameworks! :linkage => :static
  $RNFirebaseAsStaticFramework = true

  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true

//...other script

3. Fixing Status Bar and Navigation UI (Edge-to-Edge)

A common issue after this upgrade is a broken UI around the status bar and bottom navigation. This happens because Android 15 enforces an "edge-to-edge" display, where your app draws behind the system bars.

To fix this, you need to implement proper safe area handling.

Step 1: Install Helper Packages

# use npm
npm install react-native-edge-to-edge react-native-safe-area-context

# use yarn
yarn add react-native-edge-to-edge react-native-safe-area-context

Step 2: Update Android Theme

In android/app/src/main/res/values/styles.xml, change the AppTheme parent to Theme.EdgeToEdge.

android/app/src/main/res/values/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.EdgeToEdge">
        </style>
</resources>

Step 3: Modify MainActivity

Next, to enable edge-to-edge display in your main Android activity, modify the onCreate function in android/app/src/main/java/com/YourAppName/MainActivity.kt and add WindowCompat.setDecorFitsSystemWindows

Setting it to false essentially means: "Hey Android, do not automatically fit my app's layout around the system bars. Let my app draw underneath them instead."

import androidx.core.view.WindowCompat

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    WindowCompat.setDecorFitsSystemWindows(window, false)
  }

Step 4: Wrap Your Screens

Finally, wrap your screens with SafeAreaView from react-native-safe-area-context to prevent your UI from being hidden by system elements like the notch or home indicator.

import { SafeAreaView } from 'react-native-safe-area-context';

function MyScreen() {
  return (
    <SafeAreaView edges={['bottom']} style={{ flex: 1 }}> // Add edges={['bottom']} to add spesific edges
      {/* ... your screen content ... */}
    </SafeAreaView>
  );
}

Or apply padding manually where needed using the useSafeAreaInsets hook:

import { useSafeAreaInsets } from 'react-native-safe-area-context';

function MyComponent() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ 
      flex: 1, 
      paddingTop: insets.top, 
      paddingBottom: insets.bottom 
    }}>
      {/* ... your component content ... */}
    </View>
  );
}

Conclusion

Your React Native application should now be configured to target Android 15 and handle modern UI requirements like edge-to-edge display.

Key Benefits of Targeting SDK 35:
Updating both versions is essential, but targeting SDK 35 is where you'll see the most impactful changes.

Enhanced Security and Privacy (A Major Focus) Theft Detection Lock
Modern User Interface and Experience (UX)
Significant Performance and Battery Improvements

Hopefully, this guide helps you save some time. If you have any questions or recommendations, please let me know in the comments. Thanks, and happy coding!

How to Integrate React Native CLI and Detox into CircleCI

Muhammad Hasbi — Thu, 28 Nov 2024 09:42:56 +0000

My First Experience Integrating React Native with CircleCI
A couple of days ago (22/11/2024), I got a task to integrate our React Native development app with CircleCI. My principal engineer provided the initial configuration, and I thought, "This shouldn’t be too hard—I just need to plug in the config and make it work."

But when I tried running it, the tests failed.

Here’s the configuration I started with:

version: 2.1

orbs:
  node: circleci/node@5.2.0
  android: circleci/android@2.5.0
  rn: react-native-community/react-native@7.3.0
  ruby: circleci/ruby@2.1.1

commands:
  detox_build_android:
    steps:
      - android/restore-gradle-cache
      - run: |
          npm install -g detox-cli react-native-cli
          yarn android:detox:build:emu
      - android/save-gradle-cache
  create_env_file:
    steps:
      - run:
          name: Creating .env file
          command: |
            cat \<< EOF > .env
            APP_ID=$APP_ID
            <another_env_property>
            EOF
      - persist_to_workspace:
          root: .
          paths:
            - .env

jobs:
  detox_android:
    executor:
      name: android/android-machine
      resource-class: large
      tag: "2023.08.1"
    steps:
      - checkout
      - create_env_file
      - run:
          name: Cat .env File
          command: cat .env
      - run:
          name: Install dependencies
          command: yarn install --frozen-lockfile
      - run:
          name: Generate release.keystore
          command: echo "$RELEASE_KEYSTORE" | base64 --decode > android/app/release.keystore
      # - detox_build_android
      - rn/android_emulator_start:
          device_name: Pixel_5_API_33
      # - run:
      #     name: Set APK Path
      #     command: echo "APK_PATH=android/app/build/outputs/apk/release/app-release.apk" >> $BASH_ENV
      - run:
          name: Wait for Emulator to Fully Boot
          command: |
            adb wait-for-device
            adb shell getprop sys.boot_completed | grep 1 || sleep 5
            adb shell input keyevent 82
      - detox_build_android
      - run:
          name: Run Detox Tests
          command: detox test -c android.emu.release --loglevel verbose

workflows:
  test_and_distribute:
    jobs:
      - detox_android:
          filters:
            branches:
              only:
                - main

A New Challenge
To be honest, I had never worked with anything related to CI/CD before, so this was my first experience—exciting, but also a little daunting! 😅

I dove into trial and error mode, trying everything I could think of. After what felt like 374 attempts, I decided to explore the documentation more thoroughly.

That’s when I stumbled upon a helpful blog post: React Native E2E Tests and Automatic Deploys (Detox + Fastlane + CircleCI).

This blog provided a lot of insight into the flow I needed to follow to get the tests running.

Debugging the Configuration
One key thing to note about CircleCI’s free plan is its limitations. For example, apps can only be run on Linux. If you need to test with iOS, you’ll have to upgrade to a paid plan.

After carefully reviewing the configuration provided, I realized one critical step was missing: starting the Metro bundler.

I checked the CircleCI React Native documentation and found a specific command to run Metro. After adding this step to the config, everything finally worked smoothly! yay !

My Working Configuration
Here’s the configuration I used to run React Native CLI with Detox on CircleCI. Keep in mind that since I’m using the free plan, this setup only works for Android. To run tests on iOS, you’ll need to subscribe to a paid plan.

version: 2.1

orbs:
  rn: react-native-community/react-native@8.0.0
  android: circleci/android@3.0.2

commands:
  install_init:
    steps:
      - rn/yarn_install
      - run:
          name: Install Global CLI Tools
          command: |
            npm install -g detox-cli react-native-cli
            react-native --version

jobs:
  checking:
    executor:
      name: rn/linux_js
      node_version: '18.2'

    steps:
      - checkout
      - install_init
      - run:
          command: yarn checker // run linter, prettier, jest
      - persist_to_workspace:
          paths:
            - .
          root: .

  test_android:
    executor:
      name: android/android_machine
      resource_class: large
      tag: '2023.10.1'

    steps:
      - attach_workspace:
          at: .
      - rn/android_emulator_start:
          build_tools_version: '33.0.0'
          device_name: Pixel_5_API_33
          platform_version: android-33
      - install_init
      - rn/metro_start
      - run:
          name: Detox Test
          command: yarn detox:test:android -l verbose

workflows:
  e2e_test:
    jobs:
      - checking
      - rn/android_build:
          name: build_android
          build_image_version: 'v15.0'
          resource_class: large
          build_cache: false
          gradle_options: '-Xmx4g -XX:MaxMetaspaceSize=512m'
          build_type: debug
          requires:
            - checking
      - test_android:
          requires:
            - build_android

Lessons Learned
This experience taught me the importance of reading the documentation thoroughly and not being afraid to experiment. CI/CD might seem intimidating at first, but once you understand the flow, it becomes manageable—even fun!