Closed saheem128 closed 2 years ago
import React, { useState } from 'react' import { View, Text, StyleSheet, TouchableOpacity, TextInput, } from 'react-native' import Container from '../components/container' import CustomText from '../components/text' import OTPInputView from '@twotalltotems/react-native-otp-input' import { COLORS, SIZES } from '../constants' import CustomButton from '../components/button' import { gql, useMutation } from '@apollo/client'
// Define mutation
const VERIFY_OTP = gql mutation verifyOtp($phone_no: String!, $otp: String!) { verifyOtp(phone_no: $phone_no, otp: $otp) { id phone_no verify otp isNewUser } }
export default function OTPScreen({ navigation }: any) { const [verifyOtp, { data, loading, error }] = useMutation(VERIFY_OTP) const [code, setCode] = useState('') return (
) } // Dimensions const DeviceHeight = SIZES.height
const styles = StyleSheet.create({ wrapper: { flex: 1, marginVertical: DeviceHeight < 300 ? 20 : 80, }, otpText: { color: COLORS.black, // marginVertical: DeviceHeight < 300 ? 20 : 40, },
underlineStyleBase: { borderRadius: 6, borderColor: COLORS.main, color: '#000', backgroundColor: 'transparent', }, underlineStyleHighLighted: { borderColor: COLORS.main, backgroundColor: 'transparent', }, resendText: { color: COLORS.main, fontWeight: '800', marginLeft: 5, marginVertical: -3, }, receiveText: { marginVertical: 20, fontWeight: '600', color: COLORS.black, }, })
This is my source code can you please edit this to make it work for me that will be good!
The current version of this package highlights the whole otp component when the otp is written completely. This PR fixes that.