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'}
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;
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" class="ds">$</label><input type="text" id="x">