FluidTransitions icon indicating copy to clipboard operation
FluidTransitions copied to clipboard

Having createStackNavigator in FluidNavigator

Open iremlopsum opened this issue 6 years ago • 3 comments

Hey guys,

I have a fluidNavigator that takes some screens and as a final screen I pass in a stack that was created using createStackNavigator

Almost everything actually works pretty well. The only problem is that I can't seem to navigate back from stackNavigator screen to fluidNavigator screens.

Is there something special I need to pass to createStackNavigator for this to work? I have tried using 'withNavigation' and by just using 'this.props.navigation'. All does nothing

My current code is

const Navigation = FluidNavigator({
  Launch: { screen: LaunchScreen },
  ChatbotIntro: { screen: ChatbotIntro, navigationOptions: { gesturesEnabled: false } },
  TermsAndAgreement: { screen: TermsAndAgreement },
  Chatbot: { screen: Chatbot },
  App: { screen: AppStackWrapper, navigationOptions: { transitionConfig, gesturesEnabled: false } // this is the stack}
}, {
  mode: 'card',
});


class Navigator extends Component {
  static router = Navigation.router;

  render() {
    const WrapperElement = Platform.OS === 'ios' ? KeyboardAvoidingView : View
    const wrapperProps = Platform.OS === 'ios' ? { keyboardVerticalOffset: 0, behavior: 'padding' } : {}

    return (
      <WrapperElement style={{ flex: 1 }} {...wrapperProps}>
        <View style={{ flex: 1 }}>
          <Navigation navigation={this.props.navigation} />
        </View>
      </WrapperElement> 
    )
  }
}
export default Navigator

thanks in advance

iremlopsum avatar Jan 08 '19 17:01 iremlopsum

Same here.

luco avatar Feb 10 '19 22:02 luco

I was having a similar issue, but I think my situation may be a little simpler than yours.

Not sure if it'll help in your situation but, my StackNavigator screen makes use of a custom headerLeft button like so:

static navigationOptions = ({ navigation }) => ({
    headerLeft: props => (
      <HeaderLeftButton
        {...props}
        onPress={() => {
          navigation.navigate("AnotherScreen");
        }}
      />
    )
  });

tom-gurney avatar Feb 13 '19 15:02 tom-gurney

@chrfalch Same tested on react native 0.59.0. any advise?

tuvshinbatgeru avatar Mar 13 '19 07:03 tuvshinbatgeru