Comments (14)
@phpfalcon basically, there is a singleton that is imported to all components that are views needing to have "onBack" event. The singleton is named "onBackStack" which is just a simple array.
Each component needing an "onBack" would then push themselves into the onBackStack on their own componentWillMount. On componentWillUnmount, they remove themselves off the stack but then call the method of the last item in the list's onBack() so to fire the event of the component it is going back to. It's kind of like a cooperative chaining of components to accomplish this.
This can be put into a component class then inherited from which is probably a way better idea. I just made it very quickly as I don't care to make it more robust or friendly for what I am doing.
from react-native.
I was able to get a hacked onBack for these types of things using an array as singleton that each component wanting to get there onBack method called would use. The idea is like below.
// singleton onBackStack
export default [];
// example component
class ExampleComponent extends Component {
onBack() {
// do something
}
componentWillMount() {
onBackStack.push(this);
}
componentWillUnmount() {
onBackStack.pop();
if (onBackStack.length) onBackStack[onBackStack.length - 1].onBack();
}
render() {
return <View>example</View>
}
}
from react-native.
@sebringj your method is great but I couldn't understand it until your last comment I implanted a similar method which works for navigatorios :
constructor()
{
super();
this.state = {backapper:false}};
}
componentDidMount() {
var currentRoute = this.props.navigator.navigationContext.currentRoute;
this.props.navigator.navigationContext.addListener('willfocus', (event) => {
//didfocus emit in componentDidMount
if (currentRoute === event.data.route && this.state.backapper) {
console.log("me didAppear");
this.setState({backapper: false});
}
else if (currentRoute !== event.data.route)
{
this.setState({backapper: true});
console.log("me didDisappear, other didAppear");
}
//console.log(event.data.route);
});
}
from react-native.
cc @evv
from react-native.
@ericvicenti actually :p
from react-native.
@vjeux: So far I'm having a great time with react-native. I wrote a tumblr browser that uses the flux pattern heh. This is what it looks like: min-s-react-native-demo-gif. (I'm not inlining the gif because it's too distracting.)
from react-native.
Nice! Glad to hear :)
Hopefully we can get gif support soon so that you can have a fully functional app soon
from react-native.
Unfortunately, the default back button of UINavigationController does not provide an event. The way to get around it is to either set your custom back button on the left side, or to implement - viewWillDisappear:
in iOS. So I guess, this limitation is here to stay.
from react-native.
Since iOS doesn't support it, let's close this for now.
from react-native.
@paramaggarwal is it possible to be notified when any rote changes?
something like
<NavigatorIOS onChange={...}
initialRoute={...} />
I mean when someone do navigator.push(...)
from react-native.
@liubko please look into Navigator
instead, which is much more customisable. Docs are here: Navigator Comparison
from react-native.
i think you can wrap the route component with a wrapper and listen to the wrapper's componentWillUnmount
from react-native.
@sebringj thanks for sharing this can you please explain onBackStack
from react-native.
@phpfalcon Hmm I dont have a navigationContext? Are you using React Navigation? This Google returns no results... navigationContext site:reactnavigation.org
from react-native.
Related Issues (20)
- [v0.74.1]Cursor prop is causing crash on Text HOT 2
- TextInput (IOS) : maxLength & multiline true = onChangeText multiple call HOT 4
- 2 files found with path 'lib/arm64-v8a/libopencv_java4.so' from inputs: - /Users/wegile-1003/.gradle/caches/transforms-3/8ec77b58992a0a620e60c240eaed7c29/transformed/jetified-rppg_core-0.2.0/jni/arm64-v8a/libopencv_java4.so - /Users/wegile-1003/.gradle/caches/transforms-3/a576edfdc1ae89d711e78c8d27ec535b/transformed/jetified-opencv-android-4.1.2/jni/arm64-v8a/libopencv_java4.so If you are using jniLibs and CMake IMPORTED targets, see HOT 4
- No visible error is shown on iOS Bridgeless when there is an error before `AppRegistry.registerComponent` HOT 1
- yarn ios error ! error Could not find scheme greenhouse. Please make sure the schema you want to run exists. HOT 3
- App Crashes When Hermes is Disabled on Some Android 10 Devices `couldn't find DSO to load: libhermes.so SoSource` HOT 4
- React Query isStale is not working after upgrading react-native to 0.74 HOT 1
- In Android touchMove is cancelled when intercepted by native gesture from child HOT 3
- Zoom in & reset shortcuts are broken on experimental debugger HOT 3
- Library not loaded: '@rpath/FBLPromises.framework/FBLPromises' Referenced from HOT 5
- Socket Rocket Upgrade to 0.7.0 in react native version 0.73 HOT 4
- Image .gif frame timing off-by-one error in iOS HOT 2
- Pressable gets stuck under the new architecture HOT 2
- How to run react native custom library inside react native project without publishing to npm? Local setup steps are not working. HOT 3
- NSInvalidArgumentException __76-[RCTModalHostViewManager presentModalHostView:withViewController:animated:]_block_invoke.38 Application tried to present modally a view controller <RCTModalHostViewController: 0x7fcf53855110> that is already being presented by <UIViewController: 0x7fcf4791 HOT 7
- UI problem with iOS floating keyboard in iPad - 0.73.7 HOT 4
- React-Codegen Error when build iOS HOT 3
- [codegen] inconsistent use of `toSafeCppString` in `generateEnum` (GenerateModuleH.js) HOT 1
- Implement requestIdleCallback and cancelIdleCallback on the new architecture HOT 6
- Some touchable components are not working (Native Android devices only) HOT 5
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.