diff --git a/README.md b/README.md index feb7c99..6f3846f 100644 --- a/README.md +++ b/README.md @@ -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 | diff --git a/index.d.ts b/index.d.ts index aec5d5b..571dc20 100644 --- a/index.d.ts +++ b/index.d.ts @@ -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 @@ -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 { diff --git a/index.tsx b/index.tsx index 6c56ef8..13b7a12 100644 --- a/index.tsx +++ b/index.tsx @@ -182,7 +182,7 @@ export default class OTPInputView extends Component { - 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 @@ -192,7 +192,7 @@ export default class OTPInputView extends Component { this.fields[index] = ref }} onChangeText={text => { this.handleChangeText(index, text) @@ -248,4 +248,4 @@ export default class OTPInputView extends Component ); } -} +} \ No newline at end of file