iOS Large Title noBorder doesn't remove bottom border

[AdamLee321]

🐛 Bug Report

I am trying to hide the bottom border for large titles but noBorder doesn't work for large titles. I have also tried setting the borderColor and borderHeight but this doesn't work for large titles.

To Reproduce

topBar: {
      largeTitle: {
        visible: true,
        color: '#222222',
      },
      noBorder: true,
      background: {
        color: 'white',
        translucent: false,
      },
 },

Expected behavior

noBorder should show noBorder for largeTitles.

Actual Behavior

noBorder shows a border for largeTitles.

Your Environment

• React Native Navigation version: 7.8.4
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 11 13.5

[binkerxbc]

please add code in TopBar:{ scrollEdgeAppearance: { noBorder:true, }, ... other code }

[a-eid]

@binkerxbc it seems that OP has already tried that.

[aa-io]

+1 on this issue

[cohen72]

setting translucent: true works for me:

background: {
   color: 'white',
   translucent: true,
   blur: false
}

[cjpete]

This seems to happen even on screens which do not have scrollable content. Seemingly on iOS 15 devices but not on iOS 14.

Thin line shown under header (bug):

  static options() {
    return {
      topBar: {
        title: {
          text: 'Page Title',
        },
        noBorder: true,
      },
    }
  }

Thin line hidden:

  static options() {
    return {
      topBar: {
        title: {
          text: 'Page Title',
        },
        noBorder: true,
        scrollEdgeAppearance: {
          noBorder: true,
        },
      },
    }
  }

React native v0.66.3 react-native-navigation v7.23.1

[trancongdung12]

This seems to happen even on screens which do not have scrollable content. Seemingly on iOS 15 devices but not on iOS 14.

Thin line shown under header (bug):

  static options() {
    return {
      topBar: {
        title: {
          text: 'Page Title',
        },
        noBorder: true,
      },
    }
  }

Thin line hidden:

  static options() {
    return {
      topBar: {
        title: {
          text: 'Page Title',
        },
        noBorder: true,
        scrollEdgeAppearance: {
          noBorder: true,
        },
      },
    }
  }

React native v0.66.3 react-native-navigation v7.23.1

thanks. it's work for me <3