callstack / callstack/react-native-paper

Not Able to change background color of entire searchbar using className

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

Description

### Current behaviour
I am using the Searchbar component with icon and I want to apply some nativewind style to the entire searchbar, I tried using className but it does not seems to be working.

Now if try adding style prop it does works but we are not following the style prop flow.

The cause I've found is that there is no use of {...rest} prop in the Surface component.
My solution is that we should have another class that should be passed from SearchBar and applied on the Surface component.

### Expected behaviour
Upon passing the className it should apply on the Internal Surface component as well.

### How to reproduce?
Use the Searchbar component.
pass nativewind classes using className.

### Preview
React Native Paper SearchBar Code
Image

UI:
Image

### What have you tried so far?

### Your Environment

| software | version
| --------------------- | -------
| react-native | 0.81.4
| react-native-paper | 5.14.5
| node | 20.19.5

Contributor guide

Open the contributing guide

Research direction

Start at the Searchbar component and inspect how props reach its internal Surface component, focusing on the className behavior described in the issue. Reproduce the NativeWind background-color case and confirm that passing className changes the entire searchbar surface as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.