Skip to content

Commit 45d62b6

Browse files
committed
docs(v7): rn-web parity follow-ups
- object-fit: rn-web Image now picks up the CSS property via resizeMode - styled.ScrollView flex-shrink: 0 baseline applies on native only; rn-web keeps the default so scrolling works
1 parent 3469e58 commit 45d62b6

3 files changed

Lines changed: 3 additions & 3 deletions

File tree

public/llms.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Logical shorthands work as authored: `margin-inline`, `margin-block`, `padding-i
5959

6060
`place-items` and `place-self` shorthands work for the align axis (Yoga doesn't have `justify-items` / `justify-self`; the justify side is a no-op on native but reaches rn-web).
6161

62-
`field-sizing: content` on `<TextInput>` auto-grows the field to its content. `interactivity: inert` (CSS UI 5) suppresses interaction and hides the subtree from accessibility services. `text-overflow: ellipsis | clip` truncates `<Text>` (pair with `line-clamp: N` for multi-line). `overscroll-behavior: contain | none` disables overscroll on `ScrollView` / `FlatList`; `scrollbar-width: none` hides scroll indicators. `accent-color` tints `<Switch>` (`auto` picks up the platform accent color). `direction: ltr | rtl` controls `<Text>` bidi. `styled.ScrollView` defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent (opt back in with `flex-shrink: 1`).
62+
`field-sizing: content` on `<TextInput>` auto-grows the field to its content. `interactivity: inert` (CSS UI 5) suppresses interaction and hides the subtree from accessibility services. `text-overflow: ellipsis | clip` truncates `<Text>` (pair with `line-clamp: N` for multi-line). `overscroll-behavior: contain | none` disables overscroll on `ScrollView` / `FlatList`; `scrollbar-width: none` hides scroll indicators. `accent-color` tints `<Switch>` (`auto` picks up the platform accent color). `direction: ltr | rtl` controls `<Text>` bidi. `styled.ScrollView` on native defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent (opt back in with `flex-shrink: 1`). rn-web keeps the default since it relies on `flex-shrink: 1` to scroll.
6363

6464
`background-image: linear-gradient(...)` and `radial-gradient(...)` render via React Native's experimental gradient parser (RN 0.85+). `filter: blur(4px) saturate(1.5)` and the full filter-function chain work. See the iOS setup note below for filters that need an explicit opt-in. `box-shadow` with spread and inset round-trips as a string.
6565

sections/v7/native.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const Card = styled.View`
4141
- **`text-overflow: ellipsis | clip`** truncates `<Text>`; pair with `line-clamp: N` for multi-line.
4242
- **`overscroll-behavior: contain | none`** disables overscroll on `ScrollView` / `FlatList`. **`scrollbar-width: none`** hides scroll indicators.
4343
- **`accent-color`** tints `<Switch>` (`auto` picks up the platform accent color).
44-
- **`styled.ScrollView`** now defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent. Set `flex-shrink: 1` in your template to opt back in.
44+
- **`styled.ScrollView`** on native defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent. Set `flex-shrink: 1` in your template to opt back in. rn-web keeps the default since it relies on `flex-shrink: 1` to scroll.
4545

4646
**`env(safe-area-inset-*)` caveat.** The function parses correctly but currently resolves to 0; the integration with `react-native-safe-area-context` is not wired yet. Use `useSafeAreaInsets()` directly until that lands.
4747

utils/cssCompat.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -786,7 +786,7 @@ export const COMPAT_ENTRIES: CompatEntry[] = [
786786
iosStock: 'yes',
787787
androidStock: 'yes',
788788
summary:
789-
'Stock RN 0.85+ registers `objectFit` as a native style key on `<Image>` (fill / contain / cover / scale-down / none). v7 passes the CSS through unchanged. `object-position` has no native equivalent on either platform and is web-only; on native, alignment falls back to the `Image` defaults.',
789+
'Stock RN 0.85+ registers `objectFit` as a native style key on `<Image>` (fill / contain / cover / scale-down / none); v7 passes the CSS through unchanged. On rn-web, the Image element ignores the CSS property, so v7 also lifts `resizeMode` as a prop. `object-position` has no native equivalent on either platform and is web-only; on native, alignment falls back to the `Image` defaults.',
790790
},
791791
{
792792
id: 'aspect-ratio',

0 commit comments

Comments
 (0)