Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Added filled styles for input fields that are filled. #184

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: Added filled styles for input fields that are filled. #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c71fe3a
#added filled input styles
mak12 Jun 1, 2022
5a1af44
#retained original formatting
mak12 Jun 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ const styles = StyleSheet.create({
| code | NO | You can use this library as a controlled / uncontrolled component by supplying this prop or not |
| codeInputFieldStyle | NO | The style of the input field which is NOT focused |
| codeInputHighlightStyle | NO | The style of the input field which is focused |
| codeInputFilledStyle | NO | The style of the input field which are filled |
| autoFocusOnLoad | NO | Auto activate the input and bring up the keyboard when component is loaded |
| onCodeChanged | NO | Callback when the digits are changed |
| onCodeFilled | NO | Callback when the last digit is entered |
Expand Down
8 changes: 6 additions & 2 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ declare module '@twotalltotems/react-native-otp-input' {
* Style of highlighted status for input fields
*/
codeInputHighlightStyle?: TextStyle;
/**
* Style of the filled input fields
*/
codeInputFilledStyle?: TextStyle;
/**
* Callback function
* Trigger when all fields of the OTP has been filled
Expand Down Expand Up @@ -89,8 +93,8 @@ declare module '@twotalltotems/react-native-otp-input' {
}

export interface OTPInputViewState {
digits: string[];
selectedIndex: number;
digits: string[];
selectedIndex: number;
}

export default class OTPInputView extends React.Component<InputProps, OTPInputViewState> {
Expand Down
6 changes: 3 additions & 3 deletions index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
}

renderOneInputField = (_: TextInput, index: number) => {
const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props
const { codeInputFieldStyle, codeInputFilledStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props
const { defaultTextFieldStyle } = styles
const { selectedIndex, digits } = this.state
const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props
Expand All @@ -192,7 +192,7 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
<TextInput
testID="textInput"
underlineColorAndroid='rgba(0,0,0,0)'
style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : [defaultTextFieldStyle, codeInputFieldStyle]}
style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : (selectedIndex < index ? [defaultTextFieldStyle, codeInputFieldStyle] : [defaultTextFieldStyle, codeInputFilledStyle])}
ref={ref => { this.fields[index] = ref }}
onChangeText={text => {
this.handleChangeText(index, text)
Expand Down Expand Up @@ -248,4 +248,4 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
</View>
);
}
}
}