t-online News Mobile App

t-online is one of Germany's largest news portals with millions of daily readers. The mobile app provides a native experience for accessing news articles, live sports coverage, weather updates, and more.

Project Overview

Built the t-online news mobile application from the ground up using React Native and Expo. The app delivers t-online.de content through a hybrid WebView architecture with native navigation, push notifications, and ad monetization. As the primary developer, I implemented all core features and established the technical foundation for the project.

Key Contributions

Configurable Tab Bar

Implemented a user-customizable bottom navigation system that allows readers to personalize their experience. Users can select up to 3 tabs from available sections (News, Sports, Weather, Live Ticker, Topics) and reorder them via drag-and-drop. Preferences persist across app sessions using local storage.

Search with Auto-Suggestions

Built a performant search experience with real-time suggestions as users type. Implemented request debouncing and cancellation using AbortController to prevent race conditions. Optimized list rendering using @shopify/flash-list for smooth scrolling through thousands of results.

Multi-WebView Navigation

Designed and implemented an architecture for managing multiple WebView instances per tab with proper navigation stack management. Each tab maintains its own browsing history, enabling natural back/forward navigation while preserving scroll positions and page state.

Dark Mode Support

Implemented system-wide dark mode that synchronizes between the native app shell and WebView content. Created a custom Expo module to bridge iOS/Android theme detection to the WebView's color scheme, ensuring a consistent visual experience.

Push Notifications

Integrated Airship SDK for push notification delivery with deep linking support. Implemented notification channels for different content categories (Breaking News, Sports, etc.) and handled background/foreground notification routing to the appropriate content.

Ad Monetization

Integrated Google Mobile Ads SDK and Taboola native ads into the WebView context. Implemented ad refresh logic that reloads ads when users navigate between articles, maximizing revenue while maintaining performance.

Onboarding Tutorial

Created a first-launch tutorial flow introducing key app features. The onboarding guides users through notification permission requests and personalization options before presenting the main content.

Deep Linking

Implemented Universal Links (iOS) and App Links (Android) to handle t-online.de URLs. The app intercepts article links from external sources and opens them in the native app experience rather than the browser.

Analytics & Crash Reporting

Integrated Firebase Crashlytics for real-time crash reporting and Firebase Analytics for user behavior tracking. Also implemented INFOnline/IVW tracking required for German media measurement standards.

CI/CD Pipeline

Set up EAS Build for automated iOS and Android builds with automatic App Store/Play Store submission. Configured GitHub Actions workflows for validation, testing, and deployment.

Additional Contributions

@stroeer/radio-custom-webview

Created a custom React Native WebView library tailored for the app's needs. Features include native Taboola ad integration, pull-to-refresh functionality, and Google Mobile Ads SDK bridging for in-WebView ad rendering.

react-native-infoonline

Developed a React Native wrapper for the INFOnline/IVW measurement SDK, enabling GDPR-compliant analytics tracking required for German media publishers. Supports both iOS and Android with automatic session management.