pritishvaidya/react-native-password-strength-meter

A highly customisable password strength meter implementation with minimal dependencies.

Hi there, I'm Pritish! 👋

Hi, I'm Pritish Vaidya, a FrontEnd Developer.

Languages and Tools:

react-native-password-strength-meter's Issues

Ref is not working

• I have tried ref but its not working saying this3.Password.focus is not a function i am referring it from last textinput which is
  `<RNPasswordStrengthMeter
  ref = { ref => this.Password = ref }
  // inputRef={(input) => { this.Password = input; }}
  // inputRef={ref => { this.Password = ref; }}
  onChangeText={this.onChangePassword}
  passwordProps = {{
  variations: {
  digits: /\d/,
  lower: /[a-z]/,
  // upper: /[A-Z]/,
  nonWords: /\W/,
  },
  scoreLimit: 60,
  minLength: 6,
  labelVisible: false,
  levels: [

  {
  label: 'Weak',
  labelColor: Colors.TITLE_FONT_COLOR,
  activeBarColor: '#ff6900',
  },
  {
  label: 'Fair',
  labelColor: Colors.TITLE_FONT_COLOR,
  activeBarColor: '#f2cf1f',
  },
  {
  label: 'Strong',
  labelColor: Colors.TITLE_FONT_COLOR,
  activeBarColor: '#14eb6e',
  }
  ],
  } }

      containerWrapperStyle= {{backgroundColor:'#fff', textAlign:'center',
      borderWidth: 1,
  

  // borderColor: Colors.BORDER_GRAY,
  borderColor:'#dd9aad',
  backgroundColor:'#fff',
  width: Sizes.WINDOW_WIDTH * 0.9,
  height: 40,
  marginLeft:-1,
  justifyContent: 'center',
  marginBottom: 10,
  borderRadius: 40}}
  inputWrapperStyle={[ {backgroundColor:'transparent', height:50, textAlign:'center'}]}
  inputStyle={{height:65, textAlign:'center', }}
  placeholderStyle={{textAlign:'center'}}

      maxLength={15}
      autoCapitalize="none"
      underlineColorAndroid="transparent"
      returnKeyType={'next'}
      secureTextEntry
      placeholder="Password"
      autoCorrect={false}
      value={this.state.password}
      imageWrapperStyle ={{ alignSelf: 'flex-end', marginRight: -6 }}
      // onChangeText={value => this.setState({ password: value, passwordErrorFlag: false })}
      
      
      
      meterType="text"
      
      
    />`
  

useNativeDriver warning

Hello,

I having a warning using this module, is about useNativeDriver I'm using react-native 0.62.2.

Any suggestion how can I fix this? I added the property useNativeDriver: false in here and the warning disappear, but I don't know if that is the correct solution.

Thank you, this package is really helpful and easy to use keep the good work 👍 😄

How to get the specific value

<Form >
                        <Item floatingLabel style={{ paddingLeft: 4, marginLeft: 0 }}>
                            <Label style={{ fontSize: 15, color: "#a0a0a0", paddingLeft: 20 }}>Password</Label>
                            <Input
                                style={{ paddingLeft: 16 }}
                                secureTextEntry={this.state.hidePassword}
                                underlineColorAndroid="transparent"
                                value={this.state.password}
                                onChangeText={(input) => {
                                    this.setState({
                                        password: input
                                    })
                                }}
                               
                            />
                            <Icon name="eye" onPress={() => {
                                //TOGGLE EYE COLOR
                                if (this.state.hidePassword == true) {
                                    this.setState({ eyeColor: "black" })
                                } else {
                                    this.setState({ eyeColor: "lightgray" })
                                }
                                this.setState({ hidePassword: !(this.state.hidePassword) })
                            }}
                                style={{ color: this.state.eyeColor, }} />
                        </Item>
                    </Form>
                    <Form>
                        <Item floatingLabel style={{ paddingLeft: 4, marginLeft: 0 }}>
                            <Label style={{ fontSize: 15, color: "#a0a0a0", paddingLeft: 20 }}>Confirm Password</Label>
                            <Input
                                style={{ paddingLeft: 16 }}
                                ref={compId => {
                                    this.componentId["passField"] = compId
                                }}
                                secureTextEntry={this.state.hideConfirmPassword}
                                underlineColorAndroid="transparent"
                                value={this.state.confirmPassword}
                                onChangeText={(input) => {
                                    this.setState({
                                        confirmPassword: input
                                    })
                                }}
                                blurOnSubmit={true}
                            
                            />
                            <Icon name="eye" onPress={() => {
                                //TOGGLE EYE COLOR
                                if (this.state.hideConfirmPassword == true) {
                                    this.setState({ confirmEyeColor: "black" })
                                } else {
                                    this.setState({ confirmEyeColor: "lightgray" })
                                }
                                this.setState({ hideConfirmPassword: !(this.state.hideConfirmPassword) })
                            }}
                                style={{ color: this.state.confirmEyeColor, }} />
                        </Item>
                    </Form>
                    {/* <View style={{ marginHorizontal: 10} }> */}
                    <BarPasswordStrengthDisplay
                    
                        levels={[
                            {
                                label: "Weak Password",
                                labelColor: "#ed412d",
                                activeBarColor: "#ed412d",
                            },
                            {
                                label: "Average Password",
                                labelColor: "#f7bc00",
                                activeBarColor: "#f7bc00",
                            },
                            {
                                label: "Strong Password",
                                labelColor: "#2da94f",
                                activeBarColor: "#2da94f",
                            }
                            ,
                            {
                                label: "Very Strong Password",
                                labelColor: "#2da94f",
                                activeBarColor: "#2da94f",
                            }
                        ]}
                        password={this.state.password}
                    />

