callstack / callstack/react-native-paper

How to place component next to Accordion List header?

Open
#3,125 1 comment 3 reactions 0 assignees View on GitHub
repro provided
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

Essentially I am trying to do the same as this user:
https://github.com/callstack/react-native-paper/issues/3065

I created a smaller snack example of what goes wrong:
https://snack.expo.dev/ZLAdZjkes

In the original issue, it's mentioned that it's not possible to make components passed to "left" pressable. But perhaps it is possible to place a component next to the header, without moving the entire accordion list?
Is this possible?

![image](https://user-images.githubusercontent.com/41551215/159132787-40b5e80a-982f-49f3-9528-801f4addc4bc.png)

## Some context:
I am using an accordionlist where each item in the list would be a switch and some text, representing a filter to activate/deactivate. so essentially a long options list. The switch in the header would have the role of enabling or disabling all filters.

react-native: ^0.67.4
react-native-paper: ^4.11.2
react-native-vector-icons: ^9.1.0

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the linked Snack example and reviewing issue #3065 for the existing AccordionList behavior. Determine whether the requested component can sit beside the header and remain independently pressable; the issue is done when that behavior is clearly confirmed or the required change is scoped to a specific component entry point.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.