iOS app open/close transition shows shadow on SegmentedButtons

[astrojams1]

Current behaviour

I am rendering a Segmented Button (basic, vanilla implementation)
When I open or close the iOS app, I see a gradient within one of the segments.

Expected behaviour

No gradient.

How to reproduce?

Use iOS
Add a segmented button to your view.
Close or open the iOS app to show the gradient.

Preview

Implementation:
<SegmentedButtons value={buttonValue} onValueChange={setButtonValue} buttons={[ { value: 'consumed', label: 'Consumed', showSelectedCheck: true }, { value: 'remaining', label: 'Remaining', showSelectedCheck: true }, ]} density="small" />

Screenshot:

What have you tried so far?

Explicitly setting a background color with
style={[styles.group, { backgroundColor: theme.colors.background }]}

Your Environment

software	version
ios	16.0
react-native	0.76.3
react-native-paper	^5.12.5

[kheravarun08]

@astrojams1 Yes I am also facing same issue . SegmentedButtons may get re-evaluated when the app becomes active again, leading iOS to recreate the layers dynamically, sometimes causing unintended visual effects.

I believe that as a work around you can add activity indicator whenever the app comes from background to foreground.

Please find the code below :

import React, { useState, useEffect, useRef } from 'react';
import { AppState, View, ActivityIndicator } from 'react-native';
import { SegmentedButtons } from 'react-native-paper';

const MySegmentedControl = () => {
const appState = useRef(AppState.currentState);
const selectedValue = useRef('first'); // Avoid unnecessary re-renders
const [isLoading, setIsLoading] = useState(false); // Controls Activity Indicator

useEffect(() => {
const handleAppStateChange = (nextAppState) => {
if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
// Show the loader and refresh SegmentedButtons
setIsLoading(true);
setTimeout(() => setIsLoading(false), 500); // Simulate a smooth refresh
}
appState.current = nextAppState;
};

const subscription = AppState.addEventListener('change', handleAppStateChange);
return () => subscription.remove();

}, []);

return (
<View style={{ padding: 20, alignItems: 'center' }}>
{isLoading ? (
// React Native Paper theme color
) : (
<SegmentedButtons
value={selectedValue.current}
onValueChange={(val) => (selectedValue.current = val)}
buttons={[
{ value: 'first', label: 'First' },
{ value: 'second', label: 'Second' },
{ value: 'third', label: 'Third' },
]}
style={{ backgroundColor: 'white' }} // Ensures no transparency issues
/>
)}

);
};

export default MySegmentedControl;