react native text input

Question

I have a component

export default function AppTextInput({icon, placeholder,onChangeText, ...otherProps}) {

  const  onChanged =(text) =>{
      let newText = '';
      let numbers = '0123456789';
      for (var i=0; i < text.length; i++) {

              if (numbers.indexOf(text[i]) > -1) {
                  newText = newText + text[i];
              } else {
                  alert("please enter integer numbers only");

              }
      }

    }

    return (

        <View style={styles.container}>
            {icon &&
                <MaterialCommunityIcons style={{marginRight: 10}} name={icon} color={colors.grayMedium} size={20}/>}
            <TextInput style={defaultStyles.text} placeholder={placeholder}
                       onChangeText={(text)=> onChanged(text)}  maxLength={3} {...otherProps}
            ></TextInput>
        </View>
    )
}

and use of component

<View style={{top: -80}}>
    <AppTextInput icon="timer-sand"  placeholder={"Prep Time"} keyboardType='numeric' onChangeText={(text) => setPrepTime(text)}/>
    <AppTextInput icon="timer" placeholder={"Round Duration"} keyboardType='number-pad' onChangeText={(text) => setRoundDuration(text)}/>
    <AppTextInput icon="timer" placeholder={"Break Duration"} keyboardType='number-pad' onChangeText={(text) => setBreakDuration(text)}/>
    <AppTextInput icon="repeat" placeholder={"Number of Rounds"} keyboardType='number-pad'  onChangeText={(text) => setNumRounds(text)}/>
    <AppTextInput icon="format-list-numbered" placeholder={"Number of Sets"} keyboardType='number-pad' onChangeText={(text) => setNumSets(text)}/>
    {exerciseInputEles}
</View>

but when i input values ,alert vorks,but onChangeText={(text) => setNumSets(text)} and other don't see my input, why

what should i change that alert work and all onChangeText={(text) => setNumSets(text)} next input see my input?

i don't now what to try more to fix this or create current input

Jatin Bhuva · Accepted Answer · 2022-12-13 06:25:09Z

1

Do it this way:

   <AppTextInput icon="timer-sand"  placeholder={"Prep Time"} keyboardType='numeric' setPrepTime={setPrepTime}/>

and in appTextInput modify as below:

export default function AppTextInput({icon, placeholder,onChangeText,setPrepTime ...otherProps}) {



const  onChanged =(text) =>{
      let newText = '';
      let numbers = '0123456789';
      for (var i=0; i < text.length; i++) {

              if (numbers.indexOf(text[i]) > -1) {
                  newText = newText + text[i];
                  setPrepTime(newText)
              } else {
                  alert("please enter integer numbers only");

              }
      }

    }

    return (

        <View style={styles.container}>
            {icon &&
                <MaterialCommunityIcons style={{marginRight: 10}} name={icon} color={colors.grayMedium} size={20}/>}
            <TextInput style={defaultStyles.text} placeholder={placeholder}
                       onChangeText={(text)=> onChanged(text)}  maxLength={3} {...otherProps}
            ></TextInput>
        </View>
    )
}

answered Dec 13, 2022 at 6:25

Jatin Bhuva

1,9361 gold badge7 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

akame Over a year ago

after entering the last number, a list of exercises equal to this number should open, but it does not open with this solution

akame Over a year ago

if i delete onchangetext ,setpreptime and <AppTextInput icon="timer-sand" placeholder={"Prep Time"} keyboardType='numeric' onChangeText={(text) => setPrepTime(text)}/> use that it open but current input don't work

Jatin Bhuva Over a year ago

what do you mean can you clarify?

akame Over a year ago

it's hard to explain, mb we can meet in telegram and you will see all my project?

akame Over a year ago

github.com/jcolla-holla/TabataTimer

|

Bhavya Koshiya · Accepted Answer · 2022-12-13 07:34:55Z

Make this changes

component

    export default function AppTextInput({icon, placeholder,onChangeText, ...otherProps}) {
    
      const  onChanged =(text) =>{
          let newText = '';
          let numbers = '0123456789';
          for (var i=0; i < text.length; i++) {
    
                  if (numbers.indexOf(text[i]) > -1) {
                      newText = newText + text[i];
                      onChangeText(text)
                  } else {
                      alert("please enter integer numbers only");
    
                  }
          }
    
        }
    
        return (
    
            <View style={styles.container}>
                {icon &&
                    <MaterialCommunityIcons style={{marginRight: 10}} name={icon} color={colors.grayMedium} size={20}/>}
                <TextInput style={defaultStyles.text} placeholder={placeholder}
                           onChangeText={onChanged}  maxLength={3} {...otherProps}
                />
            </View>
        )
    }

Use: add your state variable in the value tag I've added possible guess of name that you might have but it's not you can change it to your respective state name

<View style={{top: -80}}>
    <AppTextInput icon="timer-sand"  placeholder={"Prep Time"} keyboardType='numeric' value={prepTime} onChangeText={setPrepTime}/>
    <AppTextInput icon="timer" placeholder={"Round Duration"} keyboardType='number-pad' value={roundDuration} onChangeText={setRoundDuration}/>
    <AppTextInput icon="timer" placeholder={"Break Duration"} keyboardType='number-pad' value={breakDuration} onChangeText={setBreakDuration}/>
    <AppTextInput icon="repeat" placeholder={"Number of Rounds"} keyboardType='number-pad'  value={numRounds} onChangeText={setNumRounds}/>
    <AppTextInput icon="format-list-numbered" placeholder={"Number of Sets"} keyboardType='number-pad' value={numSets} onChangeText={setNumSets}/>
    {exerciseInputEles}
</View>

Can you help me to do that , after alert , full clear text edit

Collectives™ on Stack Overflow

react native text input

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related