fixing layout of otp modal

This commit is contained in:
balzack 2024-05-18 00:32:16 -07:00
parent a1041fb225
commit caf46172c8
2 changed files with 9 additions and 5 deletions

View File

@ -234,7 +234,7 @@ export function Settings({ drawer }) {
<Text style={styles.optionText}>{ state.strings.mfaTitle }</Text>
</TouchableOpacity>
<Switch value={state.mfaEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.idleFill}
trackColor={styles.track} onValueChange={actions.toggleMFA} />
trackColor={styles.track} onValueChange={toggleMFA} />
</View>
</TouchableOpacity>
@ -894,7 +894,7 @@ export function Settings({ drawer }) {
>
<View>
<BlurView style={styles.mfaOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<View style={styles.mfaBase}>
<KeyboardAvoidingView style={styles.mfaBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.mfaContainer}>
<Text style={styles.mfaTitle}>{ state.strings.mfaTitle }</Text>
<Text style={styles.mfaDescription}>{ state.strings.mfaSteps }</Text>
@ -935,7 +935,7 @@ export function Settings({ drawer }) {
)}
</View>
</View>
</View>
</KeyboardAvoidingView>
</View>
</Modal>

View File

@ -1,13 +1,17 @@
import { TextInput, Text, View, TouchableOpacity } from 'react-native';
import { useState } from 'react';
import { useState, useRef } from 'react';
export function InputCode({ onChangeText, style }) {
const [code, setCode] = useState('');
const ref = useRef();
const updateCode = (value) => {
if (value.length >= 6) {
onChangeText(value.slice(0, 6));
if (ref.current) {
ref.current.blur();
}
}
else {
onChangeText('');
@ -38,7 +42,7 @@ export function InputCode({ onChangeText, style }) {
<Text style={{ fontSize: 20 }}>{ code.charAt(5) }</Text>
</View>
</View>
<TextInput style={{ width: '100%', height: '100%', opacity: 0, position: 'absolute', top: 0, left: 0 }} onChangeText={updateCode} autoCorrect={false} autoCapitalize="none" maxLength={6} />
<TextInput style={{ width: '100%', height: '100%', opacity: 0, position: 'absolute', top: 0, left: 0 }} keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'} onChangeText={updateCode} autoCorrect={false} autoCapitalize="none" maxLength={6} ref={ref} />
</View>
</View>
);