Custom button on topBar not wraping content in width iOS

[angelos3lex]

What happened?

I'm attaching two screenshots, first is same js code working well on RNN v7.35.2 and second is the buggy one in latest v7.37.0.

What was the expected behaviour?

I assume the expected behavior should be the one working well, as on every previous RNN version. This issue is only a bug on iOS, android works fine.

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

Navigation.mergeOptions(this.props.componentId, {
    topBar: {
        title: {
            text: "Some text",
        }, 
        rightButtons: [
            {
                id: CustomButtonComponent.TAG,
                component: {
                    name: CustomButtonComponent.TAG,
                    passProps: {
                        text: "Button text",
                    },
                },
            },
        ],
       rightButtonColor: 'white',
    },
});

And the corresponding CustomButtonComponent:

import React from 'react';
import BaseComponent from '../screens/BaseComponent';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';

interface CustomButtonComponentProps {
    text?: string;
}

interface CustomButtonComponentState {}

export default class CustomButtonComponent extends BaseComponent<CustomButtonComponentProps, CustomButtonComponentState> {
    static readonly TAG: string = 'CustomButtonComponent';

    render() {
        return (
            <TouchableOpacity style={styles.container}>
                <View style={styles.content}>
                    <Text style={styles.text}>{this.props.text}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        borderRadius: 4,
        backgroundColor: 'blue',
        paddingVertical: 6,
        paddingHorizontal: 10,
        marginEnd: 8,
    },
    content: {flex: 1, flexDirection: 'row', alignItems: 'center'},
    text: {marginStart: 8, fontSize: 20, fontWeight: '500', color: 'white'},
});

In what environment did this happen?

React Native Navigation version: 0.37.0
React Native version: 0.72.5
Has Fabric (React Native's new rendering system) enabled: no
Node version: 18
Device model: tested on iPhone 11 (but happens on all ios devices afaik)
iOS version: tested on 16.4 (but happens on all ios versions afaik)

[angelos3lex]

Fixed in latest 7.37.1! Thanks a lot @yogevbd !