Unable to show "real" app, after pressing done.

Hi, thanks for the amazing repo. My doubt may not exactly be an issue as such but I’m finding it hard to open a component once done is pressed. Any help will be highly appreciated. Code:

import StartApp from ‘./StartApp’

Trial 1:

  render() {
    return (
       <AppIntroSlider slides={slides} onDone={() => <StartApp/>}/>
       );
  }

Trial 2:

_onDone = () => {
   // User finished the introduction. Show "real" app   
    <StartApp/>
 }
  render() {
    return (
       <AppIntroSlider slides={slides} onDone={this._onDone}/>
       );
  }

None of the above two open the StartApp component which I imported.

Thanking in advance.

[Jacse]

Hi @shibbyy,

You’re really close, but what you are getting wrong is how React works. You can’t return a component from a random function and expect it to be rendered, so currently nothing happens with the StartApp-component. What you’d probably want to do (if you’re don’t want to use your navigation library) is something like this:

  constructor(props) {
    super(props);

    this.state = {
      showRealApp: false
    }
  }

  _onDone = () => {
    this.setState({ showRealApp: true });
  }
  render() {
    if (this.state.showRealApp) {
      return <StartApp />;
    } else {
      return <AppIntroSlider slides={slides} onDone={this._onDone}/>;
    }
  }

Notice how we use state to keep track of when the user has finished the introduction and how we use the render-function to return a component. I’ll close since this is not actionable, but please let me know if the approach above does not work for you!

[shibbyy]

Hi @Jacse ,

Thank you so much for taking out some time to explain me this, works like a dream! Cheers!