Comments (4)
Hi, that's a very good question! I haven't gotten around to test this, but my initial guess would be that this would indeed be possible. Assuming that react-native-magic-move can properly measure the elements, and can draw in front of the RNN screens, it should work.
It would also be necessary to create a binding that would transfer state information from RNN to RNMM. The react-navigation-magic-move binding was fairly easy to create, so I assume the RNN binding would also be easy to create.
So to sumarize
- Has it been tested with RNN? No
- Could it work as is? Probably Not
- Can it be made to work? Probably Yes
At the moment this has no priority for me as I don't use it myself, and RNN supports shared element transitions on its own. PR's and investigative work are very welcome though
from react-native-magic-move.
I have a snack with this working using react-native-magic-move + react-navigation: https://snack.expo.io/@alexfoxy/473def
The only problem is that when going back, or navigating to the previous scene the animation doesn't reverse.
@IjzerenHein Am I doing something wrong?
from react-native-magic-move.
Sweet! That's probably because it now works when a new component is mounted. In order to make that work you'll need to control the active
prop of the scene
from react-native-magic-move.
Spent some time looking into this. It appears that the main issue is that MagicMove.Provider
needs to be wrapped around the entire app. With react-native-navigation, each screen is responsible for its own HOC's, as explained here.
So, even if we register our screens as so, they still won't share their Magic.Provider
value and thus have a different context. This is due to the use of this
in Provider.js
. The context value can't be shared among separate providers. Unlike the redux example in which store
is created once and shared among all providers.
Navigation.registerComponent(
'ScreenExample',
() => (props) => (
<MagicMove.Provider>
<ScreenExample {...props} />
</MagicMove.Provider>
),
() => ScreenExample,
);
A potentially simple workaround is to allow for exporting the shared value, like redux does. So that we can pass it explicitly via MagicMove.Provider
.
from react-native-magic-move.
Related Issues (20)
- multiple transitions are overlapping HOT 10
- Thread: Share your Magic Move transitions here
- Trying to resolve view with tag 327 which doesnt exist HOT 3
- Not working with React Navigation without enabling Remote Debug Debugging HOT 13
- Question: support for react-native-navigation? HOT 2
- pod install failed HOT 2
- RNMagicMove.podspec position HOT 2
- Simple example doesn't show transition HOT 4
- Request to add product in Start React HOT 1
- iOS build fails on RN 0.60.x with native dependencies HOT 2
- Question: Can I use magic move for two components within the same scene? HOT 7
- Support for hooks
- Can't run examples on expo SDK needs an update
- warning requireNativeComponent running on web
- Is this still alive or abandoned?
- Not work when item source is in FlatList HOT 1
- Same Nested Magic Item on Three Screen HOT 2
- Transition without a navigator HOT 1
- Transitions of <MagicMove.Text> inside another <Text> is not supported
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-magic-move.