How to truncate 'back' button for headerTitle in react-navigation?

I'm using react-navigation with StackNavigator. Is there a way to avoid the overlapping of the back button label and the headerTitle by truncating the back button label?

const MainNavigationOptions = {    headerStyle: {        backgroundColor: colors.CiPrimary    },    headerTitleStyle: {        color: 'white',        height: 50,        width: 140    },    headerTintColor: 'white',    headerTitle:<Text>LONG TEXT FOR TESTING</Text>}

Illustration of issue:

Image may be NSFW.
Clik here to view.