Skip to content

Commit ae87847

Browse files
kuraydevkuraydev
committed
feat: version 5 library is here
1 parent 6da4f65 commit ae87847

11 files changed

Lines changed: 274 additions & 124 deletions

File tree

‎README.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ import LoginScreen from "react-native-login-screen";
7878
}}
7979
loginButtonText={'Create an account'}
8080
disableSignup
81-
customEyeIcon={<View />}
8281
textInputChildren={
8382
<View style={{marginTop: 16}}>
8483
<TextInput
@@ -128,8 +127,6 @@ You can put any `children` into the LoginScreen, I recommend you to use `SocialB
128127
| loginTextStyle | TextStyle | default | set/override the default login text style |
129128
| signupStyle | ViewStyle | default | set/override the default signup button style |
130129
| signupTextStyle | TextStyle | default | set/override the default signup text style |
131-
| eyeIconContainer | ViewStyle | default | set/override the default eye icon container style |
132-
| eyeIconStyle | ImageStyle | default | set/override the default eye icon image style |
133130
| textInputProps | [IInteractiveTextInputProps](https://github.com/WrathChaos/react-native-text-input-interactive#customization-optionals) | default | set/override the default textinput props |
134131

135132

@@ -139,7 +136,6 @@ You can put any `children` into the LoginScreen, I recommend you to use `SocialB
139136
|--------------------|:---------:|:-------:|-------------------------------------------------------------|
140137
| customTextInputs | Component | default | set your own custom text inputs instead of built-in ones |
141138
| textInputChildren | Component | default | set your own EXTRA custom text inputs with the current ones |
142-
| customEyeIcon | Component | default | set your own custom eye icon |
143139
| customLogo | Component | default | set your own logo |
144140
| customLoginButton | Component | default | set your login button |
145141
| customSignupButton | Component | default | set your sign up button |

‎assets/logo.png‎

-10.2 KB
Loading

‎example/App.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import React from 'react';
2-
import {View, StatusBar} from 'react-native';
2+
import {View, StatusBar, UIManager, Platform} from 'react-native';
33
// import LoginScreen from 'react-native-login-screen';
44
import LoginScreen from './lib/LoginScreen';
55
import TextInput from 'react-native-text-input-interactive';
66

7+
if (
8+
Platform.OS === 'android' &&
9+
UIManager.setLayoutAnimationEnabledExperimental
10+
) {
11+
UIManager.setLayoutAnimationEnabledExperimental(true);
12+
}
13+
714
const App = () => {
815
const [username, setUsername] = React.useState('');
916
const [password, setPassword] = React.useState('');

‎example/lib/LoginScreen.style.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface Style {
2525
eyeIconContainer: ViewStyle;
2626
eyeIcon: ImageStyle;
2727
shakeText: TextStyle;
28+
emailTextInputContainer: ViewStyle;
2829
emailTooltipContainer: ViewStyle;
2930
emailTooltipTextStyle: TextStyle;
3031
emailTooltipRedTextStyle: TextStyle;
@@ -132,6 +133,10 @@ export default StyleSheet.create<Style>({
132133
marginLeft: 12,
133134
marginRight: 'auto',
134135
},
136+
emailTextInputContainer: {
137+
alignItems: 'center',
138+
justifyContent: 'center',
139+
},
135140
emailTooltipContainer: {
136141
padding: 12,
137142
alignItems: 'center',

‎example/lib/LoginScreen.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export interface ILoginScreenProps {
3838
loginButtonText?: string;
3939
disableEmailValidation?: boolean;
4040
enablePasswordValidation?: boolean;
41+
disableEmailTooltip?: boolean;
42+
disablePasswordTooltip?: boolean;
4143
style?: StyleProp<ViewStyle>;
4244
dividerStyle?: StyleProp<ViewStyle>;
4345
logoImageStyle?: StyleProp<ImageStyle>;
@@ -107,6 +109,8 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
107109
passwordTextInputProps,
108110
disableEmailValidation = false,
109111
enablePasswordValidation = false,
112+
disableEmailTooltip = false,
113+
disablePasswordTooltip = false,
110114
emailContentTooltip,
111115
passwordContentTooltip,
112116
TouchableComponent = TouchableOpacity,
@@ -147,13 +151,13 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
147151
}
148152

149153
if (emailValidator(email)) {
150-
setEmailTooltipVisible(false);
154+
!disableEmailTooltip && setEmailTooltipVisible(false);
151155
handlePasswordValidation();
152156
onEmailChange(email);
153157
return;
154158
} else {
155159
LayoutAnimation.spring();
156-
setEmailTooltipVisible(true);
160+
!disableEmailTooltip && setEmailTooltipVisible(true);
157161
onEmailChange(email);
158162
}
159163
};
@@ -167,13 +171,13 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
167171
return;
168172
}
169173
if (enablePasswordValidation && passwordValidator(password)) {
170-
setPasswordTooltipVisible(false);
174+
!disablePasswordTooltip && setPasswordTooltipVisible(false);
171175
onPasswordChange(password);
172176
return;
173177
} else {
174178
LayoutAnimation.spring();
175-
setEmailTooltipVisible(false);
176-
setPasswordTooltipVisible(true);
179+
!disableEmailTooltip && setEmailTooltipVisible(false);
180+
!disablePasswordTooltip && setPasswordTooltipVisible(true);
177181
onPasswordChange(password);
178182
}
179183
};
@@ -199,13 +203,11 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
199203
</View>
200204
);
201205
return (
202-
<View
203-
style={{
204-
alignItems: 'center',
205-
justifyContent: 'center',
206-
}}>
206+
<View style={styles.emailTextInputContainer}>
207207
<>
208-
{isEmailTooltipVisible && <Tooltip>{tooltipContent()}</Tooltip>}
208+
{!disableEmailTooltip && isEmailTooltipVisible && (
209+
<Tooltip>{tooltipContent()}</Tooltip>
210+
)}
209211
<TextInput
210212
placeholder={emailPlaceholder}
211213
onChangeText={handleEmailChange}
@@ -236,7 +238,7 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
236238
return (
237239
!disablePasswordInput && (
238240
<View style={styles.passwordTextInputContainer}>
239-
{isPasswordTooltipVisible && (
241+
{!disablePasswordTooltip && isPasswordTooltipVisible && (
240242
<Tooltip>{renderTooltipContent()}</Tooltip>
241243
)}
242244
<TextInput

‎lib/LoginScreen.style.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@ interface Style {
2525
eyeIconContainer: ViewStyle;
2626
eyeIcon: ImageStyle;
2727
shakeText: TextStyle;
28+
emailTextInputContainer: ViewStyle;
29+
emailTooltipContainer: ViewStyle;
30+
emailTooltipTextStyle: TextStyle;
31+
emailTooltipRedTextStyle: TextStyle;
32+
emailTooltipContentStyle: ViewStyle;
33+
emailTooltipBackgroundStyle: ViewStyle;
34+
passwordTooltipStyle: ViewStyle;
35+
passwordTooltipContainer: ViewStyle;
36+
passwordTooltipContentStyle: ViewStyle;
37+
passwordTooltipTextStyle: TextStyle;
38+
passwordTooltipRedTextStyle: TextStyle;
39+
passwordTooltipBackgroundStyle: ViewStyle;
2840
}
2941

3042
export default StyleSheet.create<Style>({
@@ -44,6 +56,8 @@ export default StyleSheet.create<Style>({
4456
},
4557
passwordTextInputContainer: {
4658
marginTop: 16,
59+
alignItems: "center",
60+
justifyContent: "center",
4761
},
4862
loginButtonStyle: {
4963
height: 40,
@@ -119,4 +133,51 @@ export default StyleSheet.create<Style>({
119133
marginLeft: 12,
120134
marginRight: "auto",
121135
},
136+
emailTextInputContainer: {
137+
alignItems: "center",
138+
justifyContent: "center",
139+
},
140+
emailTooltipContainer: {
141+
padding: 12,
142+
alignItems: "center",
143+
justifyContent: "center",
144+
},
145+
emailTooltipTextStyle: {
146+
fontSize: 16,
147+
},
148+
emailTooltipRedTextStyle: {
149+
fontWeight: "bold",
150+
color: "red",
151+
},
152+
emailTooltipContentStyle: {
153+
borderRadius: 12,
154+
alignItems: "center",
155+
justifyContent: "center",
156+
},
157+
emailTooltipBackgroundStyle: {
158+
backgroundColor: "transparent",
159+
},
160+
passwordTooltipStyle: {
161+
marginTop: 30,
162+
},
163+
passwordTooltipContainer: {
164+
padding: 12,
165+
alignItems: "center",
166+
justifyContent: "center",
167+
},
168+
passwordTooltipTextStyle: {
169+
fontSize: 16,
170+
},
171+
passwordTooltipRedTextStyle: {
172+
fontWeight: "bold",
173+
color: "red",
174+
},
175+
passwordTooltipBackgroundStyle: {
176+
backgroundColor: "transparent",
177+
},
178+
passwordTooltipContentStyle: {
179+
borderRadius: 12,
180+
alignItems: "center",
181+
justifyContent: "center",
182+
},
122183
});

0 commit comments

Comments
 (0)