React-native-navigation: Pushing new screen in Android doesn't preserve navBar style.

[witalobenicio]

When I call:

this.props.navigator.push({
      screen: 'fastseller.Cart',
      title: Strings.Cart,
    });

The navBar goes WHITE and text and buttons are BLACK.

There's a way to preserve the style in Android?

[guyca]

You can declare your them in appStyle.

[witalobenicio]

@guyca I'm already declaring them on appstyle... But when I call "push screen" it loses the style only in Android.

[maximerenou]

Same here.

[k88manish]

I am also getting the same issue on android.

[guyca]

I can't reproduce this issue in the example app, which declares styles in appStyle

[witalobenicio]

@guyca There is way to update appStyles after the tab based was launched?
For example...I get a color based on an image, and then, update for all screens.

[maximerenou]

Just to be clear, I faced this issue on a single screen app...

[drpiou]

Same here... I'm no longer surprised anymore for all the many bugs I found in this plugin.

Here is my workaround:

'use strict';

import React from 'react';
import { Navigation } from 'react-native-navigation';

const pages = {
    Test: require('./pages/Test').default,
    Contact: require('./pages/Contact').default,
};

const modals = {
    Test: require('./modals/Test'),
};

_.map(pages, (pageComponent, pageName) => Navigation.registerComponent(`Page${pageName}`, () => pageComponent));
_.map(modals, (modalComponent, modalName) => Navigation.registerComponent(`Modal${modalName}`, () => modalComponent));

export default Navigation;

let stackCount = 0;

const navigatorStyle = {
    navBarHidden: true,
    statusBarBlur: true,
    disabledBackGesture: true,
};

const modalStyle = {
    navBarHidden: true,
    statusBarBlur: true,
    statusBarColor: _styles.color.overlayDark,
};

const lightBoxStyle = {

};

const push = (context, screen = null, params = {}) =>
{
    stackCount += 1;

    dispatch(context, 'push', screen, params, navigatorStyle);
};

const resetTo = (context, screen = null, params = {}) =>
{
    stackCount = 0;

    dispatch(context, 'resetTo', screen, params, navigatorStyle);
};

const popToRoot = (context, params = {}) =>
{
    stackCount = 0;

    dispatch(context, 'popToRoot', null, params, navigatorStyle);
};

const pop = (context, params = {}) =>
{
    stackCount -= 1;

    dispatch(context, 'pop', null, params, navigatorStyle);
};

const showModal = (context, screen = null, params = {}) =>
{
    dispatch(context, 'showModal', screen, params, modalStyle);
};

const dismissModal = (context, params = {}) =>
{
    dispatch(context, 'dismissModal', null, params, modalStyle);
};

const dismissAllModals = (context, params = {}) =>
{
    dispatch(context, 'dismissAllModals', null, params, modalStyle);
};

const showLightBox = (context, screen = null, params = {}) =>
{
    if (Platform.OS === 'ios')
        dispatch(context, 'showLightBox', screen, params, lightBoxStyle);
    else
        dispatch(context, 'showModal', screen, params, lightBoxStyle);
};

const dismissLightBox = (context, params = {}) =>
{
    if (Platform.OS === 'ios')
        dispatch(context, 'dismissLightBox', null, params, lightBoxStyle);
    else
        dispatch(context, 'dismissModal', null, params, lightBoxStyle);
};

const dispatch = (context, action, screen = null, params = {}, style = {}) =>
{
    if (screen !== null)
        params.screen = screen;

    params.navigatorStyle = _.merge(style, params.navigatorStyle);

    context.props.navigator[action](params);
};

const getCount = () =>
{
    return stackCount;
};

export const Router = {
    navigatorStyle,
    modalStyle,
    lightBoxStyle,
    push,
    resetTo,
    popToRoot,
    pop,
    showModal,
    dismissModal,
    dismissAllModals,
    showLightBox,
    dismissLightBox,
    dispatch,
    getCount,
};

Then I init this way in App.js:

import Navigation, { Router } from './Navigation';

Navigation.startSingleScreenApp({
    screen: {
        screen: 'PageTest',
        navigatorStyle: Router.navigatorStyle,
    },
    appStyle: {
        orientation: 'portrait',
    },
});

And finally I navigate this way:

import { Router } from '../Navigation';

class PageTest extends Component
{
    goTo()
    {
        Router.push(this, 'PageContact');
    }

    render()
    {
        return (
            <Button onPress={this.goTo.bind(this)} text='goTo' />
        );
    }
}