React-native-router-flux: Remove back button from navbar

[hecontreraso]

I've tried a lot of thing to remove the left arrow in the navbar of my app. I have a scene with tabs, so I dont require it.
Screenshot here

This is my actual code:

const scenes = Actions.create(
    <Scene key="root">
        <Scene key="login" component={LoginComponent} title="Login" initial={true} hideNavBar={true}/>
        <Scene key="tabbar" tabs={true}>
            <Scene key="feed" component={FeedComponent} title="Live orders" icon={TabIcon} initial={true}/>
            <Scene key="orders" component={OrdersComponent} title="My orders" icon={TabIcon} />
            <Scene key="wallet" component={WalletComponent} title="Wallet" icon={TabIcon} />
            <Scene key="profile" component={ProfileComponent} title="Profile" icon={TabIcon} />
        </Scene>
    </Scene>
);

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <RouterWithRedux scenes={scenes} />
            </Provider>
        );
    }
}

Any help will be really appreciated!
Thanks!

[ddolheguy]

You need to override the "renderBackButton" on the Scene with a function which returns the back button. NOTE: Depending on your situation you might need to override the "renderLeftButton" instead of the back button with the same function.

const renderBackButton = () => {
    return (
        <TouchableOpacity
            onPress={() => {}}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Image
                    source={require('../assets/images/icons/[email protected]')}
                    resizeMode={'contain'}/>
                <Text>Back</Text>
            </View>
        </TouchableOpacity>
    );
};

                <Scene
                    key="editExpense"
                    renderBackButton={() => renderBackButton()}
                    component={EditExpenses} title="My View" />

[hecontreraso]

@ddolheguy Thanks for you fast answer.
It finally worked adding:
renderBackButton={()=>(null)}

I'm closing the issue now

[daviscabral]

@ddolheguy Thank you. It worked for me.

[jobrienski]

Doesn't work

[daviscabral]

@jobiwankanobi could you give more context? this issue is 8 months+ old - probably in the version you are trying it might have changed.

[jobrienski]

Never mind - I was having trouble not showing the left back arrow. I figured out if I did hideNavBar on the root component, the functionality works as I wanted it to.

[krean93]

Hey

I am trying to do this, but the back button still shows up unfortunately.
4.0.0-beta.24

<Router> <Scene key="root"> <Scene key="login" component={LoginForm} title="Please Log in" /> <Scene key="employeeList" component={EmployeeList} title="Employees" renderBackButton={()=>(null)} renderLeftButton={()=>(null)} /> </Scene> </Router>

[pistonsky]

@krean93 Try to add tabs to your root scene, and don't forget about hideTabBar.

<Router>
  <Scene key="root" tabs>
    <Scene key="login" component={LoginForm} title="Please Log in" hideTabBar />
    <Scene key="employeeList" component={EmployeeList} title="Employees" hideTabBar />
  </Scene>
</Router>

Later you can nest your scenes, so that employeeList can lead to a single employee's screen:

<Router>
  <Scene key="root" tabs>
    <Scene key="login" component={LoginForm} title="Please Log in" hideTabBar />
    <Scene key="employees">
      <Scene key="employeeList" component={EmployeeList} title="Employees" hideTabBar />
      <Scene key="employee" component={Employee} hideTabBar />
    </Scene>
  </Scene>
</Router>

[jtrein]

This worked for me with 4.0.0-beta.24: https://github.com/aksonov/react-native-router-flux/issues/2006#issuecomment-322423598

[vinipachecov]

@pistonsky Thank you!!!
Just need to remember that when you use the call for Actions from react-native-router-flux you need to call it to employees.
That worked flawless :)

[fendorio]

To hide the back button on my initial scene, i simply added the 'renderLeftButton' prop, passing in an empty View.

See below for some incomplete, example code.

import { View } from "react-native";
....
...
<Scene initial={true} renderLeftButton={<View></View>}   key="timeline" component={Timeline}   />

[y2k-shubham]

For those looking to hide the back button text label, see https://github.com/aksonov/react-native-router-flux/issues/2219
Setting backTitle=" " prop (space in _quotes_; NOT empty string) does the job

[gogh-zaa]

[chenyu1990]

@ddolheguy Thanks for you fast answer.
It finally worked adding:
renderBackButton={()=>(null)}

I'm closing the issue now

and how to disable swipe back?

[karlkras]

@pistonsky

You need to override the "renderBackButton" on the Scene with a function which returns the back button. NOTE: Depending on your situation you might need to override the "renderLeftButton" instead of the back button with the same function.

Thanks for this information. Using renderLeftButton worked for me. Just wondering what the difference of using renderLeftButton vs. renderBackButton is? I tried renderBackButton (with {() => null} and found that it only removed the text of the back button, but not the icon.

[bsozeroglu]

left={() => null} is working

[yazmnh87]

Someone said it, but again. hideNavBar this is what you want if you want no top navigation. renderBackButton={()=>null} and hideTabBar dont work, use hideNavBar.