Question 227489 in React native Question posted in
The official React Native documentation can be found here.

React native – RelativeLayout error from TextInput and launch_screen file

The error message that the debugger gives me:
enter image description here

This would be the component that is throwing me the error. Specifically it is the TextInput. I tried to remove it from the component and the error disappeared.

import { Formik } from "formik";
import { Button, TextInput, View } from 'react-native';
import { FormValues } from "./types";
import Box from "../../../../components/Box";

const Form = (): JSX.Element => {

    const initialValues: FormValues = {
        first_name: "",
        last_name: "",
        email: "",
        password: "",
        github_profile: "",
        linkedin_profile: ""
    }

    const onSubmit = () => {
        // handle submit
    }



    return (
        <Box style={{flex: 1, backgroundColor: 'black'}}>
            <Formik
            initialValues={initialValues}
            onSubmit={onSubmit}
        >
            {({ handleChange, handleBlur, handleSubmit, values }) => (
            <View>
                <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
                />
                <Button onPress={() => handleSubmit()} title="Submit" />
            </View>
            )}
        </Formik>
        </Box>
        
    )
}

export default Form;

This would be my launch_screen file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>
Tags:

2

Answers


  1. 0

    What’s your react native version?

    And can you add

    import React from 'react';

    to your dependencies

    edit

    This would be my launch_screen file:

    This doesn’t make any sense from my perspective 😅. You don’t need to write XML. If you want to write specific platform code there is a guide for that https://reactnative.dev/docs/platform-specific-code

    Login or Signup to reply.
  2. 0

    I also faced this error. In my case, it was happening because I was pointing to an XML file in my styles.xml.

    styles.xml file:

    <resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->

    <!-- This line was creating the issue. So, I comment it. -->
    <!-- <item name="android:editTextBackground">@layout/launch_screen</item> -->
    
    <item name="android:windowBackground">@drawable/coldscreen</item>

    <item name="android:statusBarColor">
        @android:color/transparent
    </item>

</style>

    After commenting it, I cleaned the project from android studio, deleted the app from my mobile device and again ran the project in Visual Code.

    launch_screen.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/screen"
    android:scaleType="centerCrop"
    android:contentDescription="@string/todo" />
</RelativeLayout>

    My sign-up screen where the error occurs when I use TextInput. I show you my return function. After commenting that line, my app is working fine. I hope this might be helpful for you.

    SignUp.tsx

    <View style={styles.mainContainer}>
  <Text style={styles.Heading}>SignUp</Text>

  <View>
    <TextInput
        value='sadas' 
        placeholder='Enter email...'
        placeholderTextColor={'lightgray'}
        style={{backgroundColor: 'red', borderRadius: 10, borderWidth: 1}}
    />
  </View>

</View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search