Add animation to Segmented Button icons by aravind3566 · Pull Request #4543 · callstack/react-native-paper

aravind3566 · 2024-11-07T07:17:42Z

A pull request for the react-native-paper repository adds animated icon changes to SegmentedButtons and SegmentedButtonItem components, improving UI and addressing an unspecified issue.

Key Takeaways:

A pull request was created for the react-native-paper repository.
The pull request includes changes to SegmentedButtons.tsx and SegmentedButtonItem.tsx files.
The main change is the addition of an animated icon feature to the SegmentedButtons component.
Three commits were made on November 7, 2024.
The pull request involves 13 additions and 2 deletions across 2 files.
The pull request is mergeable.
Add option for number of lines for label text
The changes include adding an animated property to both SegmentedButtons and SegmentedButtonItem components.

Source:
main...aravind3566:react-native-paper:main

callstack-bot · 2024-11-07T07:21:50Z

Hey @aravind3566, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

Label text number Of Lines of the button.

…Lines Add Label text number of lines of the button

…Lines Update Button.tsx

* chore: remove md2 support * docs: remove md2 references from docs * chore: update example to use md3 only, removing md2 references * chore: remove Typography/v2 and version references from types * chore: remove subtitle and subtitleStyle from AppbarContent * chore: remove getColor from BottomNavigation

* docs: remove md2 references from docs * fix: pre-commit hook lint issues * fix: ripple not showing

* fixes callstack#4894

* fix: update colors as per material-components color tokens * see https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/color/res/values/tokens.xml * fix: update the color schema for LightTheme and DarkTheme * see: https://m3.material.io/styles/color/roles

* chore: remove md2 support * fix: update colors as per material-components color tokens * see https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/color/res/values/tokens.xml * fix: update the color schema for LightTheme and DarkTheme * see: https://m3.material.io/styles/color/roles * feat: add DynamicTheme * Known limitation: surface/container roles on API 31-33 use * @color/m3_ref_palette_dynamic_neutral_variant* (MCL resources that require a * native DynamicColors setup). No @android:color/ equivalent exists for those * slots. Reference palette values are used as fallback on API 31-33. * refactor: remove usage of expo-material3-theme * refactor: rename "device colors" to "Dynamic Theme" * feat: update Colors and stateOpacity tokens for PlatformColor compatibility * surfaceDisabled, onSurfaceDisabled and backdrop which were not part of the MD standard were removed * the reference theme elevation colors now use the correct neutral tones; see https://m3.material.io/blog/tone-based-surface-color-m3 * replace usage of "alpha" with opacity or surface colors * remove disabled FAB prop

* refactor: remove MD3 prefix and use deprecated aliases * refactor: strip remaining v3 version markers

Adds src/theme/tokens/sys/color/roles.ts with a roleToTone table keyed by (mode, contrast) and a buildScheme() function. LightTheme and DarkTheme replace their hand-duplicated color literals with a single buildScheme() call each. Output shape is identical; tone values match the existing hand-written spec.

…#4917) * feat: add theme.state opacity tokens and split theme types * feat: add disabled and enabled opacity to theme.state * fix: code review findings

…stack#4920) Adds 15 *Emphasized entries per M3 Design Kit: Display/Headline/TitleLarge/Body use Medium (500), TitleMedium/TitleSmall/Label use Bold (700). Adds weightBold to ref.typeface. Fixes displayLarge letterSpacing (0 -> -0.25) and bodyLarge letterSpacing (0.15 -> 0.5).

…support (callstack#4921)

Adds theme.motion with two preset schemes (expressiveMotion default, standardMotion), M3 easing curves, and duration constants verified against the material.io spec. Includes toRawSpring() helper to convert the spec damping ratio to the raw coefficient expected by Animated.spring and Reanimated

* feat: reanimated as peer dependency

)

Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

…eme export - DynamicTheme.android: replace duplicated light/dark tables with a single colorRoleMap + buildDynamicColors helper; use Palette.* tokens directly for the ref fallback instead of reading back through LightTheme.colors.*/DarkTheme.colors.*; export isDynamicColorSupported and short-circuit map construction when unsupported - PaperProvider: respect theme.dark when picking the base scheme and shallow-merge colors so partial color overrides survive - Remove public DefaultTheme export (use LightTheme); update internal imports and babel-import-rewrite fixtures

…stack#4953)

Adds an `error?: boolean` prop to Checkbox, CheckboxAndroid and CheckboxIOS. When true, the outline (unchecked) and container (checked / indeterminate) use `theme.colors.error`. The `disabled` state and explicit `color` / `uncheckedColor` overrides take precedence. Addresses one bullet from callstack#4937 / callstack#4949 (Checkbox section, "Error state not implemented"). Verified visually on iOS Simulator and Android Emulator across light and dark themes.

