You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+11-14Lines changed: 11 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ React Navigation bindings for [react-native-shared-element](https://github.com/I
5
5
This library is under development and is subject to API changes. At the moment only the stack navigator is supported.
6
6
As [react-navigation](https://reactnavigation.org) is alo undergoing development and possible API changes, this library provides a testing ground and working API for the v3 branch of react-navigation (**UPDATE: Also works with v4)**.
7
7
It was written as a separate library which does not require any changes to react-navigation itself.
8
-
As time progresses, the goal is to support the latest react-navigation version, support `appear` and `disappear` transitions, and have the
8
+
As time progresses, the goal is to support the latest react-navigation version, support `appear` and `disappear` transitions, and have the
9
9
[native extensions](https://github.com/IjzerenHein/react-native-shared-element) land in [Expo](https://expo.io/).
10
10
11
11
## Index <!-- omit in toc -->
@@ -16,7 +16,7 @@ As time progresses, the goal is to support the latest react-navigation version,
@@ -96,7 +96,7 @@ class DetailScreen extends React.Component {
96
96
97
97
### createSharedElementStackNavigator
98
98
99
-
The `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.
99
+
The `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.
100
100
101
101
It performs the following actions
102
102
@@ -114,7 +114,7 @@ It performs the following actions
114
114
115
115
### SharedElement
116
116
117
-
The `<SharedElement>` component accepts a single child and a *"shared"* id. The child is the element that is made available for doing shared element transitions. It can be any component, like a `<View>`, `<Text>` or `<Image>`. In case the wrapped view is an `<Image>`, special handling is performed to deal with image loading and resizing.
117
+
The `<SharedElement>` component accepts a single child and a _"shared"_ id. The child is the element that is made available for doing shared element transitions. It can be any component, like a `<View>`, `<Text>` or `<Image>`. In case the wrapped view is an `<Image>`, special handling is performed to deal with image loading and resizing.
118
118
119
119
This component is synonymous for the `<SharedElement>` component as defined in `react-native-shared-element`. Instead of a `node` it uses an `id` to create a higher lever API which automatically ties in with the scenes created by `createSharedElementStackNavigator`.
120
120
@@ -135,13 +135,12 @@ The `sharedElements` function receives 3 arguments
|`navigation`|`NavigationProp`| Navigation prop of the current screen. You can use this to get the params of the screen using `getParam`, or the route-name using `state.routeName`|
138
+
|`navigation`|`NavigationProp`| Navigation prop of the current screen. You can use this to get the params of the screen using `getParam`, or the route-name using `state.routeName`|
139
139
|`otherNavigation`|`NavigationProp`| The navigation-prop of the other screen. You can use this to get the params of that screen using `getParam`, or the route-name using `state.routeName`|
140
140
|`showing`|`boolean`|`true` when this screen is being shown, and `false` when this screen is being hidden. ||
141
141
142
142
The return value should be either `undefined` or an array of shared-element configs or identifiers. Specifying a string-identifier is shorthand for `{id: 'myid'}`.
143
143
144
-
145
144
**Basic example**
146
145
147
146
```js
@@ -202,11 +201,9 @@ The following fields can be specified in a config item
202
201
|`resize`|`auto`\|`stretch`\|`clip`\|`none`| Resize behavior of the transition (default = `auto`), [see SharedElementResize](https://github.com/IjzerenHein/react-native-shared-element#sharedelementresize)|
203
202
|`align`|`auto`\|`top-left`\|`...`| Align behavior of the transition (default = `auto`), [see SharedElementAlign](https://github.com/IjzerenHein/react-native-shared-element#sharedelementalign)||
0 commit comments