Skip to content

Permit updating the value of code inputs #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

pachun
Copy link

@pachun pachun commented Mar 12, 2024

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 ran npm 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 running yarn 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:

  const [confirmationCode, setConfirmationCode] = React.useState("")

// ...

<Dialog.CodeInput
  autoFocus
  value={confirmationCode}
  onChangeText={setConfirmationCode}
  testID="Confirmation Code Input"
/>

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 equivalent npm install pachun/react-native-dialog#include-lib --save to install of version of react-native-dialog that'll let you control the value of a CodeInput component.

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.
pachun added a commit to pachun/too-many-men that referenced this pull request Jul 17, 2024
This commit fixes a few problems:

1. We show "hidden" a React Native TextInput component to collect
   player's phone numbers (which brings up the keyboard for typing) and
   then show a separate React Native Text component to display the phone
   number properly formatted ("(012) 345-6789"). On iOS, setting the
   TextInput's style to have a zero pixel width and height effectively
   hides it and allows using the keyboard. However, on android, when the
   TextInput component is set to have a zero pixel width and height, the
   keyboard shows, but it's onChangeText prop is not called when digits are
   pressed. Weirdly, it is called when the other characters on android's
   number-pad keyboard type are pressed (like "-" and ","). To fix this
   issue, we set the style of the TextInput to have 1x1 pixel dimensions on
   android, which can't be seen as far as we can tell and fixes the
   problem. We also remove any non-digit characters which are entered on
   android's number-pad keyboard type. Since we auto-format the phone
   number for display already, there's no need to type things like hyphens.

2. We removed the react-native-dialog dependency. We've noticed a number
   of problems with it. It hasn't been updated in years. We've opened
   PRs to the repo and haven't heard back about them in months. The one
   time code type input does not work correctly. The dependency uses
   platform specific colors which work for and switch appropriately
   between android and ios, but break the web version of the app.
   Removing the dependecy and using plain RN components feels like the
   easiest best solution for now.

https://github.com/mmazzarolo/react-native-dialog
mmazzarolo/react-native-dialog#155
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant