Экран не центрируется после обновления и запуска navigation.goBack (). React Native / React Navigation

Question

ACTION CREATOR

export const createCoach = (id, avatar, name, lastname, nickname, birthday, birthplace, phone, email, agent_id, club_id ) => {
	return async (dispatch, getState) => {
		const token = getState().auth.token;
		const bodyInputs = {
			// id,
			// avatar,
			name,
			lastname,
			nickname,
			birthday,
			birthplace,
			phone,
			email,
			agent_id,
			club_id
		};

		const response = await fetch('*****************', {
				method: 'POST',
				headers:{
					'Content-Type': 'application/json',
					"Authorization": "Bearer " + token
				},
				body: JSON.stringify({
					"coach": bodyInputs
				})					
			});
		const resData = await response.json();
		console.log('POST COACH INPUTS', bodyInputs);
		console.log('POST COACH RESPONSE', resData);

		dispatch({type: CREATE_COACH, coachId: id, coachData:{
				avatar,
				name,
				lastname,
				nickname,
				birthday,
				birthplace,
				phone,
				email,
				agent_id,
				club_id
			}
		});
	};	
};

SUMBIT HANDLER ON NEW COACH SCREEN TRIGGERING navigation.goBack()

const submitHandler = useCallback(() => {
		
			dispatch(coachesActions.createCoach(
				id,
				// ownerId,
				avatar,
				name,
				lastname,
				nickname,
				birthday,
				birthplace,
				phone,
				email,
				agent_id,
				club_id
			));
		props.navigation.goBack();
	}, [dispatch, id, avatar, name, lastname, nickname, birthday, birthplace, phone, email, agent_id, club_id]);

  
THIS IS THE SCREEN IM GOING BACK TO AFTER SUMBITTING THE FORM
 
import React, {useState} from 'react';
import { 
	StyleSheet, 
	Text, 
	View, 
	Button, 
	TextInput, 
	TouchableWithoutFeedback,
	Keyboard,
	Alert
} from 'react-native';

import {useDispatch} from 'react-redux';


import Card from '../Components/card';
import CoachesList from '../Components/CoachesList';
import {HeaderButtons, Item} from 'react-navigation-header-buttons';
import HeaderButton from '../Components/headerButton';
import * as coachesActions from '../store/actions/coachesActions';



const CoachesScreen = props => {

	const [enteredValue, setEnteredValue] = useState('');

	const [searched, setSearched] = useState(false);

	const [selectedInput, setSelectedInput] = useState();

	const textInputHandler = inputText => {
		setEnteredValue(inputText);
	};

	const searchInputHandler = () => {
		const chosenInput = enteredValue;
		if (chosenInput === '' ) {
			Alert.alert('Invalid Search!', 'Please enter a valid text.', [{text: 'Ok', style: 'destructive', onPress: '' }])
			return;
		}
		setSearched(true);
		setSelectedInput(enteredValue);
		setEnteredValue('');
		Keyboard.dismiss();
	};

	let searchedOutput;
	if (searched) {
		searchedOutput = <Text>Searched text: {selectedInput}</Text>
	}

	return (
		<TouchableWithoutFeedback onPress={() => {
			Keyboard.dismiss();
		}}>
			<View style={styles.main}>		
				<Card style={styles.buttonContainer}>
					<View style={styles.button}>
						<Button color='#00B04E' title="+ New Coach" onPress={() => {props.navigation.navigate({routeName: 'NewCoach'})}} />
					</View>
					<View style={styles.button}>
						<Button color='#00B04E' title="Filters" onPress={() => {props.navigation.navigate({routeName: 'Filters'})}} />
					</View>
				</Card>
				<Card>
					<View style={styles.button}>
						<Button color='#00B04E' title="Search" onPress={searchInputHandler}/>
					</View>
					<TextInput 
						blurOnSubmit 
						autoCorrect={false} 
						style={styles.textInput}
						onChangeText={textInputHandler}
						value={enteredValue} 
					/>
				</Card>
				{searchedOutput}
				<View style={styles.listContainer}>
				<CoachesList  />
				</View>
			</View>
		</TouchableWithoutFeedback>	
	);
};

CoachesScreen.navigationOptions = navData => {
	return{
		headerTitle: 'Coaches',
		headerLeft: (
			<HeaderButtons HeaderButtonComponent={HeaderButton} >
				<Item title="Menu" iconName='ios-menu' onPress={() => {
					navData.navigation.toggleDrawer();
				}} />
			</HeaderButtons>
		)
	};
};

const styles = StyleSheet.create({
	main: {
    	flex: 1,
    	padding: 10,
    	alignItems: 'center',
    	justifyContent: 'center'
  	},
  	mainTitleContainer:{
  		width: '100%',
    	height: 50,
    	alignItems: 'center',
    	justifyContent: 'center'
  	},
  	mainTitle: {
  		alignSelf: 'flex-start',
  		fontSize: 30,
  		fontWeight: 'bold'
  	},
  	buttonContainer: {
  		flexDirection: 'row',
  		marginVertical: 10,
  		width: '100%',
    	height: 50,
    	alignItems: 'center',
    	justifyContent: 'space-between'
  	},
  	button: {
  		marginHorizontal: 5,
  		width: 120
  	},
  	textInput: {
  		height: 30,
  		width: '65%',
  		margin: 5,
  		borderColor: 'gray',
  		borderWidth: 1,
  		borderRadius: 5
  	},
  	listContainer: {
  		flex: 1,
  		alignItems: 'center',
  		justifyContent: 'center'
  	}
});

export default CoachesScreen;

Я заполняю форму и после отправки автоматически активирую navigation.goBack ().

При возврате к предыдущему экрану (теперь с обновленные данные), содержимое экрана не отцентрировано.

Как добиться возврата назад и правильного центрирования экрана?

Большое спасибо!

Экран после запуска навигации. GoBack ()