Skip to content

feat: create test playground + introduce navigation#275

Open
eszlamczyk wants to merge 8 commits intomainfrom
feat/example-app-test-playground
Open

feat: create test playground + introduce navigation#275
eszlamczyk wants to merge 8 commits intomainfrom
feat/example-app-test-playground

Conversation

@eszlamczyk
Copy link
Copy Markdown
Collaborator

@eszlamczyk eszlamczyk commented Apr 28, 2026

What/Why?

First phase of setting up Maestro E2E tests for
react-native-enriched-markdown. To make automated testing
feasible, a dedicated PlaygroundScreen was added to the
example app as a stable, testable surface. Additionaly introduced react-navigation to the app to make example app better to read.

React Navigation

To incorporate react navigation introduced Home screen that includes routing buttons for each available example screen (Playground, Text, Input, Stream). On top of that added simple header informing about current screen and giving ability to go back to home screen.

Playground

The playground includes:
  - Focus / Blur / Clear controls for the editor
  - Size toggle (base <-> max height) to test dynamic layout
  - Formatting toolbar with Bold, Italic, Underline,
  Strikethrough, Spoiler, and Link toggles
  - Link modal for inserting/editing links
  - "Get Raw Markdown" button that shows the current markdown
  via an alert
  - Live preview panel using EnrichedMarkdownText that
  reflects editor content (he made by typing using either features of EnrichedMarkdownTextInput or *normal markdown syntax*) in real time

Testing

Run the example app on Android or iOS and navigate to the
Playground screen. Verify that:
  - The formatting toolbar correctly applies and removes
  styles
  - The link modal opens, accepts input, and inserts/removes
  links
  - The size toggle resizes the editor
  - "Get Raw Markdown" displays the current content
  - The preview panel updates live as you type

Screenshots

Android IOS
Home screen image image
New Header
(example in text view)
image image
Playground image image
Input element screenshot
image

PR Checklist

  • Code compiles and runs on iOS
  • Code compiles and runs on Android
  • Updated documentation/README if applicable
  • Ran example app to verify changes

@eszlamczyk eszlamczyk requested a review from hryhoriiK97 April 28, 2026 15:20
@eszlamczyk eszlamczyk changed the title feat: create test playground feat: create test playground + introduce navigation Apr 29, 2026
Copy link
Copy Markdown
Collaborator

@hryhoriiK97 hryhoriiK97 left a comment

Choose a reason for hiding this comment

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

Overall looks really nice - we are moving in the right direction. I've left a few comments, please take a look 🙏

Comment thread apps/example/src/screens/HomeScreen.tsx Outdated
Comment thread apps/example/src/screens/HomeScreen.tsx Outdated
Comment thread apps/example/src/screens/PlaygroundScreen.tsx Outdated
@eszlamczyk eszlamczyk requested a review from hryhoriiK97 April 30, 2026 14:41
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.

2 participants