tttstudios / react-native-otp-input

Tiny Javascript library which provides an elegant UI for user to input one time passcode.
MIT License
535 stars 241 forks source link

fix: remove dark underlay on otp completion #181

Closed saheem128 closed 2 years ago

saheem128 commented 2 years ago

The current version of this package highlights the whole otp component when the otp is written completely. This PR fixes that.

muhammadwasi81 commented 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 (

Enter your OTP code here { console.log(`Code is ${code}, you are good to go!`) setCode(code) }} /> Didn't receive the OTP? { setCode(code) }}> Resend { console.log(code) verifyOtp({ variables: { phone_no: '03203406131', otp: code } }) .then(data => { console.log('data', data) if (data?.data?.verifyOtp?.isNewUser == 0) { navigation.navigate('main') } else { navigation.navigate('signUp') } }) .catch(error => console.log(error)) }} />

) } // 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!