Skip to content

Commit 05d73d0

Browse files
committed
8.0.1: Fix ts issue
1 parent aeea8ad commit 05d73d0

File tree

4 files changed

+14
-7
lines changed

4 files changed

+14
-7
lines changed

README.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,10 @@ You can use a ready-made solution out of the box:
8080
- [Show & Hide password](examples/DemoCodeField/src/UnmaskExample)
8181
- [Mask variant](examples/DemoCodeField/src/MaskExample)
8282

83-
```js
83+
```tsx
8484
import React, {useState} from 'react';
85-
import {SafeAreaView, Text, StyleSheet} from 'react-native';
85+
import {SafeAreaView, Text, StyleSheet, Platform} from 'react-native';
86+
import type {TextInputProps} from 'react-native';
8687

8788
import {
8889
CodeField,
@@ -111,8 +112,12 @@ const styles = StyleSheet.create({
111112
});
112113

113114
const CELL_COUNT = 6;
115+
const autoComplete = Platform.select<TextInputProps['autoComplete']>({
116+
android: 'sms-otp',
117+
default: 'one-time-code',
118+
});
114119

115-
const App = () => {
120+
function App() {
116121
const [value, setValue] = useState('');
117122
const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
118123
const [props, getCellOnLayoutHandler] = useClearByFocusCell({
@@ -133,14 +138,14 @@ const App = () => {
133138
rootStyle={styles.codeFieldRoot}
134139
keyboardType="number-pad"
135140
textContentType="oneTimeCode"
136-
autoComplete={Platform.select({ android: 'sms-otp', default: 'one-time-code' })}
141+
autoComplete={autoComplete}
137142
testID="my-code-input"
138143
renderCell={({index, symbol, isFocused}) => (
139144
<Text
140145
key={index}
141146
style={[styles.cell, isFocused && styles.focusCell]}
142147
onLayout={getCellOnLayoutHandler(index)}>
143-
{symbol || (isFocused ? <Cursor/> : null)}
148+
{symbol || (isFocused && <Cursor />)}
144149
</Text>
145150
)}
146151
/>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-confirmation-code-field",
3-
"version": "8.0.0",
3+
"version": "8.0.1",
44
"main": "esm/index.js",
55
"types": "esm/index.d.ts",
66
"files": [

src/__tests__/useBlurOnFulfill.test.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ it('should invoke blur method of ref when value length equal cellCount', () => {
1717
}),
1818
);
1919

20+
// @ts-expect-error - like text input
2021
result.current.current = {blur};
2122

2223
value = '1234';

src/useBlurOnFulfill.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import type {TextInput} from 'react-native';
12
import {useRef, useEffect} from 'react';
23

34
interface Options {
45
value?: string;
56
cellCount: number;
67
}
78

8-
export function useBlurOnFulfill<TInput extends {blur(): void}>({
9+
export function useBlurOnFulfill<TInput extends TextInput>({
910
value,
1011
cellCount,
1112
}: Options) {

0 commit comments

Comments
 (0)