Home > Enterprise >  I Want to retain the placeholder on left side while typing any kind of text in TextInput Field in Re
I Want to retain the placeholder on left side while typing any kind of text in TextInput Field in Re

Time:01-28

Here is my code...please check the code and guide me....what i have to do for that

            <Input
            containerStyle={tailwind('mt-4')}
            label="Item Price"
            labelStyle={{fontWeight: '800'}}
            theme="secondary"
            keyboardType={'numeric'}
            type="underline"
            placeholder="$"
            clear={true}
            onBlur={onBlur}
            value={price}
            onChangeText={text => setPrice(text)}
            errorMessage={
              !/\d ((,\d ) )?(.\d )?(.\d )?(,\d )?/.test(price) && price
                ? 'Invalid Price'
                : null
            }
          /> 
        )}
        name={'price'}

CodePudding user response:

You can do something like

import React, { useState } from "react";
import { Text, TextInput, View } from "react-native";

const App = () => {
  const [text, setText] = useState("");
  return (
    <View style={{ flexDirection: "row", borderWidth: 1, borderColor: "red" }}>
      {text.length > 0 && <Text style={{ color: "grey" }}>$</Text>}
      <TextInput
        style={{ color: "grey" }}
        placeholder="Type here to translate!"
        onChangeText={(newText) => setText(newText)}
        defaultValue={text}
      />
    </View>
  );
};

export default App;

CodePudding user response:

If you want the text to be in the input all the time you either have to put it in the value and force it to be there. OR you have to use another element and position it over the input.

.ds { 
  position: absolute;
  margin-left: .6em;
  font-size: .8em;
  line-height: 1.5em;
}

.ds   input {
   padding-left: 1em;
}
<label for="x" >$</label><input type="text" id="x">

  •  Tags:  
  • Related