Permit updating the value of code inputs #155
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.
Prior to this commit, there is no way to programmatically update the value of a CodeInput.
After this commit, sending a value prop to the CodeInput component allows us to control the value displayed in the CodeInput, by changing the content of the variable that's set as the CodeInput's value prop.
Overview
I wanted to be able to change the value displayed by a CodeInput component. Using TextInput's
value
prop didn't work because there's local state in the CodeInput component that controls the value that's displayed.Test Plan
I verified that my changes work by forking your repo, creating a branch (
permit-code-input-value-changes
- which is the fork I'd suggesting we merge in this PR) and committing my changes to that branch. Rather than publish the fork to NPM, I created another branch (on top of the previous one), on which I rannpm run build
, removed/lib
from the .gitignore, and pushed back up to my repo. I think we don't want the /lib checked in here, so I excluded it from this PR, but the only way I knew to test my changes without publishing to NPM was to include lib in a branch and then add my fork as a dependency to the project I'm working on by runningyarn add pachun/react-native-dialog#include-lib
. Once the fork was added as a dependency of the project I'm working on, I was able to control the value displayed by CodeInput components by doing:Now, anywhere where I call
setConfirmationCode(__value__)
, will update the value displayed by the CodeInput component to__value__
, which I couldn't find a way to do prior to making the changes in this fork.Other notes about the change:
I really dislike
useEffects
. I added one in this PR because it was the easiest way to get the behavior that I needed and get back to working on my project. I'm definitely open to implementing this any other way, possibly conforming to a project convention that I missed somewhere.EDIT:
Since this has been in review for a bit: For anyone else wanting this feature now, you can also do
yarn add pachun/react-native-dialog#include-lib
or the NPM equivalentnpm install pachun/react-native-dialog#include-lib --save
to install of version of react-native-dialog that'll let you control the value of aCodeInput
component.