Answers to: Convert the image to React Native Screen

WRKAIAnswers

WRKAI

AI Tools

Files

Pricing

Design to Code

Convert the image to React Native Screen

Asked on 11/25/2025, 3 pageviews

Converted Designs

import React, { useRef, useState } from 'react';
import {
  SafeAreaView,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

const VerifyOtpScreen = () => {
  const inputRefs = [
    useRef(null),
    useRef(null),
    useRef(null),
    useRef(null),
    useRef(null),
    useRef(null),
  ];
  const [otp, setOtp] = useState(['', '', '', '', '', '']);

const handleKeyPress = (idx) => ({ nativeEvent }) => {
    if (nativeEvent.key === 'Backspace' && otp[idx] === '' && idx > 0) {
      inputRefs[idx - 1].current && inputRefs[idx - 1].current.focus();
    }
  };

return (
    <SafeAreaView style={styles.container}>
      <View style={styles.topBar}>
        <TouchableOpacity style={styles.backBtn} onPress={() => {}}>
          <Text style={styles.backText}>‹</Text>
        </TouchableOpacity>
      </View>

<Text style={styles.title}>Verify OTP</Text>
      <Text style={styles.subtitle}>Please Enter the OTP Sent to your Phone.</Text>

<View style={styles.otpRow}>
        {otp.map((val, i) => (
          <TextInput
            key={i}
            ref={inputRefs[i]}
            style={styles.otpBox}
            keyboardType="number-pad"
            maxLength={1}
            value={val}
            onChangeText={(text) => onChangeText(text, i)}
            onKeyPress={handleKeyPress(i)}
            returnKeyType="done"
            textAlign="center"
          />
        ))}
      </View>

<View style={styles.bottomBar}>
        <TouchableOpacity style={styles.btnGrey} onPress={() => {}}>
          <Text style={styles.btnGreyText}>Resend OTP (22s)</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.btnRed} onPress={() => {}}>
          <Text style={styles.btnRedText}>Verify OTP</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default VerifyOtpScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  topBar: {
    height: 44,
    justifyContent: 'center',
    paddingHorizontal: 12,
  },
  backBtn: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backText: {
    fontSize: 28,
    color: '#111',
  },
  title: {
    fontSize: 32,
    fontWeight: '700',
    marginTop: 6,
    marginHorizontal: 16,
    color: '#111',
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginHorizontal: 16,
    marginTop: 6,
  },
  otpRow: {
    marginTop: 18,
    marginHorizontal: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  otpBox: {
    width: 54,
    height: 54,
    borderRadius: 8,
    backgroundColor: '#f2f2f2',
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 22,
    color: '#000',
  },
  bottomSpacer: {
    flex: 1,
  },
  bottomBar: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingVertical: 12,
    alignItems: 'center',
    justifyContent: 'space-between',
    // keep above safe area on devices with home indicator
    borderTopWidth: 0,
  },
  btnGrey: {
    flex: 1,
    height: 56,
    backgroundColor: '#d0d0d0',
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  btnGreyText: {
    color: '#fff',
    fontWeight: '600',
  },
  btnRed: {
    flex: 1,
    height: 56,
    backgroundColor: '#e53935',
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnRedText: {
    color: '#fff',
    fontWeight: '600',
  },
});

by GPT-5 Nano

Converted Designs

Request another