CODEWITHSUNDEEP
react-nativeinputtext
Justin Eastin
Justin Eastin

Reputation: 21

TextInput won't let me type text inside, only for this particular Text Input

So there are many TextInputs on this app so far, but this has been the only one out of them all that will not allow any text, it just flashes the letters or numbers typed, and immediately deletes. Any idea what could be wrong here?

MyProfile.js

import { View, Text, StyleSheet, ScrollView, Pressable, TextInput} 
from 'react-native'
import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'
const MyProfile = () => {

const [phoneNumber, setPhoneNumber] = useState('');

        <View style={styles.inputContainer}>
            <View>
                <Text style={styles.inputText}>Country</Text>
                <TextInput 
                    placeholder='#'
                    style={styles.countryCode}
                />
            </View>
            <View>
                <Text style={styles.inputText}>Phone Number</Text>
                <TextInput 
                    placeholder='###-###-####'
                    value={phoneNumber}
                    setValue={setPhoneNumber}
                    style={styles.phoneNumber}
                />
            </View>
        </View>

const styles = StyleSheet.create({
inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 30,
},
inputText: {
    fontWeight: 'bold',
    marginBottom: 10
},
countryCode: {
    width: 60,
    height: 40,
    padding: 10,
    backgroundColor: 'white',
    borderRadius: 10
},
phoneNumber: {
    width: 300,
    height: 40,
    padding: 10,
    backgroundColor: 'white',
    borderRadius: 10
},

I can post more information if more is needed. but this should be everything associated with that particular input/screen. Thank you

Upvotes: 0

Views: 147

Answers (1)

Azael Guerrero
Azael Guerrero

Reputation: 26

This happens, because in your TextInput component you have the setValue property, and it doesn't exist, you have to do something like this:

<TextInput 
  placeholder='###-###-####'
  value={phoneNumber}
  onChangeText={(value) => setPhoneNumber(value)}
  style={styles.phoneNumber}
/>

If this solves your problem, I would appreciate an upvote.

Upvotes: 1

Related Questions