Skip to content

Commit cc7839a

Browse files
DimitarNestorovDimitarNestorov
committed
fix: iOS Surface styles
1 parent 7c7241a commit cc7839a

35 files changed

+1210
-519
lines changed

‎example/src/Examples/SurfaceExample.tsx

+50-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import { StyleSheet } from 'react-native';
2+
import { StyleSheet, View } from 'react-native';
33

4-
import { MD3Elevation, Surface, Text } from 'react-native-paper';
4+
import { MD3Elevation, Surface, Text, MD3Colors } from 'react-native-paper';
55

66
import { useExampleTheme } from '..';
77
import { isWeb } from '../../utils';
@@ -31,6 +31,23 @@ const SurfaceExample = () => {
3131
</Text>
3232
</Surface>
3333
))}
34+
35+
<View style={styles.horizontalSurfacesContainer}>
36+
<Surface style={styles.horizontalSurface}>
37+
<Text style={styles.centerText}>Left</Text>
38+
</Surface>
39+
<Surface style={styles.horizontalSurface}>
40+
<Text style={styles.centerText}>Right</Text>
41+
</Surface>
42+
</View>
43+
<View style={styles.verticalSurfacesContainer}>
44+
<Surface style={styles.verticalSurface}>
45+
<Text style={styles.centerText}>Top</Text>
46+
</Surface>
47+
<Surface style={styles.verticalSurface}>
48+
<Text style={styles.centerText}>Bottom</Text>
49+
</Surface>
50+
</View>
3451
</ScreenWrapper>
3552
);
3653
};
@@ -61,6 +78,37 @@ const styles = StyleSheet.create({
6178
alignItems: 'center',
6279
justifyContent: 'center',
6380
},
81+
82+
horizontalSurfacesContainer: {
83+
flexDirection: 'row',
84+
justifyContent: 'space-between',
85+
width: '100%',
86+
marginBottom: 20,
87+
borderColor: MD3Colors.tertiary50,
88+
padding: 10,
89+
borderWidth: 1,
90+
},
91+
horizontalSurface: {
92+
width: '48%',
93+
},
94+
95+
verticalSurfacesContainer: {
96+
height: 400,
97+
justifyContent: 'space-between',
98+
width: '100%',
99+
marginBottom: 100,
100+
borderColor: MD3Colors.tertiary50,
101+
padding: 10,
102+
borderWidth: 1,
103+
},
104+
verticalSurface: {
105+
height: '48%',
106+
justifyContent: 'center',
107+
},
108+
109+
centerText: {
110+
textAlign: 'center',
111+
},
64112
});
65113

66114
export default SurfaceExample;

‎src/components/Surface.tsx

+47-13
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import overlay, { isAnimatedValue } from '../styles/overlay';
1313
import shadow from '../styles/shadow';
1414
import type { ThemeProp, MD3Elevation } from '../types';
1515
import { forwardRef } from '../utils/forwardRef';
16+
import { splitStyles } from '../utils/splitStyles';
1617

