Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Registration Form diferent in ios and Android an i0S React Native

$
0
0

I've built an app in Reac Native, but in the registration from I have a problem in iOS.enter image description here

The options are aout of the selector, I don't know wich is the problem.This is my code:

import i18n from "i18n-js";import {FontAwesome5} from "@expo/vector-icons";import React, {useReducer, useEffect, useRef} from "react";import {  View,  Text,  ActivityIndicator,  TouchableHighlight,  StyleSheet,  ScrollView,} from "react-native";import {Form, FormComponent} from "../components/form";import type {FormData} from "../components/form/types";import UserModel from "../models/UserModel";const reducer = (state, action) => {  switch (action.type) {    case "LOADING":      return {...state, loading: true, ready: false};    case "FAILED":      return {...state, failed: true, loading: false};    case "SUCCESS":      return {...state, failed: false, success: true, loading: false};    case "READY":      return {...state, success: false, failed: false, ready: true};  }};const initState = {  loading: false,  failed: false,  success: false,  ready: true,};export default function RegisterScreen(props) {  const {navigation} = props;  const [state, dispatch] = useReducer(reducer, initState);  const formRef = useRef(    new Form([      {        name: "name",        label: i18n.t("Username"),        required: true,        group: 1,        type: "txt",        validatation: (value, setError) => {          // eslint-disable-next-line no-useless-escape          if (!value.match(/^(?=.{3,20}$)[a-zA-Z0-9_\-]+$/gm)) {            setError(              `${i18n.t("Username needs to be between 3 to 20 characters long",              )}.${i18n.t(" and can only contains: alphabits, digits, _ and -",              )}`,            );            return false;          }          return true;        },      },      {        name: "mail",        label: i18n.t("Email"),        required: true,        group: 1,        type: "txt",        validatation: (value, errorMessage) => {          if (            // eslint-disable-next-line no-useless-escape            value.match(/^[a-zA-Z0-9._\-]+@[a-zA-Z0-9_\-]+\.[a-zA-Z0-9.]+$/)          ) {            return true;          }          errorMessage(i18n.t("Invalid Email Address"));          return false;        },      },      {        name: "pass",        label: i18n.t("Password"),        required: true,        group: 1,        type: "txt",        isSecurityText: true,        validatation: (value, errorMessage) => {          if (!value.match(/^.{6,}$/)) {            errorMessage(i18n.t("Password should be atleast 6 characters"));            return false;          }          return true;        },      },      {        name: "field_nombre",        label: i18n.t("First Name"),        group: 2,        required: true,        type: "txt",      },      {        name: "field_apellidos",        label: i18n.t("Surname"),        group: 2,        required: true,        type: "txt",      },      {        name: "field_perfil_de_usuario",        label: i18n.t("User Profile"),        group: 3,        type: "select",        required: true,        items: [          {label: i18n.t("Resident"), value: "residente"},          {label: i18n.t("Tourist"), value: "turista"},        ],        value: "residente",      },      {        name: "field_rango_de_edades",        label: i18n.t("Age Range"),        group: 3,        type: "select",        required: true,        items: [          {label: "0-20", value: "edad1"},          {label: "21-30", value: "edad2"},          {label: "31-40", value: "edad3"},          {label: "41-50", value: "edad4"},          {label: "51-60", value: "edad5"},          {label: "61-70", value: "edad6"},          {label: "71-80", value: "edad7"},          {label: "81+", value: "edad8"},        ],        value: "edad1",      },      {        name: "field_tipo_de_usuario",        label: i18n.t("User Type"),        group: 3,        type: "select",        required: true,        items: [          {label: i18n.t("Friends"), value: "amigos"},          {label: i18n.t("Family"), value: "familia"},          {label: i18n.t("Individual"), value: "individual"},          {label: i18n.t("Partner"), value: "pareja"},        ],        value: "amigos",      },      {        name: "field_tipo_de_viaje",        label: i18n.t("Trip Type"),        group: 3,        type: "select",        required: true,        items: [          {label: i18n.t("Culture"), value: "cultura"},          {label: i18n.t("Gastronomic"), value: "gastronomico"},          {label: i18n.t("Business"), value: "negocios"},        ],        value: "cultura",      },    ]),  );  useEffect(() => {    navigation.setOptions({      headerShown: true,      headerTitle: i18n.t("Register"),      headerStyle: {        backgroundColor: "#fff",        elevation: 0,        shadowOpacity: 0,        borderBottomWidth: 0,        paddingHorizontal: 10,      },      headerTitleAlign: "center",      headerTintColor: "#1a1a1a",      headerTitleStyle: {fontWeight: "bold", fontSize: 17},      headerLeft: function headerLeft() {        return (<TouchableHighlight            style={{padding: 10, borderRadius: 3}}            underlayColor="#e7e7e7"            onPress={() => props.navigation.openDrawer()}><FontAwesome5 name="align-left" size={17} color="black" /></TouchableHighlight>        );      },    });  }, []);  async function handleSubmit(data: FormData) {    // console.log(JSON.stringify(data));    dispatch({type: "LOADING"});    const result = await UserModel.register(data);    if (result) {      dispatch({type: "SUCCESS"});      alert(i18n.t("Thank You!, Your account has been successfully created"));      navigation.navigate("Login");    } else {      dispatch({type: "FAILED"});    }  }  return (<ScrollView showsVerticalScrollIndicator={false}><View style={styles.container}>        {state.ready && (<FormComponent            formInputs={formRef.current.getForm()}            title={i18n.t("Register New User")}            submitText={i18n.t("register")}            onSubmit={handleSubmit}            loading={state.loading}            requiredMessage={i18n.t("Field is Required")}          />        )}        {state.loading && (<View style={{justifyContent: "center"}}><ActivityIndicator color="blue" size="large" /><Text              style={{                marginVertical: 10,                fontSize: 20,                fontWeight: "600",                color: "#ccc",                textAlign: "center",                fontFamily: "Montserrat_400Regular",              }}>              {`${i18n.t("Creating Account, Please Wait")}...`}</Text></View>        )}        {state.success && (<View style={{justifyContent: "center"}}><Text              style={{                marginVertical: 10,                fontSize: 20,                fontWeight: "600",                color: "#ccc",                textAlign: "center",                fontFamily: "Montserrat_400Regular",              }}>              {i18n.t("Account Created Successfully!")}</Text></View>        )}        {state.failed && (<View style={{justifyContent: "center"}}><Text              style={{                marginVertical: 10,                fontSize: 20,                fontWeight: "600",                color: "#ccc",                textAlign: "center",                fontFamily: "Montserrat_400Regular",              }}>              {i18n.t("Account Creation Failed, Please try again later")}</Text></View>        )}</View></ScrollView>  );}const styles = StyleSheet.create({  container: {    paddingHorizontal: "5%",    backgroundColor: "#fbfbfb",    flexGrow: 1,  },});

In android the registration form looks good, but in iOS the items are out of their boxes...I don't know where is the problem, I hope someone could help me.

Thanks.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>