DEV Community

Cover image for SonarQube for React & React Native: Improve Code Quality
PEAKIQ
PEAKIQ

Posted on • Originally published at peakiq.in

SonarQube for React & React Native: Improve Code Quality

#sonarqube #react #reactnative #codequality

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/level-up-your-react-react-native-code-quality-with-sonarqube-a-deep-dive

A practical 2025 deep dive into static analysis, security scanning, and code smell detection — beyond what ESLint and Prettier can do. Published on peakiq.in.

Why SonarQube in React & React Native Projects?

Linters like ESLint and formatters like Prettier are great — but they only scratch the surface. SonarQube brings a deeper layer of quality assurance:

  • Deep static analysis beyond standard lint rules
  • Security vulnerability detection across your entire codebase
  • Code smell detection that flags maintainability issues early
  • Visual dashboards showing test coverage, technical debt, and maintainability scores

It's not about replacing your current tools — it's about supercharging them.

Setting Up SonarQube Locally on macOS

Step 1: Install and Launch SonarQube 

brew install sonar
sonar start
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:9000 and log in with admin / admin.

You now have a running SonarQube server on your machine.

Step 2: Install the Sonar Scanner

The Sonar Scanner is the CLI tool that connects your project code to the SonarQube server:

brew install sonar-scanner
Enter fullscreen mode Exit fullscreen mode

Step 3: Add the Configuration File

At the root of your React or React Native project, create the properties file:

touch sonar-project.properties
Enter fullscreen mode Exit fullscreen mode

Then add the following configuration:

sonar.projectKey=my-awesome-app
sonar.projectName=My Awesome App
sonar.sources=src
sonar.exclusions=**/__tests__/**,**/*.test.js,**/*.spec.tsx
sonar.language=js
sonar.sourceEncoding=UTF-8
sonar.javascript.lcov.reportPaths=coverage/lcov.info
Enter fullscreen mode Exit fullscreen mode

Run the Analysis

First, build and test your app to generate coverage output (especially if you use Jest):

npm run test -- --coverage
Enter fullscreen mode Exit fullscreen mode

Then trigger the scanner:

sonar-scanner
Enter fullscreen mode Exit fullscreen mode

Your SonarQube dashboard will now populate with real-time code insights.

React Native Considerations

Modern React Native apps typically have:

  • Shared components between iOS and Android
  • JS/TS-only source code under src/
  • Native modules in android/ and ios/ that don't need analysis

Update your config to reflect this:

sonar.sources=src
sonar.exclusions=android/**,ios/**,**/*.test.tsx
Enter fullscreen mode Exit fullscreen mode

Use TypeScript with strict mode enabled in tsconfig.json to boost type safety — SonarQube will respect and leverage it during analysis.

Test Coverage Integration

To visualize exactly what you're not testing:

  1. Run Jest with the coverage flag: jest --coverage
  2. This outputs lcov.info under your coverage/ directory
  3. Point SonarQube to it via sonar.javascript.lcov.reportPaths in your properties file

You'll get heatmaps of untested components, making it easy to spot weak points across your project.

Bonus: Combine with Git Hooks

Prevent bad code from ever reaching your Sonar dashboard by linting and formatting before every commit. Install Husky and lint-staged:

npm install husky lint-staged --save-dev
Enter fullscreen mode Exit fullscreen mode

Configure lint-staged in your package.json:

{
  "lint-staged": {
    "**/*.tsx": ["eslint --fix", "prettier --write"]
  }
}
Enter fullscreen mode Exit fullscreen mode

This way your Sonar dashboard stays clean before any code gets merged.

CI/CD Integration

If you're using GitHub Actions, Bitrise, or Fastlane for React Native, add a scan step like this:

- name: SonarQube Scan
  run: |
    sonar-scanner \
      -Dsonar.projectKey=my-awesome-app \
      -Dsonar.sources=src \
      -Dsonar.login=${{ secrets.SONAR_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

Store your token securely as a SONAR_TOKEN secret in your repository settings.

Final Thoughts: Clean Code Is Sustainable Code

Codebases grow fast. React projects sprawl. React Native multiplies the surface area across platforms. Without active quality gates, you're inviting chaos.

SonarQube doesn't just point fingers — it creates a shared understanding of quality across your entire team. In 2025, that's not just helpful — it's essential.

Published on peakiq.in — React Native guides and tutorials.

Top comments (0)