Skip to content

Commit 5a7bf9d

Browse files
committed
docs: tune screen transitions device frame radius
1 parent a35b038 commit 5a7bf9d

1 file changed

Lines changed: 4 additions & 4 deletions

File tree

blog/2026-04-27-building-custom-screen-transitions.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ npx pod-install ios
6868

6969
## Recreating the iOS page transition
7070

71-
<div className="device-frame">
71+
<div className="device-frame" style={{ '--device-frame-radius': '64px' }}>
7272
<video playsInline autoPlay muted loop>
7373
<source src="/assets/blog/screen-transitions/ios-reference.mp4" />
7474
</video>
@@ -155,7 +155,7 @@ const RootStack = createBlankStackNavigator({
155155
});
156156
```
157157

158-
<div className="device-frame">
158+
<div className="device-frame" style={{ '--device-frame-radius': '64px' }}>
159159
<video playsInline autoPlay muted loop>
160160
<source src="/assets/blog/screen-transitions/ios-card-transition.mp4" />
161161
</video>
@@ -183,7 +183,7 @@ Where `react-native-screen-transitions` starts to pay off is when the transition
183183

184184
## navigation.zoom()
185185

186-
<div className="device-frame">
186+
<div className="device-frame" style={{ '--device-frame-radius': '64px' }}>
187187
<video playsInline autoPlay muted loop>
188188
<source src="/assets/blog/screen-transitions/navigation-zoom.mp4" />
189189
</video>
@@ -272,7 +272,7 @@ A few choices here are worth calling out.
272272

273273
The example above works well when you have one obvious source and one obvious destination. A gallery is more interesting. You might have a masonry grid on the index screen, then a paged detail screen where the user can swipe between images before closing.
274274

275-
<div className="device-frame">
275+
<div className="device-frame" style={{ '--device-frame-radius': '64px' }}>
276276
<video playsInline autoPlay muted loop>
277277
<source src="/assets/blog/screen-transitions/boundary-groups.mp4" />
278278
</video>

0 commit comments

Comments
 (0)