React Native - NavigationBar height and containers within

Question

I've been trying to control the navigationBar and make it responsive. However, I cannot achieve to control the height - and therefore the position - of the containers of its components.

Is it even possible?

Here's my code:

var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        if (index >= 0) {
            return (
                <View style={styles.navContainer}>
                    <TouchableHighlight
                        underlayColor="transparent"
                        onPress={() => { if (index > 0) { navigator.pop() } }}>
                        <Text style={ styles.leftNavButton }>
                            <Icon name="arrow-left" size={25} color="#900" />
                        </Text>
                    </TouchableHighlight>
                </View>
            )
        } 
        else { return null }
    },
    RightButton(route, navigator, index, navState) {
        if (route.onPress) {
            return (
                <View style={styles.navContainer}>
                    <TouchableHighlight
                        underlayColor="transparent"
                         onPress={ () => route.onPress() }>
                         <Text style={ styles.rightNavButton }>
                            { route.rightText || <Icon name="arrow-right" size={25} color="#900" /> }
                         </Text>
                    </TouchableHighlight>
                </View>
            )
        }
        else { return null }
    },
    Title(route, navigator, index, navState) {
        return (
            <View style={styles.navContainer}>
                <Text style={ styles.title }>{route.title}</Text>
            </View>
        )
    }
};

// Main component description
class App extends Component {

// not important stuff here

    render() {
        return (
            <Provider store={store}>
                <Navigator
                    configureScene={this.configureScene}
                    initialRoute={{ component: Index, title: 'HOME', display: true}}
                    renderScene={ this.renderScene }
                    style={{backgroundColor: '#FFD800'}}
                    navigationBar={
                        <Navigator.NavigationBar 
                            style={ styles.navigator } 
                            routeMapper={ NavigationBarRouteMapper }
                        />
                    }

                />
            </Provider>
        )
    }
}

And here's the style going with it:

var styles = StyleSheet.create({
    navigator: {
        flex: 1,
        backgroundColor: '#FFD800',
        justifyContent: 'center',
        alignItems: 'center',
//      height: 64,
    },
    navContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: 'red',
    },
    title: {
        alignItems: 'center',
    },
    leftNavButton: {
        marginLeft: 12,
    },
    rightNavButton: {
        marginRight: 12,
    },
});

In my example, changing the height of navContainer won't have any effect if I try to increase it. I can only decrease it...

Answer 1

Navigator has several sizes that are hard coded. It is likely not possible. The only solution I found was to hide the navigation bar and to make a fake navigation bar that was the correct size in the scene. This only really works at the root level though.

The new NavigationExperimental api is much more flexible and you can easily style the navigation bar to be any size or replace it with a custom navigation bar.