aravind3566 added 3 commits November 7, 2024 14:10

Added icon change is animated.

f93741b

Update SegmentedButtons.tsx

c259d14

Update SegmentedButtonItem.tsx

8afc429

aravind3566 added 4 commits November 7, 2024 14:24

Update SegmentedButtonItem.tsx

34c3ca7

Update SegmentedButtonItem.tsx

0640694

Update SegmentedButtonItem.tsx

a671ed8

Update SegmentedButtonItem.tsx

1cd4012

aravindIapparel approved these changes Nov 8, 2024

View reviewed changes

aravindIapparel approved these changes Nov 8, 2024 •

edited

Loading

View reviewed changes

aravind3566 added 2 commits November 8, 2024 15:32

Update SegmentedButtons.tsx

fac696d

Update SegmentedButtonItem.tsx

9b3ae85

aravindIapparel approved these changes Nov 11, 2024

View reviewed changes

AravindHuminn approved these changes Nov 11, 2024

View reviewed changes

aravind3566 added 3 commits November 19, 2024 09:00

Update Button.tsx

29b7793

Update Button.tsx

e57f88c

Update Button.tsx

a8242c0

Label text number Of Lines of the button.

aravind3566 marked this pull request as draft November 19, 2024 02:21

aravind3566 marked this pull request as ready for review November 19, 2024 02:21

aravind3566 added 6 commits November 19, 2024 09:22

Merge pull request #1 from aravind3566/aravind3566-update-button-noOf…

10e2c15

…Lines Add Label text number of lines of the button

Update Button.tsx

a9b2530

Update Button.tsx

1c676aa

Merge branch 'callstack:main' into main

c979ba5

Merge branch 'main' into aravind3566-update-button-noOfLines

c453243

Merge pull request #2 from aravind3566/aravind3566-update-button-noOf…

c9d9020

…Lines Update Button.tsx

lukewalczak force-pushed the main branch 4 times, most recently from db1ca25 to dc21edf Compare May 8, 2025 08:39

aravind3566 requested a review from aravindIapparel May 29, 2025 00:59

aravind3566 added 2 commits May 29, 2025 08:10

Update Button.tsx

d52adda

Merge branch 'callstack:main' into main

522f8c8

aravindIapparel approved these changes Jun 9, 2025

View reviewed changes

aravind3566 and others added 26 commits June 24, 2025 15:42

Merge branch 'callstack:main' into main

8e9f188

fix: ripple not showing (callstack#4897)

f39da66

* docs: remove md2 references from docs * fix: pre-commit hook lint issues * fix: ripple not showing

feat: remove customRippleColor from components (callstack#4899)

1369526

* fixes callstack#4894

refactor: remove MD3 prefix and use deprecated aliases (callstack#4910)

f7a2a65

* refactor: remove MD3 prefix and use deprecated aliases * refactor: strip remaining v3 version markers

refactor: move styles/ into src/theme/ tree (callstack#4915)

2a0072e

feat: add theme.state opacity tokens and split theme types (callstack…

f998dff

…#4917) * feat: add theme.state opacity tokens and split theme types * feat: add disabled and enabled opacity to theme.state * fix: code review findings

feat: add theme.shapes and cornersToStyle (callstack#4919)

b88ec19

feat: add direction prop to PaperProvider and useLocale hook for RTL …

01b1982

…support (callstack#4921)

feat: add elevation tokens and fix Android dp spec bug (callstack#4923)

2f8b840

feat: react-native-reanimated as peer dependency (callstack#4912)

9ded0ac

* feat: reanimated as peer dependency

refactor: add reduceMotion prop and useReduceMotion hook (callstack#4924

e7dff9f

)

chore: upgrade example app to Expo SDK 56 (callstack#4944)

f5b5d75

Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

chore: properly remove module-resolver (callstack#4947)

46292bd

refactor: replace string with ColorValue for ThemeColors

b307cd5

feat(v6): remove deprecated public API

3920cf0

chore: upgrade example to react navigation 8 alpha (callstack#4948)

5679298

docs: update react-native-web guide to reflect Expo-based setup (call…

6cbc498

…stack#4953)

Merge branch 'main' into main

54d2ffb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add animation to Segmented Button icons#4543

Add animation to Segmented Button icons#4543
aravind3566 wants to merge 47 commits into
callstack:5.0from
aravind3566:main

aravind3566 commented Nov 7, 2024 •

edited

Loading

Uh oh!

callstack-bot commented Nov 7, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

Uh oh!

Uh oh!

Conversation

aravind3566 commented Nov 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

callstack-bot commented Nov 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

aravind3566 commented Nov 7, 2024 •

edited

Loading

callstack-bot commented Nov 7, 2024 •

edited

Loading