whenever i click an option i want textinput to get cleared
i have tried implementing clearbuttonmod but it doesn't work
<View>
<RadioButton.Group
onValueChange={(value) => setValue(value)}
value={value}
>
<RadioButton.Item label="Hate speech" value="Hate speech" />
<RadioButton.Item
label="I just don't like it"
value="I just don't like it"
/>
</RadioButton.Group>
<Text
value=""
style={{
padding: "3%",
fontSize: 18,
}}
>
Others
</Text>
<TextInput
style={styles.input}
clearButtonMode="always"
placeholder="Report..."
onChangeText={(value) => setValue(value)}
/>
on the top, import useRef
import {useRef} from "react";
create a ref variable and use it in TextInput
const InputRef = useRef();
then in TextInput
<TextInput
style={styles.input}
ref={InputRef}
clearButtonMode="always"
placeholder="Report..."
onChangeText={(value) => setValue(value)}
/>
adn in RadioButton
<RadioButton.Group
onValueChange={(value) => {
setValue(value)
InputRef.current.clear()
}}
value={value}
>
Working Example Here
Related
I have encountered a problem: How can I set the custom id for the document in the firestore database, as whenever I create a new user firestore is assigning it a random which I cannot figure out.
import * as React from "react";
import {
Datagrid,
List,
Show,
Create,
Edit,
Filter,
SimpleShowLayout,
SimpleForm,
TextField,
TextInput,
ShowButton,
EditButton,
DeleteButton,
} from "react-admin";
import {getAuth} from 'firebase/auth'
const UserFilter = (props) => (
<Filter {...props}>
<TextInput label="Search" source="id_number" alwaysOn />
</Filter>
);
export const UserList = (props) => (
<List {...props} filters={<UserFilter />}>
<Datagrid>
<TextField source="id_number" />
<TextField source="first_name" />
<TextField source="last_name" />
<TextField source="phone" />
<TextField source="user_type" />
<TextField source="email" />
<TextField source="is_active" />
<ShowButton label="" />
<EditButton label="" />
<DeleteButton label="" redirect={false}/>
</Datagrid>
</List>
);
export const UserShow = (props) => (
<Show {...props}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="first_name" />
<TextField source="user_type" />
<TextField source="email" />
</SimpleShowLayout>
</Show>
);
export const UserCreate = (props) => (
<Create {...props} >
<SimpleForm>
<TextInput source="id_number" />
<TextInput source="first_name" />
<TextInput source="last_name" />
<TextInput source="address" />
<TextInput source="is_active" />
<TextInput source="email" />
<TextInput source="phone" />
<TextInput source="dob" />
<TextInput source="user_type" />
</SimpleForm>
</Create>
);
export const UserEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextInput disabled source="id_number" />
<TextInput source="createdate" />
<TextInput source="lastupdate" />
<TextInput source="first_name" />
<TextInput source="user_type" />
<TextInput source="email" />
</SimpleForm>
</Edit>
);
In the create form component how will I set the custom id for my documents?
Before Creating a user, As its prefilled
Firestore database before adding the user
After adding the user
Whenever I create a user, the user is created with a new unique id that is not accessible by us.
As you can in last a document with different is created
I am working on a react native project. I have a password field on the Login page and I want to add an eye icon on the right end of the input field. My code currently looks like this:
<View><TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password'></TextInput></View>
This is a normal input field with a placeholder text.
Please find the below code:
const [password, setPassword] = useState('');
const [isPasswordSecure, setIsPasswordSecure] = useState(true);
<View style={styles.viewPassword}>
<TextInput
secureTextEntry={isPasswordSecure}
style={styles.textInputStyle}
right={
<TextInput.Icon
name={() => <MaterialCommunityIcons name={isPasswordSecure ? "eye-off" : "eye"} size={28} color={COLORS.black} />} // where <Icon /> is any component from vector-icons or anything else
onPress={() => { isPasswordSecure ? setIsPasswordSecure(false) : setIsPasswordSecure(true) }}
/>
}
fontFamily={FONTS.ROBOTO_REGULAR}
fontSize={Theme.FONT_18PX}
selectionColor={COLORS.orange}
underlineColor={COLORS.orange}
label={StringsConstants.Password}
value={password}
onChangeText={text => setPassword(text)}
underlineColorAndroid="transparent"
theme={{ colors: { text: COLORS.black, primary: COLORS.orange, placeholder: COLORS.black } }}
/>
</View>
I hope it will help you!
you can put it and style it like this
<View>
<TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password' />
<EyeIconOrImage style={{
position: 'absolute',
right: 20,
}} />
</View>
I want to make a Total by adding the Values from TextInput in RN:
Here is my TextInput
<TextInput style={styles.input}
placeholder=" Amount "
placeholderTextColor="#9a73ef"
keyboardType='numeric'
onChangeText={text => setText(text)}
value={text}
/>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
<Picker.Item value='' label='Select Option' />
<Picker.Item label="Food" value="Food" />
<Picker.Item label="Transport" value="Transport" />
<Picker.Item label="Rent" value="Rent" />
<Picker.Item label="Other" value="Other " />
</Picker>
</View>
And TOTALis where i want to put my total Value by adding Value of TextInputs
<Text>TOTAL : </Text>
<Button
title="Save"
color="#841584"
accessibilityLabel="Learn more about this purple button"
onPress={() => {
if (text && selectedValue) setData([...data, { name: text, selectedValue: selectedValue }
])
}} />
<View styles={styles.list}>
<FlatList
data={data}
renderItem={({ item }) => <React.Fragment>
<Text style={styles.item}> {item.name} Dollars to "{item.selectedValue}"</Text>
</React.Fragment>}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
)};
I tried adding them they are Strings , i used to parseInt() but didnt work?
Here is the ScreenShot of my App
declear variable for total Amount like this
const [totalAmount,setTotalAmount] = useState(0)
update totalAmount value on save button
<Button
title="Save"
color="#841584"
accessibilityLabel="Learn more about this purple button"
onPress={() => {
if (text && selectedValue) {
setData([...data, { name: text,
selectedValue: selectedValue }
])
setTotalAmount(totalAmount + parseInt(text))
}
}} />
and use this variable in your html
<Text>TOTAL : {totalAmount}</Text>
no I was talking about this. check here
<View styles={styles.list}>
(data.length > 0)?
<FlatList
data={data}
renderItem={({ item }) => <React.Fragment>
<Text style={styles.item}> {item.name} Dollars to "
{item.selectedValue}"</Text>
</React.Fragment>}
keyExtractor={(item, index) => index.toString()}
/>
: null
</View>
I'm new with react native and I'm building an app with sign in and sign up interfaces, trying to use (this.props.type) to control signings/signup button, but I got an error in my code, hope you guys help me :)
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
TextInput,
TouchableOpacity,
Text
} from 'react-native';
const Form: () => React$Node = () => {
return (
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid= 'rgba(0,0,0,0)'
placeholder= "Phone Number"
autoCorrect={true}
textContentType="telephoneNumber"
keyboardType="numbers-and-punctuation"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid= 'rgba(0,0,0,0)'
placeholder= "Email"
autoCorrect={true}
textContentType="emailAddress"
keyboardType="email-address"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid= 'rgba(0,0,0,0)'
placeholder= "Email Password"
secureTextEntry={true}
placeholderTextColor = "#ffffff"
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>{this.props.type} </Text>
</TouchableOpacity>
</View>
);
};
I also use these to lines in both sign in and sign up files :
<Form types="SignUp"/>
<Form types="SignIn"/>
change Form to receive params
const Form: ({ types }) => React$Node = () => {
then use it like
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>{types} </Text>
</TouchableOpacity>
and render your form
<Form types="SignUp"/>
<Form types="SignIn"/>
Form component without typescript
const Form = ({ types }) => (
<View style={styles.container}>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder="Phone Number"
autoCorrect={true}
textContentType="telephoneNumber"
keyboardType="numbers-and-punctuation"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder="Email"
autoCorrect={true}
textContentType="emailAddress"
keyboardType="email-address"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder="Email Password"
secureTextEntry={true}
placeholderTextColor="#ffffff"
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>{types} </Text>
</TouchableOpacity>
</View>
);
The problem is in your Text you are fetching this.props.type <Text style={styles.buttonText}>{this.props.type} </Text> but you are passing types <Form types="SignUp"/>
So change inside Text to
<Text style={styles.buttonText}>{this.props.types} </Text>
hope it helps
I am trying to write a very simple app to test react native.
I have some TextInput components in a big ScrollView, as a register formulary.
Everything works fine, but when I scroll clicking on a TextInput, it doesn't scroll.
I can only scroll through the page when I click in blank spaces. Any idea of how to do it?
Thanks.
<ScrollView>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
</ScrollView>
I had the same problem and after searching for a while no answer helped me; so I solved it myself by putting a <TouchableWithoutFeedback /> over each <TextInput> and sending the touch event back to the <TextInput />:
<View>
<TextInput ref ={(ref)=>this.textInput = ref}>
<TouchableWithoutFeedback style={{position: 'absolute', top:0, bottom:0, left:0, right:0}}
onPress={()=>this.textInput.focus()}/>
</View>
You can create a custom component which wraps TextInput like that and use them in your ScrollViews.
I had solve the problem like this:
<TouchableOpacity
activeOpacity={1}
style={{ flex: 1 }}
onPress={() => this.textInput.focus()} >
<View
style={{ flex: 1 }}
pointerEvents="none" >
<TextInput
ref={(ref) => this.textInput = ref}
style={{ fontSize: 14, color: '#666666', textAlign: 'right', flex: 1 }}
placeholder={this.props.placeHolder}
defaultValue={this.props.defaultValue ? this.props.defaultValue + '' : ''}
placeholderTextColor='#aaaaaa'
keyboardType={this.props.keyboardType ? this.props.keyboardType : 'default'}
secureTextEntry={this.props.isSecret}
onChangeText={this._onChangeText.bind(this)} />
</View>
</TouchableOpacity>