1718
export type Props = React.ComponentPropsWithRef<typeof View> & {
1819
/**
@@ -229,10 +230,34 @@ const Surface = forwardRef<View, Props>(
229230
start,
230231
end,
231232
flex,
233+
width,
234+
height,
235+
transform,
236+
opacity,
232237
...restStyle
233238
} = (StyleSheet.flatten(style) || {}) as ViewStyle;
234239

235-
const absoluteStyles = {
240+
const [filteredStyle, borderRadiusStyle, marginStyle] = splitStyles(
241+
restStyle,
242+
(style) => style.startsWith('border') && style.endsWith('Radius'),
243+
(style) => style.startsWith('margin')
244+
);
245+
246+
const sharedStyles = {
247+
flex: height ? 1 : undefined,
248+
...borderRadiusStyle,
249+
};
250+
251+
const middleLayerViewStyles = [
252+
sharedStyles,
253+
{
254+
backgroundColor,
255+
},
256+
];
257+
258+
const innerLayerViewStyles = [filteredStyle, sharedStyles];
259+
260+
const outerLayerViewStyles = {
236261
position,
237262
alignSelf,
238263
top,
@@ -241,14 +266,15 @@ const Surface = forwardRef<View, Props>(
241266
left,
242267
start,
243268
end,
269+
flex,
270+
width,
271+
height,
272+
transform,
273+
opacity,
274+
...borderRadiusStyle,
275+
...marginStyle,
244276
};
245277

246-
const sharedStyle = [{ backgroundColor, flex }, restStyle];
247-
248-
const innerLayerViewStyles = [{ flex }];
249-
250-
const outerLayerViewStyles = [absoluteStyles, innerLayerViewStyles];
251-
252278
if (isAnimatedValue(elevation)) {
253279
const inputRange = [0, 1, 2, 3, 4, 5];
254280

@@ -280,10 +306,14 @@ const Surface = forwardRef<View, Props>(
280306
testID={`${testID}-outer-layer`}
281307
>
282308
<Animated.View
283-
style={[getStyleForAnimatedShadowLayer(1), innerLayerViewStyles]}
284-
testID={`${testID}-inner-layer`}
309+
style={[getStyleForAnimatedShadowLayer(1), middleLayerViewStyles]}
310+
testID={`${testID}-middle-layer`}
285311
>
286-
<Animated.View {...props} testID={testID} style={sharedStyle}>
312+
<Animated.View
313+
{...props}
314+
testID={testID}
315+
style={innerLayerViewStyles}
316+
>
287317
{children}
288318
</Animated.View>
289319
</Animated.View>
@@ -312,10 +342,14 @@ const Surface = forwardRef<View, Props>(
312342
testID={`${testID}-outer-layer`}
313343
>
314344
<Animated.View
315-
style={[getStyleForShadowLayer(1), innerLayerViewStyles]}
316-
testID={`${testID}-inner-layer`}
345+
style={[getStyleForShadowLayer(1), middleLayerViewStyles]}
346+
testID={`${testID}-middle-layer`}
317347
>
318-
<Animated.View {...props} testID={testID} style={sharedStyle}>
348+
<Animated.View
349+
{...props}
350+
testID={testID}
351+
style={innerLayerViewStyles}
352+
>
319353
{children}
320354
</Animated.View>
321355
</Animated.View>

‎src/components/__tests__/AnimatedFAB.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ it('animated value changes correctly', () => {
7979
style={[{ transform: [{ scale: value }] }]}
8080
/>
8181
);
82-
expect(getByTestId('animated-fab-container')).toHaveStyle({
82+
expect(getByTestId('animated-fab-container-outer-layer')).toHaveStyle({
8383
transform: [{ scale: 1 }],
8484
});
8585

@@ -91,7 +91,7 @@ it('animated value changes correctly', () => {
9191

9292
jest.advanceTimersByTime(200);
9393

94-
expect(getByTestId('animated-fab-container')).toHaveStyle({
94+
expect(getByTestId('animated-fab-container-outer-layer')).toHaveStyle({
9595
transform: [{ scale: 1.5 }],
9696
});
9797
});

‎src/components/__tests__/Appbar/Appbar.test.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,7 @@ describe('animated value changes correctly', () => {
384384
<Appbar.Action icon="menu" />
385385
</Appbar>
386386
);
387-
expect(getByTestId('appbar')).toHaveStyle({
387+
expect(getByTestId('appbar-outer-layer')).toHaveStyle({
388388
transform: [{ scale: 1 }],
389389
});
390390

@@ -396,7 +396,7 @@ describe('animated value changes correctly', () => {
396396

397397
jest.advanceTimersByTime(200);
398398

399-
expect(getByTestId('appbar')).toHaveStyle({
399+
expect(getByTestId('appbar-outer-layer')).toHaveStyle({
400400
transform: [{ scale: 1.5 }],
401401
});
402402
});
@@ -412,7 +412,7 @@ describe('animated value changes correctly', () => {
412412
/>
413413
</Appbar>
414414
);
415-
expect(getByTestId('appbar-action-container')).toHaveStyle({
415+
expect(getByTestId('appbar-action-container-outer-layer')).toHaveStyle({
416416
transform: [{ scale: 1 }],
417417
});
418418

@@ -424,7 +424,7 @@ describe('animated value changes correctly', () => {
424424

425425
jest.advanceTimersByTime(200);
426426

427-
expect(getByTestId('appbar-action-container')).toHaveStyle({
427+
expect(getByTestId('appbar-action-container-outer-layer')).toHaveStyle({
428428
transform: [{ scale: 1.5 }],
429429
});
430430
});
@@ -439,9 +439,11 @@ describe('animated value changes correctly', () => {
439439
/>
440440
</Appbar>
441441
);
442-
expect(getByTestId('appbar-back-action-container')).toHaveStyle({
443-
transform: [{ scale: 1 }],
444-
});
442+
expect(getByTestId('appbar-back-action-container-outer-layer')).toHaveStyle(
443+
{
444+
transform: [{ scale: 1 }],
445+
}
446+
);
445447

446448
Animated.timing(value, {
447449
toValue: 1.5,
@@ -451,9 +453,11 @@ describe('animated value changes correctly', () => {
451453

452454
jest.advanceTimersByTime(200);
453455

454-
expect(getByTestId('appbar-back-action-container')).toHaveStyle({
455-
transform: [{ scale: 1.5 }],
456-
});
456+
expect(getByTestId('appbar-back-action-container-outer-layer')).toHaveStyle(
457+
{
458+
transform: [{ scale: 1.5 }],
459+
}
460+
);
457461
});
458462

459463
it('header animated value changes correctly', () => {
@@ -468,7 +472,7 @@ describe('animated value changes correctly', () => {
468472
</Appbar.Header>
469473
</mockSafeAreaContext.SafeAreaProvider>
470474
);
471-
expect(getByTestId('appbar-header')).toHaveStyle({
475+
expect(getByTestId('appbar-header-outer-layer')).toHaveStyle({
472476
transform: [{ scale: 1 }],
473477
});
474478

@@ -480,7 +484,7 @@ describe('animated value changes correctly', () => {
480484

481485
jest.advanceTimersByTime(200);
482486

483-
expect(getByTestId('appbar-header')).toHaveStyle({
487+
expect(getByTestId('appbar-header-outer-layer')).toHaveStyle({
484488
transform: [{ scale: 1.5 }],
485489
});
486490
});

0 commit comments

Comments
 (0)