[pull] main from expo:main

apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx

@@ -142,6 +142,9 @@ export default function ModifiersScreen() {
     { key: 'bottom', label: 'Bottom' },
   ];
 
+  // `bar` has no tvOS counterpart and leaves the view unpainted there, so it comes last.
+  const materials = ['ultraThin', 'thin', 'regular', 'thick', 'ultraThick', 'bar'] as const;
+
   const badgeType = ['standard', 'increased', 'decreased'] as const;
   const [badgeIndex, setBadgeIndex] = useState(0);
 
@@ -165,7 +168,10 @@ export default function ModifiersScreen() {
               width: dimensions.width,
             }),
           ]}>
-          <Section title="Material foreground style">
+          {/* The same `ShapeStyle` values work in every modifier that paints an area:
+              here the backdrop is painted with `foregroundStyle` and the labels on top
+              of it with `background`. */}
+          <Section title="Shape styles">
             <ZStack>
               <Rectangle
                 modifiers={[
@@ -178,14 +184,41 @@ export default function ModifiersScreen() {
                   cornerRadius(12),
                 ]}
               />
-              <Text
-                modifiers={[
-                  font({ size: 34, weight: 'bold' }),
-                  foregroundStyle({ type: 'material', material: 'regular' }),
-                  padding(),
-                ]}>
-                Frosted
-              </Text>
+              <VStack modifiers={[padding()]}>
+                <Text
+                  modifiers={[
+                    font({ size: 34, weight: 'bold' }),
+                    foregroundStyle({ type: 'material', material: 'regular' }),
+                    padding(),
+                  ]}>
+                  Frosted
+                </Text>
+                {materials.map((material) => (
+                  <Text
+                    key={material}
+                    modifiers={[
+                      padding(),
+                      background({ type: 'material', material }, shapes.capsule()),
+                    ]}>
+                    {material}
+                  </Text>
+                ))}
+                <Text
+                  modifiers={[
+                    padding(),
+                    background(
+                      {
+                        type: 'linearGradient',
+                        colors: ['#4facfe', '#00f2fe'],
+                        startPoint: { x: 0, y: 0 },
+                        endPoint: { x: 1, y: 0 },
+                      },
+                      shapes.roundedRectangle({ cornerRadius: 12 })
+                    ),
+                  ]}>
+                  linearGradient
+                </Text>
+              </VStack>
             </ZStack>
           </Section>
 

apps/native-component-list/src/screens/UI/SliderScreen.android.tsx

@@ -1,6 +1,7 @@
 import {
   Host,
   Slider,
+  VerticalSlider,
   Shape,
   Row,
   Text as ComposeText,
@@ -26,6 +27,8 @@ export default function SliderScreen() {
   const [rangeValue, setRangeValue] = React.useState(2);
   const [colorsValue, setColorsValue] = React.useState(0.5);
   const [fullCustomValue, setFullCustomValue] = React.useState(0.5);
+  const [verticalValue, setVerticalValue] = React.useState(0.25);
+  const [reversedVerticalValue, setReversedVerticalValue] = React.useState(0.75);
   return (
     <Host style={{ flex: 1 }}>
       <LazyColumn verticalArrangement={{ spacedBy: 16 }} modifiers={[padding(16, 16, 16, 16)]}>
@@ -36,6 +39,27 @@ export default function SliderScreen() {
             <Slider />
           </Column>
         </Card>
+        <Card modifiers={[fillMaxWidth()]}>
+          <Column verticalArrangement={{ spacedBy: 12 }} modifiers={[padding(16, 16, 16, 16)]}>
+            <ComposeText>Vertical</ComposeText>
+            <ComposeText>
+              Default direction on the left and reversed direction on the right.
+            </ComposeText>
+            <Row horizontalArrangement={{ spacedBy: 32 }}>
+              <VerticalSlider
+                value={verticalValue}
+                onValueChange={setVerticalValue}
+                modifiers={[height(200)]}
+              />
+              <VerticalSlider
+                value={reversedVerticalValue}
+                reverseDirection
+                onValueChange={setReversedVerticalValue}
+                modifiers={[height(200)]}
+              />
+            </Row>
+          </Column>
+        </Card>
         <Card modifiers={[fillMaxWidth()]}>
           <Column verticalArrangement={{ spacedBy: 12 }} modifiers={[padding(16, 16, 16, 16)]}>
             <ComposeText>Stepped</ComposeText>

apps/router-e2e/README.md

@@ -8,16 +8,6 @@ The runnable projects are located in the `__e2e__` directory. We use scripts in
 
 To run the E2E tests, navigate to `packages/@expo/cli` and run `pnpm test:e2e <NAME_OF_RUNNABLE_PROJECT>`, or `pnpm test:playwright <NAME_OF_RUNNABLE_PROJECT>`
 
-### Maestro E2E Tests
-
-To run the tests for native navigation, in the `apps/router-e2e` directory, run:
-
-```bash
-pnpm test:e2e
-```
-
-This command will start the expo server and run the maestro tests located in the `__e2e__/native-navigation/__tests__` directory.
-
 ### Native
 
 - Run `pnpm prebuild` to create the ios and android directories using the latest `expo-template-bare-minimum` template.