Im trying to add button save (Save button disabled true when first render, but first I need to get the value of the bar,
the password is strong to very strong The save button will be disabled false

Version inconsistency ?

Hello,

first thanks for this awesome component !

I noticed something stranged but maybe i'm missing something ! Fresh installing your package we get the version 0.0.2 but there is only one release for 0.0.1.

Moreover and that's more important, there is difference in the code on github and the code of the installed package.

I've only found one example:
here the version installed says label.label instead of the correct level.label.

After fresh install:

Do you have an explanation ?

Style color for Box Component

Hi, do you have an example of how we can style the box component? Apparently, what I did here isn't working. Any tip is much appreciated.

                        <BoxPasswordStrengthDisplay
                            password={this.state.password}
                            levels={[
                                {
                                    label: "Weak",
                                    labelColor: "#ff0000",
                                    activeBarColor: "#ff0000",
                                },
                            ]}
                        />

Error: Style property 'width' is not supported by native animated module

Hi,

I have tried implementing your library, accessing it as a Component Usage. I'm using typescript so added the necessary modules in ts.config.

This is the error i'm getting with your library.

[Mon Oct 05 2020 14:00:34.877] ERROR Error: Style property 'width' is not supported by native animated module

This error is located at:
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at bar-password-strength-display.js:51)
in RCTView (at View.js:34)
in View (at bar-password-strength-display.js:50)
in RCTView (at View.js:34)
in View (at bar-password-strength-display.js:49)
in BarPasswordStrengthDisplay (at PasswordScreen.tsx:105)
in RCTView (at View.js:34)
in View (at PasswordScreen.tsx:104)
in RCTView (at View.js:34)
in View (at PasswordScreen.tsx:90)
in RCTView (at View.js:34)
in View (at PasswordScreen.tsx:76)
in RCTView (at View.js:34)
in View (at PasswordScreen.tsx:72)
in RCTScrollContentView (at ScrollView.js:1124)
in RCTScrollView (at ScrollView.js:1260)
in ScrollView (at ScrollView.js:1286)
in ScrollView (at KeyboardAwareHOC.js:517)
in KeyboardAwareScrollView (at PasswordScreen.tsx:70)
in RCTSafeAreaView (at SafeAreaView.js:51)
in ForwardRef(SafeAreaView) (at PasswordScreen.tsx:69)
in PasswordScreen (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:150)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:221)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:220)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:563)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:545)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:539)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:535)
in RCTView (at View.js:34)
in View (at Card.tsx:529)
in Card (at CardContainer.tsx:189)
in CardContainer (at CardStack.tsx:558)
in RCTView (at View.js:34)
in View (at Screens.tsx:69)
in MaybeScreen (at CardStack.tsx:551)
in RCTView (at View.js:34)
in View (at Screens.tsx:48)
in MaybeScreenContainer (at CardStack.tsx:461)
in CardStack (at StackView.tsx:458)
in KeyboardManager (at StackView.tsx:456)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:453)
in RCTView (at View.js:34)
in View (at StackView.tsx:452)
in StackView (at createStackNavigator.tsx:85)
in StackNavigator (at App.tsx:26)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:390)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.tsx:25)
in App (at App.tsx:99)
in Provider (at App.tsx:98)
in _default (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)