Hi there, I'm Pritish! π
Hi, I'm Pritish Vaidya, a FrontEnd Developer.
Languages and Tools:
A highly customisable password strength meter implementation with minimal dependencies.
License: MIT License
Hi, I'm Pritish Vaidya, a FrontEnd Developer.
Languages and Tools:
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"
/>`
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 π π
<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
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
.
Do you have an explanation ?
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",
},
]}
/>
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.