Skip to content

[Intermediate]: Create a New Fully Working React Native Example App #3623

@venilinvasilev

Description

@venilinvasilev

🧩 Intermediate Friendly

This issue is a good fit for contributors who are already familiar with
the Hiero JS SDK and feel comfortable navigating the codebase. We
strongly recommend completing two Beginner Issues before tackling an
Intermediate Issue.

Intermediate Issues often involve:

  • Exploring existing implementations\
  • Understanding how different components work together\
  • Making thoughtful changes that follow established patterns

The goal is to support deeper problem-solving while keeping the task
clear, focused, and enjoyable to work on.


🐞 Problem Description

The current react-native-example included in the hiero-js-sdk
examples does not work out of the box and is difficult to use as a
reference.

Specifically:

  • The existing react-native-example does not run successfully from a
    fresh clone.
  • It requires non-trivial manual fixes and environment-specific
    knowledge.
  • There is no UI, making it difficult to understand SDK usage in
    real-world scenarios.
  • This creates friction for contributors and discourages React Native
    developers from adopting or contributing to the SDK.

As a result, the example does not serve its intended purpose as a
learning and onboarding tool for React Native developers.


💡 Expected Outcome

Create a brand new, fully working React Native example application
from scratch that:

1. Works Out of the Box

  • Uses a modern React Native setup (e.g., Expo or React Native CLI).
  • Includes clear and minimal setup instructions.
  • Is verified on both iOS and Android.
  • Runs successfully from a fresh clone → install → run workflow.

2. Includes a Simple UI

  • Basic navigation (tabs or stack).
  • Screens demonstrating common workflows.
  • Clear labeling and user feedback (success and error states).

3. Demonstrates Core & Common Transactions

At minimum, the app should include examples for:

  • Account creation\
  • Account balance query\
  • HBAR transfer\
  • Token creation (optional but recommended)\
  • Token transfer\
  • Transaction signing and execution\
  • Network configuration (testnet / previewnet)

4. Is Designed for Learning

  • Well-commented code.
  • Clear separation between UI components and SDK logic.
  • A comprehensive README explaining architecture, decisions, setup
    steps, and extension points.

The old react-native-example should either be deprecated or clearly
marked as legacy.


🧠 Implementation Notes

Suggested approach:

  • Scaffold a new React Native app (preferably using Expo for
    simplicity).
  • Ensure compatibility with the current hiero-js-sdk package
    version.
  • Isolate SDK interaction logic into a dedicated service/module layer.
  • Follow existing patterns from other SDK examples for transaction
    execution.
  • Carefully document environment configuration (operator ID, private
    key, network).
  • Validate the app on both iOS and Android simulators before
    submission.
  • Keep the example intentionally simple --- prioritize clarity over
    feature completeness.

✅ Acceptance Criteria

To help get this change merged smoothly:

  • Fresh clone → install → run works without manual fixes\
  • App demonstrates at least 3--5 common transactions via UI\
  • Code is easy to follow and suitable for onboarding\
  • README provides clear setup and usage instructions\
  • Old react-native-example is deprecated or marked as legacy\
  • Follow existing project conventions\
  • Avoid breaking public APIs\
  • Pass all CI checks

📚 Additional Context

This example should prioritize clarity and reliability over
completeness. It is intended as an onboarding and reference tool, not a
full-featured wallet or production-ready dApp.

If you have questions, the community is happy to help:

https://discord.com/channels/905194001349627914/1337424656138899537

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentationenhancementNew feature or requestintermediateRequires understanding of SDK architecture. May involve multiple components.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions