Skip to content

Add new react native template and sample apps articles#25426

Merged
sumeyyeKurtulus merged 4 commits into
devfrom
rn-article
May 21, 2026
Merged

Add new react native template and sample apps articles#25426
sumeyyeKurtulus merged 4 commits into
devfrom
rn-article

Conversation

@fahrigedik
Copy link
Copy Markdown
Member

Add a new community article (post.md) describing the React Native template refresh — migration to NativeWind v4, token-based theming and dark mode, navigation updates, removal of legacy screens, and two sample apps — and include all accompanying screenshots and demo images.

Add a new community article (post.md) describing the React Native template refresh — migration to NativeWind v4, token-based theming and dark mode, navigation updates, removal of legacy screens, and two sample apps — and include all accompanying screenshots and demo images.
@fahrigedik fahrigedik added this to the 10.5-preview milestone May 13, 2026
@github-actions
Copy link
Copy Markdown
Contributor

Images automagically compressed by Calibre's image-actions

Compression reduced images by 84.5%, saving 3.6 MB.

Filename Before After Improvement Visual comparison
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-old-menu.png 681.5 KB 85.3 KB 87.5% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-small-2.png 628.8 KB 120.4 KB 80.9% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-dark.png 559.0 KB 81.7 KB 85.4% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-small-3.png 562.8 KB 88.7 KB 84.2% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-light.png 568.1 KB 94.7 KB 83.3% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-small-1.png 546.0 KB 89.8 KB 83.6% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-new-bottom-tab-menu.png 346.1 KB 44.1 KB 87.3% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-new-drawer-menu.png 341.4 KB 44.8 KB 86.9% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/abp-studio.png 117.5 KB 27.1 KB 76.9% View diff

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new Community Article describing the refreshed ABP React Native templates (NativeWind v4-based styling, token-driven theming with dark mode, navigation restructuring) and showcasing two sample apps, with embedded screenshots for the UI comparisons.

Changes:

  • Introduces a new community article markdown post covering the React Native template modernization (cleanup + NativeWind/token system).
  • Embeds multiple screenshots (light/dark, navigation, ABP Studio wizard, sample app screens) to illustrate the changes.

Comment on lines +113 to +116
![App 2 — screens](images/sample-medium-screens.png)
<!-- Placeholder: 2-3 key screens of the bigger sample app, ideally light+dark variants in one image -->


**App 2** is the more substantial of the two — it covers multiple feature areas and shows how the template scales when an app actually has things to do.

![App 2 — screens](images/sample-medium-screens.png)
<!-- Placeholder: 2-3 key screens of the bigger sample app, ideally light+dark variants in one image -->

We approached the refresh in two passes: first a thorough cleanup of legacy screens, dead components, and unused locales, and then a full styling-layer rewrite around NativeWind v4 with a shadcn-style design token system. Along the way we also built two sample apps on top of the new template, so the changes aren't just theoretical — they've been exercised against real screens and real flows.

The changes ship to both the **`react-native-pro`** template and the **`microservice/apps/mobile/react-native`** template, so layered, single-layer (no-layers), and microservice solutions all get the same modernized mobile experience.
@github-actions
Copy link
Copy Markdown
Contributor

Images automagically compressed by Calibre's image-actions

Compression reduced images by 66.5%, saving 1.5 MB.

Filename Before After Improvement Visual comparison
docs/en/Community-Articles/13-05-2026-new-react-native/images/discovery.png 582.4 KB 88.0 KB 84.9% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/negotiation.png 571.7 KB 84.5 KB 85.2% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/job-feed.png 559.3 KB 93.5 KB 83.3% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-light.png 94.7 KB 74.7 KB 21.1% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-small-1.png 89.8 KB 70.7 KB 21.2% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-small-3.png 88.7 KB 70.8 KB 20.2% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-small-2.png 120.4 KB 105.2 KB 12.6% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-dark.png 81.7 KB 71.5 KB 12.5% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-old-menu.png 85.3 KB 78.2 KB 8.3% View diff
docs/en/Community-Articles/13-05-2026-new-react-native/images/rn-new-drawer-menu.png 44.8 KB 40.5 KB 9.6% View diff

2 images did not require optimisation.

@sumeyyeKurtulus sumeyyeKurtulus merged commit 32bbf37 into dev May 21, 2026
1 check passed
@sumeyyeKurtulus sumeyyeKurtulus deleted the rn-article branch May 21, 2026 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants