React-native-router-flux: How to hide/disable back button text?

[g4laura]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.22 (v3 is not supported)
• react-native v0.45.1

Expected behaviour

Hide back button text by using backTitle=""

Actual behaviour

Still displays back button title

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.
1.
2.
3.

[aksonov]

Just use left={()=>null} to hide whole left/back button or just backTitle=' ' to make back button text invisible

[g4laura]

@aksonov when I do backTitle=' ' , the back button always displays, including when there isn't a scene to navigate back to

[y2k-shubham]

As told in https://github.com/aksonov/react-native-router-flux/issues/2219, passing the prop backTitle = " " (_space in quotes_; NOT empty string) does the job

[g4laura]

@y2k-shubham when I do that , the back button always displays, including when there isn't a scene to navigate back to

[MaxInMoon]

y2k-shubham's trick worked for me with:

"react-native": "0.53.3",
"react-native-router-flux": "^4.0.0-beta.28",

[y2k-shubham]

@g4laura this solution is meant to hide only the text along-side the back button and not the back button itself. While I haven't tried hiding the back button, see if https://github.com/aksonov/react-native-router-flux/issues/1509 can help. Better yet, give a try to @aksonov's solution by setting prop left={()=>null}

[rodribet3]

I'm having the same problem as @g4laura. I want to remove the back button titles but when I add backTitle = " " the back button start showing in every screen even if there wasn't one before adding that property. Is there any solution in which the back button doesn't show when is not suppose to?

[jsina]

@y2k-shubham how could I change it dynamically, I want to disable back button when some progress is on loading, and after progress is done, I show it again?

[jsina]

my workaround for hide/show dynamically is changing navigation setParams property which related to the react-navigation is:

useEffect(() => {
    props.navigation.setParams({
      left:
        state.sync.isSending || state.uploadPhotos.isUploading ? null : (
          <RenderBackButton />
        ),
    });
  }, [state.sync.isSending, state.uploadPhotos.isUploading]);

RenderBackButton component:

export const RenderBackButton = () => (
  <TouchableOpacity onPress={() => Actions.pop()}>
    <View style={styles.backButtonWrapper}>
      <Icon type="Ionicons" name="ios-arrow-back" style={styles.icon} />
      <Text style={styles.text}>Lista Impianti</Text>
    </View>
  </TouchableOpacity>
);