Sometimes we will not support all of the countries.
I would like to make options of country list could be customized,
I think we can do:

1. Add property to enable/disable specify countries by isoCountryCode or CallingCode
2. Add property to override default country codes

In my opinion, I prefer to override default country codes.
I think enable/disable specify countries will be a bit complex for the setting, override default country codes could be more flexible and easier to use.

So I would like to do:

• Rename countryCodes to defaultCountryCodes (the country codes array)
• Add a property countryCodes: Country[] to CountryPickerProps
• Modify countryCode related function to use
  const countryCodes: Country[] = this.props.countryCodes || defaultCountryCodes

Any thoughts?

as title description.

related issue: facebook/react-native#16826

Reproduce by code example:

// FromScreen.js: append `multiline={true}` to the last one of textinput
  ...
     <FormField index={4} style={styles.input}>
            {props => (
              <View style={styles.inputContainer}>
                <TextInput
                  ref={props.focusableRef}
                  onSubmitEditing={props.onSubmitEditing}
                  blurOnSubmit={props.blurOnSubmit}
                  multiline={true} <---- this line
                  placeholder="Input 5"
                />
              </View>
            )}
       </FormField>
  ...

Result:

The last textInput is focused, but it's behind keyboard.

https://github.com/react-native-community/react-native-picker

Currently it would trigger a warning asking apps to migrate to this standalone version instead.

We should have a instance method to focus mobile number textinput in SignupWithMobile

Now, the country picker will show the placeholder by default.

TODO:

• Should allow the developer to set the default location value
• We should check the simcard location and then auto-select the appropriate country from the country list
• If no any location can be retrieved from simcard
  • please pick the default value which set by the developer
• If developer doesn't configure the default location or the default location value is empty
  • should show the placeholder in the country picker

Layout Implementation

• Please help to create the dialog layout according to the design
  • Title
    • Bold
  • Message
    • Align Center
  • Action Button
    • Round button with grey border
  • Dismiss button - Maybe Later

Component Details

• Allow to config the title
• Allow to config the message
• Allow to config the type of permission
  • Photo library
  • Push notification
• There are 2 type of dialog
  • First time: Ask for enabling the permission
  • If the permission is denied, should show to button called Go to setting
• For the button Maybe later
  • After pressing this button, the dialog will be dismissed

Android implementation documents:

• https://facebook.github.io/react-native/docs/permissionsandroid
• https://forums.estimote.com/t/how-to-modify-message-to-request-the-location-permission/6216

Now that we have monorepo, the package cannot be consumed directly via Github URL. So it does not matter we have to an extra step (compiling TypeScript to JavaScript) before publishing.

Without 1.5x, 2x and 3x, some images cannot be shown / are blurred

• KeyboardAvoidingView
• Modal
• Picker
• createControlGroup

To explain what the project is about so people can take a quick look and aware of what is it.

New version of iOS supports dark mode. Components in this library should support using dark mode.

Layout Implementation

• The background can be solid color or image
  • Please help to set it as White in this component
• Should the box in the middle of the screen with shadow
• Show the message We have sent you a 4 digit code to {Country Code + Phone number}, please enter the code below
• Display 4 boxes
  • Can only allow to input numeric
• Display a resend button and show the label `Didn't receive any code? Request resend ({Second})
  • Should be disabled

Behaviour

• Once entering this screen
  • Should auto fucus on the first box
  • should show the numeric keyborad automatically
• After inputing the fourth number, should submit the request automatically
  • Check the passcode whether it is correct or not
    • If fails
      • Should Help to remove all the passcode
      • Change all the border of the input boxes to red color
      • Show the error message in red
      • Should auto fucus on the first box and show the numeric keyborad
      • Until the first number inputted, all the error message should be dismissed including
        • Should dismiss red border
        • Should dismiss error message
    • If passed, navigate to the next pass

Timer

• Start the Countdown Timer from 59s
• Countdown until 0s, enable the button
• After pressing the button, the countdown will be reset
  • Disable the resend button
  • The countdown will change to 59s again

As title, oursky often need chinese and english. Sometime Italiano.

https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0660

PickerIOS was removed in 0.66

A few days ago, we set up "example" project for development (#5) and we changed the project to use mono repo structure. After a few iterations, I feel this is a wrong decision to use mono repo.

After changed to mono repo structure, we cannot use git to install the package but through npm. That means we need to publish a new version whatever has changed. For a library under active development like this library, this really slows down the projects which use this library because we need to wait for publishing to npm.

One example is if I want to use a new feature that is in PR review status and I really need, I have to create a new temporary branch and merge that PR into that branch and then publish to npm with alpha or beta tag. However, if we give up mono repo structure, we can just install via git, which steps are simpler.

Therefore, I suggest we give up mono repo structure.

@louischan-oursky What do you think?

cc @rickmak

Layout Implementation

• Implement Get Started title
• Implement the box
  • with shadow
• Country Picker
• Mobile Number
  • Should only allow inputting Number,
  • When input alphabetical, should not show any text on the input field
• For multilingual
• For different screen size (Please provide the following device screencap after the implementation)
  • Iphone XS Max
  • Iphone X
  • Iphone SE
  • Nexue 5
  • Samsung note 9

Entering page

• Should show the keyboard in phone-pad immediately

Button Behaviour

• After pressing Country picker
  • Should open the country selection page
• After pressing Next button
  • Should check the validation in local
    • Country code selection
      • Required
    • Mobile Number Input field
      • Numeric only
  • If the validation failed, show the validation error message
  • If the validation is passed, show the spinner on the button and disable the button
  • Trigger to retrieve SMS request
• No need to handle Skip for now button

Layout Implementation

• Display a toast message box
  • Stick with the tab bar

Component Details

• The icon can be configured
• The message can be configured
• Should configurable the flag to identify what page will disable this checking
• Should keep checking the network status
  • If the network is not available
    • Show the toast box
    • Check the network state periodically such as 3 seconds
      • Until the network status changed to available
        • Dismiss the toast box

Readme

• After the development, should talk about how to use this component in the README file

To allow native code to be provided by this package.

@shana0440

• Please update the < button

Please add the following to .gitignore:

*.pem
*.cer
*.cert
*.p12
*.pfx
*.key
.env
docker-compose.override.yml