@@ -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 
8484import  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
8788import  {
8889  CodeField ,
@@ -111,8 +112,12 @@ const styles = StyleSheet.create({
111112});
112113
113114const =  6 ;
115+ const =  Platform .select <TextInputProps [' autoComplete' 
116+   android: ' sms-otp' 
117+   default: ' one-time-code' 
118+ });
114119
115- const  App   =  ()  =>  {
120+ function  App()  {
116121  const =  useState (' ' 
117122  const =  useBlurOnFulfill ({value , cellCount: CELL_COUNT });
118123  const =  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      />
0 commit comments