Giter VIP home page Giter VIP logo

Comments (14)

sebringj avatar sebringj commented on March 29, 2024 2

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

sebringj avatar sebringj commented on March 29, 2024 1

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.

BSN4 avatar BSN4 commented on March 29, 2024 1

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

vjeux avatar vjeux commented on March 29, 2024

cc @evv

from react-native.

vjeux avatar vjeux commented on March 29, 2024

@ericvicenti actually :p

from react-native.

zertosh avatar zertosh commented on March 29, 2024

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

vjeux avatar vjeux commented on March 29, 2024

Nice! Glad to hear :)

Hopefully we can get gif support soon so that you can have a fully functional app soon

from react-native.

paramaggarwal avatar paramaggarwal commented on March 29, 2024

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.

vjeux avatar vjeux commented on March 29, 2024

Since iOS doesn't support it, let's close this for now.

from react-native.

liubko avatar liubko commented on March 29, 2024

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

paramaggarwal avatar paramaggarwal commented on March 29, 2024

@liubko please look into Navigator instead, which is much more customisable. Docs are here: Navigator Comparison

from react-native.

arypurnomoz avatar arypurnomoz commented on March 29, 2024

i think you can wrap the route component with a wrapper and listen to the wrapper's componentWillUnmount

from react-native.

BSN4 avatar BSN4 commented on March 29, 2024

@sebringj thanks for sharing this can you please explain onBackStack

from react-native.

njt1982 avatar njt1982 commented on March 29, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.