Skip to content

Commit ce420a4

Browse files
IjzerenHeinIjzerenHein
committed
[fix] Fix react-navigation@4 imports required
1 parent 088a554 commit ce420a4

26 files changed

+161
-161
lines changed

‎README-prerelease.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ React Navigation bindings for [react-native-shared-element](https://github.com/I
1919

2020
The following versions or react-navigation and the stack navigator are supported.
2121

22-
| Version | React-Navigation | Comments |
23-
| ----------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
24-
| 3.x | 4 & 5 | Use `createSharedElementStackNavigator4` to use it with 4.x. In this version the `sharedElements` function was changed to use `route` instead of `navigator`. |
25-
| [2.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v2) | 3 & 4 | This version is compatible with `react-navigation-stack@2`. |
26-
| [1.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1) | 3 & 4 | This version is compatible with `react-navigation-stack@1`. |
22+
| Version | React-Navigation | Comments |
23+
| ----------------------------------------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
24+
| 3.x | 4 & 5 | Import from `react-navigation-shared-element/v4` to use it with 4.x. In this version the `sharedElements` function was changed to use `route` instead of `navigator`. |
25+
| [2.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v2) | 3 & 4 | This version is compatible with `react-navigation-stack@2`. |
26+
| [1.x](https://github.com/IjzerenHein/react-navigation-shared-element/tree/v1) | 3 & 4 | This version is compatible with `react-navigation-stack@1`. |
2727

2828
Unlikely to be supported:
2929

‎docs/Migration.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
# Migration Guide <!-- omit in toc -->
66

77
- [2.x -> 3.x](#2x---3x)
8-
- [createSharedElementStackNavigator4](#createsharedelementstacknavigator4)
8+
- [createSharedElementStackNavigator](#createsharedelementstacknavigator)
99
- [Route arguments in `sharedElement` function](#route-arguments-in-sharedelement-function)
1010
- [5.0.0-alpha1 -> 3.x](#500-alpha1---3x)
1111

1212
# 2.x -> 3.x
1313

14-
## createSharedElementStackNavigator4
14+
## createSharedElementStackNavigator
1515

16-
As of version 3.x, `react-navigation-shared-element` supports both react-navigation 4 and 5. React navigation 5.x is considered the new default API and 4.x can be accessed using a version specific export.
16+
As of version 3.x, `react-navigation-shared-element` supports both the react-navigation 4 and 5 APIs. React navigation 5.x is considered the new default API and 4.x can be accessed using a version specific import.
1717

1818
**Before**
1919

@@ -30,9 +30,9 @@ const stackNavigator = createSharedElementStackNavigator(
3030

3131
```jsx
3232
// react-navigation-shared-element@3
33-
import { createSharedElementStackNavigator4 } from 'react-navigation-shared-element';
33+
import { createSharedElementStackNavigator } from 'react-navigation-shared-element/build/v4';
3434

35-
const stackNavigator = createSharedElementStackNavigator4(
35+
const stackNavigator = createSharedElementStackNavigator(
3636
...
3737
);
3838
```

‎docs/Navigation4.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Upgrading from react-navigation-shared-element 2 to 3? Be sure to checkout the [
99
- [Installation](#installation)
1010
- [Usage](#usage)
1111
- [Documentation](#documentation)
12-
- [createSharedElementStackNavigator4](#createsharedelementstacknavigator4)
12+
- [createSharedElementStackNavigator](#createsharedelementstacknavigator)
1313
- [Debugging shared element transitions](#debugging-shared-element-transitions)
1414
- [SharedElement component](#sharedelement-component)
1515
- [sharedElements function](#sharedelements-function)
@@ -36,15 +36,16 @@ $ yarn add react-navigation@4 react-navigation-stack@2
3636

3737
In order to enable shared element transitions, the following steps need to be performed
3838

39-
- Create a stack-navigator using `createSharedElementStackNavigator4`
39+
- Import from `react-navigation-shared-element/build/v4`
40+
- Create a stack-navigator using `createSharedElementStackNavigator`
4041
- Wrap your component with `<SharedElement>` and provide a unique `id`
4142
- Define a static `sharedElements` config on the Screen that you want to animate
4243

4344
```jsx
4445
// App4x.js
45-
import { createSharedElementStackNavigator4 } from 'react-navigation-shared-element';
46+
import { createSharedElementStackNavigator } from 'react-navigation-shared-element/build/v4';
4647

47-
const stackNavigator = createSharedElementStackNavigator4(
48+
const stackNavigator = createSharedElementStackNavigator(
4849
{
4950
List: ListScreen,
5051
Detail: DetailScreen,
@@ -94,9 +95,9 @@ DetailScreen.sharedElements = (route, otherRoute, showing) => {
9495

9596
## Documentation
9697

97-
### createSharedElementStackNavigator4
98+
### createSharedElementStackNavigator
9899

99-
The `createSharedElementStackNavigator4` function wraps an existing stack-navigator and enables shared element transitions for it.
100+
The `createSharedElementStackNavigator` function wraps an existing stack-navigator and enables shared element transitions for it.
100101

101102
It performs the following actions
102103

@@ -119,7 +120,7 @@ to log scene transitions and shared-element id's to the console. The
119120
log output is useful for understanding scene changes and for reporting issues.
120121

121122
```jsx
122-
const stackNavigator = createSharedElementStackNavigator4(
123+
const stackNavigator = createSharedElementStackNavigator(
123124
{ ... }, // routeConfig
124125
{ ... } // stackConfig
125126
{
@@ -134,7 +135,7 @@ const stackNavigator = createSharedElementStackNavigator4(
134135

135136
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.
136137

137-
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 `createSharedElementStackNavigator4`.
138+
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`.
138139

139140
**Props**
140141

‎docs/Navigation5.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
> This documentation is for the new v3 release which unifies the 4.x and 5.x APIs of react-navigation in a single codebase. You can install it using `yarn add react-navigation-shared-element@prerelease`.
44
5-
# Shared element for React Navigation 5.x <!-- omit in toc -->
5+
# Shared element for React Navigation >= 5.x <!-- omit in toc -->
66

77
Upgrading from 5.0.0-alpha1? Be sure to checkout the [migration guide](./Migration.md#500-alpha1---3x)!
88

‎example/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@
2929
"react-native-unimodules": "~0.11.0",
3030
"react-native-vector-icons": "^6.6.0",
3131
"react-native-web": "~0.13.7",
32-
"react-navigation": "^4.3.7",
32+
"react-navigation": "^4.4.4",
3333
"react-navigation-shared-element": "link:../",
34-
"react-navigation-stack": "^2.3.12",
35-
"react-navigation-tabs": "^2.8.11"
34+
"react-navigation-stack": "^2.10.4",
35+
"react-navigation-tabs": "^2.11.1"
3636
},
3737
"devDependencies": {
3838
"@babel/core": "^7.9.0",

‎example/src/tests/BackOnly.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default () => (
2929
];
3030
}}
3131
/>
32-
}/>
3332
</Stack.Navigator>
3433
</NavigationContainer>
3534
);

‎example/src/tests/BackOnly.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { createAppContainer } from "react-navigation";
22
import {
3-
createSharedElementStackNavigator4,
3+
createSharedElementStackNavigator,
44
SharedElementsComponentConfig
5-
} from "react-navigation-shared-element";
5+
} from "react-navigation-shared-element/build/v4";
66

77
import { defaultItem } from "../data";
88
import { createScreen, MasterScreen, DetailScreen } from "../screens";
@@ -22,7 +22,7 @@ const sharedElements: SharedElementsComponentConfig = (
2222
];
2323
};
2424

25-
const BackOnlyStackNavigator = createSharedElementStackNavigator4(
25+
const BackOnlyStackNavigator = createSharedElementStackNavigator(
2626
{
2727
Master: createScreen(MasterScreen, "BackOnly"),
2828
Detail: createScreen(DetailScreen, undefined, sharedElements)

‎example/src/tests/BottomTabs.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33
import { createBottomTabNavigator } from "react-navigation-tabs";
44

55
import { createScreen, MasterScreen, DetailScreen } from "../screens";
66

7-
const StackNavigator1 = createSharedElementStackNavigator4(
7+
const StackNavigator1 = createSharedElementStackNavigator(
88
{
99
Master: createScreen(MasterScreen, "BottomStack1"),
1010
Detail: DetailScreen
@@ -16,7 +16,7 @@ const StackNavigator1 = createSharedElementStackNavigator4(
1616
}
1717
);
1818

19-
const StackNavigator2 = createSharedElementStackNavigator4(
19+
const StackNavigator2 = createSharedElementStackNavigator(
2020
{
2121
Master: createScreen(MasterScreen, "BottomStack2"),
2222
Detail: DetailScreen

‎example/src/tests/BottomTabs2.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33
import { createBottomTabNavigator } from "react-navigation-tabs";
44

55
import { MasterScreen, DetailScreen } from "../screens";
66

7-
const ChildStack = createSharedElementStackNavigator4(
7+
const ChildStack = createSharedElementStackNavigator(
88
{
99
Master: MasterScreen
1010
},
@@ -39,7 +39,7 @@ const TabNavigator = createBottomTabNavigator({
3939
}
4040
});
4141

42-
const MainStack = createSharedElementStackNavigator4(
42+
const MainStack = createSharedElementStackNavigator(
4343
{
4444
Master: TabNavigator,
4545
Detail: DetailScreen

‎example/src/tests/ForwardOnly.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default () => (
2929
];
3030
}}
3131
/>
32-
}/>
3332
</Stack.Navigator>
3433
</NavigationContainer>
3534
);

‎example/src/tests/ForwardOnly.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { createAppContainer } from "react-navigation";
22
import {
3-
createSharedElementStackNavigator4,
3+
createSharedElementStackNavigator,
44
SharedElementsComponentConfig
5-
} from "react-navigation-shared-element";
5+
} from "react-navigation-shared-element/build/v4";
66

77
import { defaultItem } from "../data";
88
import { createScreen, MasterScreen, DetailScreen } from "../screens";
@@ -22,7 +22,7 @@ const sharedElements: SharedElementsComponentConfig = (
2222
];
2323
};
2424

25-
const ForwardOnlyStackNavigator = createSharedElementStackNavigator4(
25+
const ForwardOnlyStackNavigator = createSharedElementStackNavigator(
2626
{
2727
Master: createScreen(MasterScreen, "ForwardOnly"),
2828
Detail: createScreen(DetailScreen, undefined, sharedElements)

‎example/src/tests/ListView.v4.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33

44
import { createScreen, ListScreen, DetailScreen } from "../screens";
55
import { FastIOSTransitionSpec } from "../transitions";
66

7-
const StackNavigator = createSharedElementStackNavigator4(
7+
const StackNavigator = createSharedElementStackNavigator(
88
{
99
List: createScreen(ListScreen, "ListViewStack"),
1010
Detail: DetailScreen

‎example/src/tests/MaterialTopTabs.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
44

55
import { createScreen, MasterScreen, DetailScreen } from "../screens";
66

7-
const StackNavigator1 = createSharedElementStackNavigator4(
7+
const StackNavigator1 = createSharedElementStackNavigator(
88
{
99
Master: createScreen(MasterScreen, "BottomStack1"),
1010
Detail: DetailScreen
@@ -16,7 +16,7 @@ const StackNavigator1 = createSharedElementStackNavigator4(
1616
}
1717
);
1818

19-
const StackNavigator2 = createSharedElementStackNavigator4(
19+
const StackNavigator2 = createSharedElementStackNavigator(
2020
{
2121
Master: createScreen(MasterScreen, "BottomStack2"),
2222
Detail: DetailScreen

‎example/src/tests/ModalIOS13PageSheet.v4.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33
import { TransitionPresets } from "react-navigation-stack";
44

55
import { MasterScreen, DetailScreen, createScreen } from "../screens";
66

7-
const ModalIOS13PageSheetStackNavigator = createSharedElementStackNavigator4(
7+
const ModalIOS13PageSheetStackNavigator = createSharedElementStackNavigator(
88
{
99
Master: createScreen(MasterScreen, "ModalIOS13PageSheet"),
1010
Detail: createScreen(DetailScreen, undefined, undefined, { modal: "sheet" })

‎example/src/tests/ModalStack.v4.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33

44
import { MasterScreen, DetailScreen, createScreen } from "../screens";
55

6-
const ModalStackNavigator = createSharedElementStackNavigator4(
6+
const ModalStackNavigator = createSharedElementStackNavigator(
77
{
88
Master: createScreen(MasterScreen, "ModalStack"),
99
Detail: createScreen(DetailScreen, undefined, undefined, { modal: "full" })

‎example/src/tests/NestedStack.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33

44
import { createScreen, MasterScreen, DetailScreen } from "../screens";
55

6-
const NestedStackNavigator = createSharedElementStackNavigator4(
6+
const NestedStackNavigator = createSharedElementStackNavigator(
77
{
88
Master: createScreen(MasterScreen, "NestedStack"),
99
Detail: DetailScreen
@@ -15,7 +15,7 @@ const NestedStackNavigator = createSharedElementStackNavigator4(
1515
}
1616
);
1717

18-
const RootStackNavigator = createSharedElementStackNavigator4(
18+
const RootStackNavigator = createSharedElementStackNavigator(
1919
{
2020
Nested: {
2121
// @ts-ignore

‎example/src/tests/NestedStack2.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33

44
import { createScreen, MasterScreen, DetailScreen } from "../screens";
55

6-
const NestedStackNavigator = createSharedElementStackNavigator4(
6+
const NestedStackNavigator = createSharedElementStackNavigator(
77
{
88
Master: createScreen(MasterScreen, "NestedStack2")
99
},
@@ -14,7 +14,7 @@ const NestedStackNavigator = createSharedElementStackNavigator4(
1414
}
1515
);
1616

17-
const RootStackNavigator = createSharedElementStackNavigator4(
17+
const RootStackNavigator = createSharedElementStackNavigator(
1818
{
1919
Nested: {
2020
// @ts-ignore

‎example/src/tests/SimpleStack.v4.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33

44
import { createScreen, MasterScreen, DetailScreen } from "../screens";
55

6-
const SimpleStackNavigator = createSharedElementStackNavigator4(
6+
const SimpleStackNavigator = createSharedElementStackNavigator(
77
{
88
Master: createScreen(MasterScreen, "SimpleStack"),
99
Detail: DetailScreen

‎example/src/tests/TextInputStack.v4.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
44
import { createAppContainer } from "react-navigation";
55
import {
66
SharedElement,
7-
createSharedElementStackNavigator4
8-
} from "react-navigation-shared-element";
7+
createSharedElementStackNavigator,
8+
} from "react-navigation-shared-element/build/v4";
99
import { HeaderBackButton } from "react-navigation-stack";
1010

1111
const SearchInput = (props: React.ComponentProps<typeof TextInput>) => (
@@ -57,7 +57,7 @@ const SearchScreen = ({ navigation }: any) => {
5757
SearchScreen.navigationOptions = { headerShown: false };
5858
SearchScreen.sharedElements = () => [{ id: "searchBar" }];
5959

60-
const TextInputStackNavigator = createSharedElementStackNavigator4(
60+
const TextInputStackNavigator = createSharedElementStackNavigator(
6161
{
6262
Home: HomeScreen,
6363
Search: SearchScreen

‎example/src/tests/ViewPager.v4.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createAppContainer } from "react-navigation";
2-
import { createSharedElementStackNavigator4 } from "react-navigation-shared-element";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
33

44
import { createScreen, ListScreen, ViewPagerScreen } from "../screens";
55
import { FastIOSTransitionSpec } from "../transitions";
66

7-
const StackNavigator = createSharedElementStackNavigator4(
7+
const StackNavigator = createSharedElementStackNavigator(
88
{
99
List: createScreen(ListScreen, "ViewPager"),
1010
Detail: ViewPagerScreen

0 commit comments

Comments
 (0)