Skip to content

Conversation

@theianmay
Copy link
Member

Motivation

This PR addresses deprecation warnings and TypeScript errors in the example app to provide cleaner, more maintainable reference code for developers using react-native-elements.

Issues fixed:

  • Deprecation warnings for outdated Ionicons v5 icon names (ios-* prefixes)
  • Deprecation warnings for React Native's built-in SafeAreaView
  • Warning about setLayoutAnimationEnabledExperimental being a no-op in New Architecture
  • TypeScript errors in login screen components related to ref typing and validation logic

Since the example app serves as reference code that developers can copy, we want to avoid propagating deprecated patterns.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

  • Jest Unit Test
  • Checked with example app (tested on Expo Go Android emulator)
  • Verified all deprecation warnings are resolved
  • Verified TypeScript compilation passes without errors
  • Confirmed layout and spacing remain correct after SafeAreaView changes
  • Tested login screen validation and animations still work correctly

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • New and existing unit tests pass locally with my changes

Additional context

Changes summary:

Icon updates:

  • Updated 15 Ionicons from v5 (ios-*) to v6 universal names in settings.tsx
  • Updated AntDesign icon from "rocket1" to "rocket" in header.tsx

SafeAreaView migration:

  • Migrated from deprecated react-native SafeAreaView to react-native-safe-area-context
  • Added proper edges prop configuration to maintain correct spacing
  • Updated in [whatsappClone.tsx], [profile.tsx], and [image.tsx]

Layout animation fix:

  • Added conditional check for setLayoutAnimationEnabledExperimental to only run on Android old architecture
  • Prevents no-op warning in New Architecture while maintaining compatibility

TypeScript improvements:

  • Fixed ref types in login screens to allow shake() and focus() methods
  • Separated validation logic from UI side effects for cleaner code
  • Fixed in [screen2.tsx] and [screen3.tsx]

Package metadata:

  • Updated keywords in @rneui/themed package.json for better NPM discoverability

All changes maintain backward compatibility and improve code quality without affecting functionality.

- Replaced React Native's built-in SafeAreaView with react-native-safe-area-context version
- Added explicit edge configuration for better control over safe area insets
- Fixed type coercion in image URL generation
…new architecture

- Fixed ref types from InputProps to any and updated all ref access to use .current
- Added Platform check to only enable LayoutAnimation on Android old architecture
- Refactored validation logic to properly check conditions before calling shake() method
@theianmay theianmay self-assigned this Nov 5, 2025
@theianmay theianmay added the Example App Issues related to example app label Nov 5, 2025
@codecov
Copy link

codecov bot commented Nov 5, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.13%. Comparing base (81edead) to head (a1b6bc7).
⚠️ Report is 14 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff             @@
##             next    #3995      +/-   ##
==========================================
+ Coverage   79.11%   79.13%   +0.01%     
==========================================
  Files          90       90              
  Lines        2140     2142       +2     
  Branches      945      959      +14     
==========================================
+ Hits         1693     1695       +2     
  Misses        444      444              
  Partials        3        3              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@theianmay theianmay merged commit 6599fa2 into react-native-elements:next Nov 5, 2025
9 checks passed
@theianmay theianmay deleted the update-example-app branch November 5, 2025 07:10
github-actions bot pushed a commit that referenced this pull request Nov 5, 2025
fix(example app): resolve deprecation warnings and TypeScript errors
github-actions bot pushed a commit that referenced this pull request Nov 5, 2025
fix(example app): resolve deprecation warnings and TypeScript errors
@github-project-automation github-project-automation bot moved this to Closed or Merged 🏁 in Community Roadmap 🛣 Nov 16, 2025
@theianmay theianmay added this to the v5.0.0 milestone Nov 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Example App Issues related to example app

Projects

Status: Closed or Merged 🏁

Development

Successfully merging this pull request may close these issues.

1 participant