feat: Add defaultValue
prop to search bar
#2558
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add
defaultValue
prop to search bar, enabling initial text value configuration.A common use-case for a default value is deep linking to a search screen that makes use of the search bar.
It's possible to imperatively set the value via ref using
setText
, however there's no the suitable callback to do it reliably without seeing the initial empty value / flickering.Named the prop
defaultValue
to be consistent with RN TextInput where it's also used for the initial value for uncontrolled TextInput component.While it works well for my use case, I'm not fully sure if adding a defaultValue is the best approach with the imperative nature / paradigm how react-native-screens defines the search bar, maybe there's obvious downsides that I'm missing, would love to hear your thoughts.
Test code and steps to reproduce
Tested in my app with a patch with these changes on:
I tried to run the react-native-screens example app, but got 'No component found for view with name "RNScreenStackHeaderConfig" on iOS after following the Working on iOS steps and didn't have time to debug it atm. Also the steps mention yarn prepare in react-navigation, but there's no such script.
Checklist