Add screen transitions blog post#1488
Conversation
Add a community blog post covering react-native-screen-transitions, including setup, an iOS-style card transition, navigation.zoom(), and boundary groups. Add the accompanying demo videos and author metadata. Enable the existing static2dynamic rehype transform for blog posts so the article can use the same Static/Dynamic code example pattern as the docs.
✅ Deploy Preview for react-navigation-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| @@ -0,0 +1,350 @@ | |||
| --- | |||
| title: Building custom screen transitions with react-native-screen-transitions | |||
There was a problem hiding this comment.
Maybe "Building custom transitions with react-native-screen-transitions" or "Custom transitions with react-native-screen-transitions" to make the title a bit shorter?
| --- | ||
| title: Building custom screen transitions with react-native-screen-transitions | ||
| authors: ed | ||
| tags: [community, guide] |
There was a problem hiding this comment.
we don't have these tags in existing articles. we have a "tutorial" tag, and from past articles, they usually also have name of the library in the tag. so better would be:
| tags: [community, guide] | |
| tags: [tutorial, screen-transitions] |
| If you're on a Mac and developing for iOS, install the pods via [CocoaPods](https://cocoapods.org/) to complete the linking: | ||
|
|
||
| ```bash | ||
| npx pod-install ios | ||
| ``` | ||
|
|
||
| For the `navigationMaskEnabled` example later in the article, install `@react-native-masked-view/masked-view` too: | ||
|
|
||
| ```bash npm2yarn | ||
| npm install @react-native-masked-view/masked-view | ||
| ``` |
There was a problem hiding this comment.
I'd move the pod install step to after installing masked view
| <Tabs groupId='framework' queryString="framework"> | ||
| <TabItem value='expo' label='Expo' default> | ||
|
|
||
| In your project directory, run: | ||
|
|
||
| ```bash | ||
| npx expo install react-native-reanimated react-native-gesture-handler \ | ||
| @react-navigation/native @react-navigation/native-stack \ | ||
| @react-navigation/elements react-native-screens \ | ||
| react-native-safe-area-context | ||
| ``` | ||
|
|
||
| This will install versions of these libraries that are compatible with your Expo SDK version. | ||
|
|
||
| For the `navigationMaskEnabled` example later in the article, install `@react-native-masked-view/masked-view` too: | ||
|
|
||
| ```bash | ||
| npx expo install @react-native-masked-view/masked-view | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| <TabItem value='bare' label='Bare React Native'> | ||
|
|
||
| In your project directory, run: | ||
|
|
||
| ```bash npm2yarn | ||
| npm install react-native-reanimated react-native-gesture-handler \ | ||
| @react-navigation/native @react-navigation/native-stack \ | ||
| @react-navigation/elements react-native-screens \ | ||
| react-native-safe-area-context | ||
| ``` | ||
|
|
||
| If you're on a Mac and developing for iOS, install the pods via [CocoaPods](https://cocoapods.org/) to complete the linking: | ||
|
|
||
| ```bash | ||
| npx pod-install ios | ||
| ``` | ||
|
|
||
| For the `navigationMaskEnabled` example later in the article, install `@react-native-masked-view/masked-view` too: | ||
|
|
||
| ```bash npm2yarn | ||
| npm install @react-native-masked-view/masked-view | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| </Tabs> |
There was a problem hiding this comment.
Maybe worth consolidating masked view step to the same command, since it's part of the tutorial anyway, and it'll be one less step.
"Next, install the necessary peer dependencies used by react-native-screen-transitions." could then be changed to "Next, install the necessary peer dependencies used by react-native-screen-transitions, and @react-native-masked-view/masked-view for the example later in the article:"
| ``` | ||
|
|
||
| </TabItem> | ||
| <TabItem value='bare' label='Bare React Native'> |
There was a problem hiding this comment.
this is the naming we use in getting started:
| <TabItem value='bare' label='Bare React Native'> | |
| <TabItem value='community-cli' label='Community CLI'> |
|
|
||
| ## Recreating the iOS page transition | ||
|
|
||
| <div className="device-frame"> |
There was a problem hiding this comment.
I see the device frame border radius doesn't quite match the video. feel free to tweak the CSS so it matches. or alternatively remove it from the article.
|
Frame radius is much closer now! Only mismatch would just be due to the border curve. Funnily enough, ios 26's native transitions have a similar squircle edge if you look closely, so this feels close to the platform behavior. |
2 participants
Summary
Adds a community blog post covering
react-native-screen-transitions.Also enables the existing
static2dynamictransform for blog posts so this article can use the same Static / Dynamic code example pattern as the docs.