Remove text space inside accordion list react native paper

Question

I'm using the List Accordion component, inside each section has a video and some text, this text will be under this video.

So, I noticed the text component has this space on the left, how can I remove this space? I tried with margin, padding, and nothing work

EXPO SNACK: https://snack.expo.dev/@matthsena/accordion

score 2 · Accepted Answer · answered Mar 08 '22 at 19:03

2

  <Accordion
    key={index}
    title={`${index + 1} - ${i.title}`}
    left={(props) => <List.Icon {...props} icon="youtube-tv" />}>
    <>     //<= Wrap up in fragments
    <AV
      source={{
        uri: i.url,
        overrideFileExtensionAndroid: 'mp4',
      }}
      isMuted={false}
      useNativeControls
      resizeMode="stretch"
    />

    <P>{i?.description}</P>
  </>
  </Accordion>`enter code here`

answered Mar 08 '22 at 19:03

this.arjun

330
1
4

it's work! you can please explain how works behind the scenes? why just wrapped in React.Fragment solves this problem? – Matheus Alexandre de Sena Mar 09 '22 at 18:12
1

Fragments don't inherit the styling props from their parent components. – this.arjun Mar 09 '22 at 19:00

Remove text space inside accordion list react native paper

1 Answers1