Dialog component - adding line separators inside Section

Extensions
1

Hello,

Dialog component is adding the “line separators” when used inside section (this “extended” line separator on provided image. On code example I could take it out of the section, but when there’s loads of nested components it becomes harder and creates non-necessary code complexity. Is it possible to avoid this behaviour?

Code example where issue is visible:

<Screen name="Test" title="Test">
  <ScrollView>
    <Section title="Test">
      <Text variant="body">Line1</Text>
      <Text variant="body">Line1</Text>
      <Dialog
        title="Test"
        actionText="Action"
        onAction={() => {}}
        isVisible={false}
      />
      <Dialog
        title="Test"
        actionText="Action"
        onAction={() => {}}
        isVisible={false}
      />
      <Dialog
        title="Test"
        actionText="Action"
        onAction={() => {}}
        isVisible={false}
      />
      <Dialog
        title="Test"
        actionText="Action"
        onAction={() => {}}
        isVisible={false}
      />
      <Text variant="body">Line1</Text>
    </Section>
  </ScrollView>
</Screen>

Screenshot 2025-01-23 at 02.08.03
Screenshot 2025-01-23 at 02.08.031462×260 17.9 KB

2

Hi Robert,

Thank you for bringing this to our attention. We are aware of the issue with the dialog component adding line separators within sections and will address it in the POS next update.

Victor

3

Hi, if you’re looking for a workaround, you could create a wrapper around <Dialog /> that uses a portal to move the component to outside of your <Navigator /> (this makes sure its always mounted). I have used GitHub - gorhom/react-native-portal: A simplified portal implementation for ⭕️ React Native & Web ⭕️. to do something similar and it works like a charm