Styling the default back button on the left side of the navbar

[kay-es]

Hey,

I'm pushing a screen from the bottom to the top with the navigationstyles.slidevertical. now i just want to my default back button in the way that its an arrow-down not arrow-left. is there any oppurturnity to style the button without override the goBack()-function? Because im not able to receive the navigator either with the @withNavigation annotation nor with passing the navgiator through the route.

@withNavigation
export default class DetailScreen extends React.Component {

  static route = {
    styles: {
     ...NavigationStyles.SlideVertical,
     backgroundColor: 'transparent'
   },
   navigationBar: {
     height: 1,
     renderLeft: (state, props)  => (
       <TouchableOpacity onPress={ GOBACK HERE )}>
         <SimpleLineIcons
         name='arrow-down'
         size={25}
         color={Theme.colors.primary}
         style={{ backgroundColor: 'transparent',
                  marginTop: Style.THREE_PERC,
                  marginLeft: Style.THREE_PERC}} />
      </TouchableOpacity>
      ),
    }
   }

best regards
kay

[kay-es]

[SOLVED]

@withNavigation
class BackButton extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={this._goBack}>
        <SimpleLineIcons
        name='arrow-down'
        size={25}
        color={Theme.colors.primary}
        style={{ backgroundColor: 'transparent',
                 marginTop: Style.THREE_PERC,
                 marginLeft: Style.THREE_PERC}} />
     </TouchableOpacity>
    );
  }

  _goBack = () => {
    if (this.props.navigator.getCurrentIndex() > 0) {
      this.props.navigator.pop();
    }
  }
}


export default class DetailScreen extends React.Component {

  static route = {
    styles: {
     ...NavigationStyles.SlideVertical,
     backgroundColor: 'transparent'
   },
   navigationBar: {
     height: 1,
     renderLeft: (state, props)  => (
       <BackButton />
      ),

}

}