[V2] TopBar Background Component

[m-inan]

Issue Description

I want to add a logo to the header. but in doing so I could not center the logo. Is there a method for this?

Steps to Reproduce / Code Snippets / Screenshots

I want to add a logo to the header. but in doing so I could not center the logo. Is there a method for this? the size at the time it is loaded remains constant

TopBar Option

topBar: {
    background: {
        color: Colors.Primary,
        component: {
             name: 'car.TopBar',
             aligment: 'center'
        }
   },

TopBar Screen

export default class TopBar extends Component {
    state = { orientation: 'P' };

    render() {
        return <View style={styles.container}>
            <SvgUri width={120} height={40} source={require('./logo.svg')} />
        </View>
    }
}

const styles = {
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'stretch',
        backgroundColor: Colors.Primary
    }
};

---

Environment

• React Native Navigation version: ^2.0.2636
• React Native version: 0.57.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): any

[AlexBueckig]

Not sure if it's just a copy&paste error, but in your topbar options the word alignment is misspelled... ;)

[m-inan]

Thank you for your answer. The 'alignment' works. But the main problem is that the Bar gives the width according to its orientation. And this value remains constant when the phone is rotating. For this, I use the orientation property, but I don't look very healthy. I'm looking for a healthier solution.

[AlexBueckig]

Just tested it myself with this component https://github.com/wix/react-native-navigation/blob/v2/playground/src/screens/TopBarBackground.js and the following options: topBar: { title: { text: 'Feed', component: { name: 'TopBar', alignment: 'center' }}}

and this were my results:

I'm using RN 0.55 + RNN 2.0.2630 right now, running Android 8.0 in Genymotion.

Edit: Oh wait... Just noticed that your component property is inside the background property... According to the docs https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=common-options it is also possible to put it into the title tag, maybe that'll solve the problem since its no actual background...?

[m-inan]

I'm using it as a workaround. but I am changing the currentTabIndex value with mergeOptions when starting the application. When I do this, the logo on the first tab page appears to be left-justified. and bottomTabs: {currentTabIndex: 1} does not work in the setOptions property

This method does not work

Navigation.setDefaultOptions({
    bottomTabs: {
        currentTabId: 'SearchSC'
        // OR
        currentTabIndex: 1
    },
})

When I use this method, it just looks like this in the first screen

Navigation.mergeOptions(this.props.componentId, {
    bottomTabs: {
        currentTabIndex: 1
    },
})

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[arryanggaputra]

@TPMinan hi there, how you make the bottomTab with custom icon?

[m-inan]

@arryanggaputra I'm using 'react-native-vector-icons' and Icomoon configuration. You can resolve the links I've added https://github.com/oblador/react-native-vector-icons#custom-fonts http://wix.github.io/react-native-navigation/#/docs/layout-types?id=bottomtabs

[arryanggaputra]

@TPMinan I mean, how you create the center button, it's bigger than the other. Can you give me code sample? Really appreciate

[m-inan]

@arryanggaputra The code I'm writing right now is an example. I wrote a sample code because it is quite complicated in the picture.

The method I use is not very effective. Because you may need to assign different values to a few actions. Such as giving more to the 'bottom' value for iphoneX To do this, you need to create a screen first

// register component TabBarIcon
Navigation.registerComponent('car.TabBarIcon', () => TabBarIcon);

// TabBarIcon Component
export default class TabBarIcon extends Component{
    render() {
        return <View style={{
            width: 55,
            height: 55,
            position: 'absolute',
            bottom: 10,
            borderRadius: 55,
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf: 'center',
            zIndex: 2,
            backgroundColor: 'red'
        }}>
            {/* Custom icon here */}
        </View>
    }
}

Navigation.events().registerAppLaunchedListener(() => {
    /* Other Options */

    // TabBar center button
    Navigation.showOverlay({
        component: {
            id: 'car.TabBarIcon',
            name: 'car.TabBarIcon',
            options: {
                overlay: {
                    interceptTouchOutside: false
                },
            }
        }
    })
})

After that you can do as you like svg shape for the background of the button. If not, examine the documents. I can help you if you encounter a problem.

[arryanggaputra]

@TPMinan woah cool... let me try your code man... Btw, is this work on android?

[arryanggaputra]

@TPMinan Okay, I tried your code, thank a lot. There's a component on the bottom of the page, but why it's not transparent, do you have any idea with this?

[m-inan]

@arryanggaputra The components you add using "ShowOverlay" can cover the entire screen. So the icon you use should be just its size. Probably the element on the icon component will take up the entire screen.

[arryanggaputra]

@TPMinan Okay cool, i just set componentBackgroundColor : transparent, and it's work. Thanks a lot 😊😊😊😊😊😊