Hey guys I'm facing a problem in scroll over TextInput in android.
In iOS everything working fine and when I use multiline={true}
it takes extra new line when go to next line.
How do I fix it? Here is my code:
<TextInput
placeholder='last name'
multiline={Platform.OS === 'ios'? false: true}
underlineColorAndroid='transparent'
scrollEnabled={Platform.OS === 'ios'? false: true}
blurOnSubmit = {Platform.OS === 'ios'? true: false}
numberOfLines={1}
style={[styles.formwelcome,]}
onChangeText={(text) => this.setState({lastname: text})}
autoGrow={ false }
ref='lastname'
returnKeyType='next'
onSubmitEditing={(event) => {this.refs.address.focus();}}/>
Add keyboardShouldPersistTaps="always" this property inside your ScrollView
So your ScrollView will look like
<ScrollView
keyboardShouldPersistTaps="always">
.....
</ScrollView>
Related
I already researched similar questions on the topic, so please don't be in a hurry to close this question.
I have a search screen, where I type a search term and I fetch listed results. Once fetched, I want to tap on any one of them and navigate to that page details object. My initial first tap is never been detected, but my second is. My component:
return (
<View>
<TextInput
value={query}
placeholder="Type Here..."
onChangeText={(search) => setQuery(search)}
/>
{fetching ? (
<Spinner
visible={fetching}
textContent={'Fetching data...'}
textStyle={{ fontSize: 14 }}
/>
) : null}
{items ? (
<ScrollView keyboardShouldPersistTaps={true}>
<FlatList
numColumns={1}
horizontal={false}
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() =>
navigation.navigate('Item Details', { id: item.id })
}>
<ItemDisplay item={item} keyboardShouldPersistTaps="always" />
</TouchableOpacity>
)}
/>
</ScrollView>
) : null}
</View>
);
My ItemDisplay is just a row of item's photo and item's id. Nothing fancy.
As suggested on the similar questions, I do use <ScrollView keyboardShouldPersistTaps={true}> and <ItemDisplay item={item} keyboardShouldPersistTaps="always" /> However it doesn't help m, I still need to tap twice. Any ideas on how do I fix this? I am testing it on android, if that matters.
I also tried <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps={"always"} > but this doesnt help as well.
If I understood your problem correctly, you are facing an issue clicking an item when the Keyboard is present.
If so you can simply pass keyboardShouldPersistTaps as always to your FlatList and then the children of the list will receive taps when an item is pressed.
Also, you shouldn't be using a ScrollView to wrap your Flatlist, if they are both having the same orientation, numColumns isn't required as you have passed it as 1
You can read more about keyboardShouldPersistTaps at https://reactnative.dev/docs/0.64/scrollview#keyboardshouldpersisttaps
Take a look at this Live Snack to see it in action.
I have country codes from a file, I render it like that,
it returns all country names and codes perfectly.
<TouchableOpacity
style={st.oneCode}
onPress={selectItem}>
<View
style={[
st.filterCheckMarkWrapper,
check === false &&
st.filterCheckmarkInactiveColor,
]}>
{check === true && (
<View style={st.filterCheckmark} />
)}
</View><Text style={st.CodeText}>
{item.countryName}: +{item.phoneCode}
</Text>
</TouchableOpacity>
but when check is true, all of the text are checked, how can i fix it?
Instead of using check variable/state, you can either add a checklist or checked property in the Country object.
Note: I'll only explain the second one.
So, you have to add checked property to your Country object.
Then your source will be:
<TouchableOpacity
style={st.oneCode}
onPress={selectItem}>
<View
style={[
st.filterCheckMarkWrapper,
item.checked === false &&
st.filterCheckmarkInactiveColor,
]}>
{item.checked === true && (
<View style={st.filterCheckmark} />
)}
</View><Text style={st.CodeText}>
{item.countryName}: +{item.phoneCode}
</Text>
</TouchableOpacity>
And inside your onPress event you have to toggle the checked property.
E.g:
function selectItem(item: Country) {
item.checked = !item.checked;
//your other works
}
I'm working on an app which the users will enter large number of records continously. App functionalities are completed but the performance is bit slow in low end mobiles. As i'm new to react native i've not much idea on this. But when i googled reagrding this issue it has been noticed that when the state changes the whole app get rerenders. So for reducing the state changes i want to know how to use TextInput without using state . Because in my TextInput by using onChangeText the state is updating in every keypress.
This is a demo snack of the project Demo
<View style={styles.fixedform}>
<View style={styles.textinputViewleft}>
<TextInput
style={styles.textinput}
ref={firstref}
label="Digit"
returnKeyType="next"
value={digit.value}
onChangeText={(text) => { setDigit({ value: text, error: '' }); if (text.length === 3) { ref.current.focus(); } }}
error={!!digit.error}
errorText={digit.error}
keyboardType="numeric"
maxLength={3}
minLength={3}/>
</View>
<View style={styles.textinputView}>
<TextInput
style={styles.textinput}
ref={ref}
label="Count"
value={count.value}
onChangeText={(text) => setCount({ value: text, error: '' })}
error={!!count.error}
errorText={count.error}
keyboardType="numeric"
maxLength={3}/>
</View>
<View style={styles.textinputView}>
<Button loading={loading} disabled={disabled} style={styles.buttonView} mode="contained" onPress={onSubmitPress}>Submit</Button>
</View>
</View>
Try this way, It will not rerender on text change and hold the value on key press like
<TextInput
...
value={digit.value} // remove this
onChangeText={(text) => digit.value = text };
...
/>
To clear value, try one of this
1- firstref.current.clear();
2- firstref.current.setNativeProps({ text: '' });
3- firstref.current.value = '';
Can Any One Help Me with This Problem Actually I Am New To React Native I have tried a couple of ways to overcome this problem but nothing worked out please help me with this I don't want the keyboard to interfere with the overlay
<View style={{height:"9%"}}>
<Button title="Add A New ToDO" onPress={this.onPressOpenOverLay} buttonStyle={{height:"100%",borderBottomLeftRadius:30,borderBottomRightRadius:30}}/>
<Overlay isVisible={this.state.setVisible}
onBackdropPress={this.onPressCloseOverLay}
animationType="fade"
overlayStyle={{height:"70%",width:"90%",borderRadius:20,alignItems:"center",paddingTop:"15%"}}>
<Text style={{fontSize:19,color:"#0288D1",fontWeight:"bold"}}>Add A New ToDo</Text>
<TextInput style={styles.input}
placeholder="Email ID"
autoCapitalize="none"
underlineColorAndroid="transparent"
onChangeText={email => this.setState({ email })}
value={this.state.email}
>
</TextInput>
</Overlay>
</View>
<FlatList
style={{marginTop:"2%"}}
data={this.state.data}
renderItem={this._renderMyList}
keyExtractor={(item, index) => index.toString()}
bounces={true}
/>
</SafeAreaView>
)
}
}
If you set your width or height with percentage, then it is prone to change when some changes in UI layout like a keyboard appearing happens. so you need to give them pixel values.
Moreover, you could use the import {Dimension} from 'react-native' to give you the width and height of the device and then calculate the percentage of those values and give them to your view.
I am using checkbox from react-native-element
When i check the box it dose not display checked
how can i display it ?
here is my code
<View>
<FlatList data={all_national_number}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) =>
<CheckBox
title={item}
uncheckedIcon={<Image source={require('../../assets/unchecked.png')} />}
checkedIcon={<Image source={require('../../assets/checked.jpg')} />}
onPress={() => this._onSelect(item)}>
</CheckBox>
}>
</FlatList>
</View>
It is not showing because you are missing a property called checked which should be either true or false. So, ideally your method this._onSelect(item)} should contain logic to alter the checked status.
Something on the lines of
onSelect = (item) => {
this.setState({ isChecked: true})
}
and in your checkbox, you need to add one more prop that is checked={this.state.isChecked}
Hope it helps :)
You need to add the checked property on the checkbox
<CheckBox
title='Click Here'
checked={this.state.checked}
/>