Docs: Add Section with Solution for "double picker opening" bug

[caiangums]

Overview

Based on the issue and the discussion, some approaches can be used. The most common approach is described at README with this PR.

Test Plan

No Test needed! Just Docs update 😄

[mmazzarolo]

Hey @caiangums , thanks for improving the docs 🙌
Since the touchable + input part is not really related to the issue itself, can we mention only the part where we set the visibility to false first and then set the value? Or just linking the right answer in the thread would be cool too 👍

[caiangums]

@mmazzarolo Thanks for your quick review! Even tho the "bug" happens in Android, it is a common thing happening with the usage of <Input />. I can do something like this at the Readme:

Example of solution using Input + DatePicker

The most common approach for solving this when using an Input is:

• Wrap your Input with a "Pressable"/Button (TouchableWithoutFeedback/TouchableOpacity + activeOpacity={1} for example)
• Prevent Input from being focused. You could set editable={false} too for preventing Keyboard opening
• Triggering your hideModal() callback as a first thing inside onConfirm/onCancel callback props

const [isVisible, setVisible] = useState(false);
const [date, setDate] = useState('');
<TouchableOpacity
  activeOpaticy={1}
  onPress={() => setVisible(true)}>
  <Input
    value={value}
    editable={false} // optional
  />
</TouchableOpacity>
<DatePicker
  isVisible={isVisible}
  onConfirm={(date) => {
    setVisible(false); // <- first thing
    setValue(parseDate(date)); 
  }}
  onCancel={() => setVisible(false)}
/>

What do you think? 😄

[mmazzarolo]

The main thing I would add and highlight is that the source of the community picker bug is that, in Android, you should first hide the modal and then use/read the picked date (correct me if I'm wrong) -- regardless of using an <Input> or not.
The input example is fine, but as far as I know, the fact that it's involved in the discussion is because of a correlation, not causation 👍
What do you think? Does it make sense?

[caiangums]

Makes total sense! I changed the description and linked the reply. I also added the example using <Input />. If I'm not clear with the description or something that I added just let me know and I can change it 😄

Thanks for all your feedback and help! 😌

[mmazzarolo]

Looking good! 🙌 thanks for your contribution @caiangums :)

[github-actions]

🎉 This PR is included in version 9.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