Repository: expo/expo
File: apps/native-component-list/src/screens/UI/ListScreen.ios.tsx (TypeScript)

Code before:
      headerSearchBarOptions: {
        placeholder: 'Test different keyboard dismissals',
      },
    });
  }, [navigation]);

  return (
    <Host style={{ flex: 1 }}>
      <List
        editModeEnabled={editModeEnabled}
        onSelectionChange={(items) => alert(`indexes of selected items: ${items.join(', ')}`)}
        moveEnabled={moveEnabled}
        onMoveItem={(from, to) => alert(`moved item at index ${from} to index ${to}`)}
        onDeleteItem={(item) => alert(`deleted item at index: ${item}`)}
        listStyle={listStyleOptions[selectedIndex ?? 0]}
        modifiers={[
          scrollDismissesKeyboard(
            scrollDismissesKeyboardOptions[scrollDismissesKeyboardIndex ?? 0]
          ),
          headerProminence(increasedHeader ? 'increased' : 'standard'),
        ]}
        deleteEnabled={deleteEnabled}
        selectEnabled={selectEnabled}>
        <Section collapsible={collapsible} title="Collapsible section" footer="Footer text">
          {customHeaderFooter.header && (
            <Section.Header>
              <HStack modifiers={[background('red'), clipShape('roundedRectangle')]}>
                <HStack modifiers={[padding({ all: 8 })]}>
                  <Image systemName="list.bullet" color="white" size={22} />
                  <Text color="white" size={16}>
                    Custom header
                  </Text>
                </HStack>
              </HStack>
            </Section.Header>
          )}
          {customHeaderFooter.footer && (
            <Section.Footer>
              <HStack modifiers={[background('red'), clipShape('roundedRectangle')]}>
                <Text size={16} color="white" modifiers={[padding({ all: 8 })]}>
                  Custom Footer
                </Text>
              </HStack>
            </Section.Footer>
          )}
          <Section.Content>
            <Text size={17}>Some text!</Text>
            <Switch
              label="Use increased section header"
              value={increasedHeader}
              onValueChange={setIncreasedHeader}

Review comment (suggestion):
Very close! 

We want it to make it work like this: 

```jsx
<Section 
  collapsible={collapsible} 
  header={<Text>Collapsible section</Text>}
  footer={<Text>Footer text</Text> 
/>
```

For this, we'll need to do something like below in `Section/index.tsx`

```jsx
<Section>
  <SectionHeader>{props.header}</SectionHeader>
  <SectionFooter>{props.footer}</SectionFooter>
  {children}
</Section>
```

No need for Section.Content since it is passed as regular children to Section.

Code after:
      headerSearchBarOptions: {
        placeholder: 'Test different keyboard dismissals',
      },
    });
  }, [navigation]);

  return (
    <Host style={{ flex: 1 }}>
      <List
        editModeEnabled={editModeEnabled}
        onSelectionChange={(items) => alert(`indexes of selected items: ${items.join(', ')}`)}
        moveEnabled={moveEnabled}
        onMoveItem={(from, to) => alert(`moved item at index ${from} to index ${to}`)}
        onDeleteItem={(item) => alert(`deleted item at index: ${item}`)}
        listStyle={listStyleOptions[selectedIndex ?? 0]}
        modifiers={[
          scrollDismissesKeyboard(
            scrollDismissesKeyboardOptions[scrollDismissesKeyboardIndex ?? 0]
          ),
          headerProminence(increasedHeader ? 'increased' : 'standard'),
        ]}
        deleteEnabled={deleteEnabled}
        selectEnabled={selectEnabled}>
        <Section
          collapsible={collapsible}
          title="Collapsible section"
          {...(customHeaderFooter.header && {
            header: (
              <HStack modifiers={[background('red'), clipShape('roundedRectangle')]}>
                <HStack modifiers={[padding({ all: 8 })]}>
                  <Image systemName="list.bullet" color="white" size={22} />
                  <Text color="white" size={16}>
                    Custom header
                  </Text>
                </HStack>
              </HStack>
            ),
          })}
          footer={
            <>
              {customHeaderFooter.footer && (
                <HStack modifiers={[background('red'), clipShape('roundedRectangle')]}>
                  <Text size={16} color="white" modifiers={[padding({ all: 8 })]}>
                    Custom Footer
                  </Text>
                </HStack>
              )}
            </>
          }>
          <Switch
            label="Use increased section header"