Skip to content

Commit cd652dc

Browse files
committed
docs: updated test-app to demo app
1 parent 5fda1de commit cd652dc

File tree

1 file changed

+11
-14
lines changed

1 file changed

+11
-14
lines changed

README.md

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ React Navigation bindings for [react-native-shared-element](https://github.com/I
55
This library is under development and is subject to API changes. At the moment only the stack navigator is supported.
66
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)**.
77
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
99
[native extensions](https://github.com/IjzerenHein/react-native-shared-element) land in [Expo](https://expo.io/).
1010

1111
## Index <!-- omit in toc -->
@@ -16,7 +16,7 @@ As time progresses, the goal is to support the latest react-navigation version,
1616
- [createSharedElementStackNavigator](#createsharedelementstacknavigator)
1717
- [SharedElement](#sharedelement)
1818
- [sharedElements config](#sharedelements-config)
19-
- [Test App](#test-app)
19+
- [Demo App](#demo-app)
2020
- [License](#license)
2121

2222
## Installation
@@ -45,10 +45,10 @@ const stackNavigator = createSharedElementStackNavigator(
4545
createStackNavigator,
4646
{
4747
List: ListScreen,
48-
Detail: DetailScreen
48+
Detail: DetailScreen,
4949
},
5050
{
51-
initialRouteName: "List"
51+
initialRouteName: 'List',
5252
}
5353
);
5454

@@ -63,12 +63,12 @@ class ListScreen extends React.Component {
6363
renderItem(item) {
6464
const { navigation } = this.props;
6565
return (
66-
<TouchableOpacity onPress={() => navigation.push('Detail', {item})}>
66+
<TouchableOpacity onPress={() => navigation.push('Detail', { item })}>
6767
<SharedElement id={`itemPhoto.${item.id}`}>
6868
<Image source={item.photoUrl} />
6969
</SharedElement>
7070
</TouchableOpacity>
71-
)
71+
);
7272
}
7373
}
7474
```
@@ -96,7 +96,7 @@ class DetailScreen extends React.Component {
9696

9797
### createSharedElementStackNavigator
9898

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.
100100

101101
It performs the following actions
102102

@@ -114,7 +114,7 @@ It performs the following actions
114114

115115
### SharedElement
116116

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.
118118

119119
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`.
120120

@@ -135,13 +135,12 @@ The `sharedElements` function receives 3 arguments
135135

136136
| Argument | Type | Description |
137137
| ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
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` |
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` |
139139
| `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` |
140140
| `showing` | `boolean` | `true` when this screen is being shown, and `false` when this screen is being hidden. | |
141141

142142
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'}`.
143143

144-
145144
**Basic example**
146145

147146
```js
@@ -202,11 +201,9 @@ The following fields can be specified in a config item
202201
| `resize` | `auto` \| `stretch` \| `clip` \| `none` | Resize behavior of the transition (default = `auto`), [see SharedElementResize](https://github.com/IjzerenHein/react-native-shared-element#sharedelementresize) |
203202
| `align` | `auto` \| `top-left` \| `...` | Align behavior of the transition (default = `auto`), [see SharedElementAlign](https://github.com/IjzerenHein/react-native-shared-element#sharedelementalign) | |
204203

204+
## Demo App
205205

206-
## Test App
207-
208-
- [react-navigation-sharedelement-rn60test](https://github.com/IjzerenHein/react-navigation-sharedelement-rn60test)
209-
206+
- [react-navigation-sharedelement-rn60demo](https://github.com/IjzerenHein/react-navigation-sharedelement-rn60demo)
210207

211208
## License
212209

0 commit comments

Comments
 (0)