react navigation native-stack searchbar placeholder text

27 Views Asked by At

I cannot find out where to change the color of the placeholder text in reactnavigations native-stack searchbar.

Modifying everything else is well described here:

https://reactnavigation.org/docs/native-stack-navigator/

Do you have any idea?

I'm using:

    navigation.setOptions({
        headerSearchBarOptions: {
            placeholder: "placeholder",
            placement: "stacked",
            autofocus: true,
            hideWhenScrolling: false,
            onChangeText: (event) => setNeedle(event.nativeEvent.text),
            tintColor: "white",
            textColor: "white",
            obscureBackground:false
        },
    } as NativeStackNavigationOptions)

For android hintTextColor: "white" is working fine. Missing this option for iOS though.

1

There are 1 best solutions below

1
Deep Rathod On

Try with below one

navigation.setOptions({
    headerSearchBarOptions: {
        placeholder: "placeholder",
        placement: "stacked",
        autofocus: true,
        hideWhenScrolling: false,
        onChangeText: (event) => setNeedle(event.nativeEvent.text),
        tintColor: "white",
        textColor: "white",
        obscureBackground:false
        placeholder:"Search",
        placeholderTextColor:"red" // Your color
    },
} as NativeStackNavigationOptions)