I have problem when trying to submit data from the TextInput component. When trying to press the button that invoke the callback that handle the text, there is a need to press it twice for it to work. Once for the TextInput lose its focus and the second time to invoke the callback.
I tried this solution but it didnt worked for me.
COMPONENT:
<Modal>
<ScrollView>
<Card>
<CardImage source={{uri: this.props.linkImage}}/>
<CardContent/>
</Card>
{
this.state.single.map((comment) => {
return comment[3] ?
<Comp/> : null
})
}
</ScrollView>
<KeyboardAvoidingView behavior="padding" enabled>
<CardAction>
<TouchableOpacity>
<IconFA name="reply"/>
</TouchableOpacity>
<TouchableOpacity>
<IconEn name="thumbs-up"/>
</TouchableOpacity>
<TouchableOpacity>
<IconEn name="thumbs-down"/>
</TouchableOpacity>
</CardAction>
<CardAction>
<TextInput ref={input => this.input = input}/>
<TouchableOpacity>
<IconFA name="rocket"/>
</TouchableOpacity>
</CardAction>
</KeyboardAvoidingView>
</Modal>
Just pass keyboardShouldPersistTaps="always" prop to ScrollView wrapping your component like this:
<ScrollView keyboardShouldPersistTaps="always">
...content
<ScrollView>
Related
I am trying to make visible list of buttons on top of a multi-line text input, which is now working. But when i am clicking on one of these button nothing is happening.
I am using zIndex to bring the childComponent on top of TextInput, Now when i am clicking on these button TextInput is getting focus instead of triggering button click event.
I just started learning react-native so I am not able to understand where i need to make the changes for making it functional.
Sample Code structure given below:*
const Component_1=()=>{
const UpdateTextInput=(ip,callType)=>{
console.log(ip);
}
return (<View keyboardShouldPersistTaps={'handle'}>
<View style={{flexDirection:'row',backgroundColor:'#fff',zIndex:10}}>
<ChildComponent callBackFunc={(ip,callType)=>UpdateTextInput(ip,callType)} />
</View>
<View>
<TextInput
multiline
onChangeText={(text)=>updateString(text,'')}
/>
</View>
</View>
)
}
export default Component_1;
const ChildComponent=({callBackFunc})=>{
const [ButtonSection,SetButtonSection]=useState(false)
return (
<View style={{flexDirection:'row-reverse'}}>
<View style={{flexDirection:'column',width:'15%',position:'absolute'}} >
<TouchableOpacity onPress={()=>SetButtonSection(!ButtonSection)} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='arrow-drop-down'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:20,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
{ButtonSection==true
?<View style={{flexDirection:'column',position:'relative',backgroundColor:'#ccc'}}>
<TouchableOpacity onPress={()=>callBackFunc('','CLR')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='block'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','COPY')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='content-copy'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','SAVE')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='save'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<Button title='BTN' onPress={()=>console.log('Button1')
}/>
</View>
:null
}
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps={'handle'} style={{marginRight:50}}>
<Item/>
</ScrollView>
</View>
)
}
export default ChildComponent
Instead of using zIndex, use absolute position in view.
position: 'absolute'
Give absolute position to the view of child component
I imported {TouchableNativeFeedback} from 'react-native'
In the render() function I am trying to use TouchableNativeFeedback; however, the function onpress is triggered only when the app reloads. When pressing the TouchableNativeFeedback the onpress function is not triggered. What's the problem? How can I have a TouchableNativeFeedback with onpress function working?
<View style={style.gameBody}>
{this.state.isMystery=='false'?
<View style={style.drinkBody}>
{/* BEER LOGO AND BEER COUNTER */}
<TouchableNativeFeedback style={style.beerText} onpress={console.log('this got preseed')}>
<View style={style.beerText}>
<Image
source={require('../img/beer.png')}
style={style.beerStyling}/>
<Feather style={style.beerCountXStyle} name='x'/>
<Text style={style.beerDrinkCounterStyle}>
{this.state.round1Drink[this.state.gameNum]}
</Text>
{/* Line Stlye */}
<Image
source={require('../img/line.png')}
style={style.lineStyle}/>
</View>
</TouchableNativeFeedback>
{/* BEER TEXT/CARD SCREEN HERE */}
<Text style={style.drinkText}
onPress={() => RandomChooseRound1()} // add this.startAnimation here
>
</Text>
</View>
: null
}
The onpress function in Works; however, the onpress function doesn not work for
<Text style={style.drinkText} onPress={() => RandomChooseRound1()}
When pressing on the text, the onpress function works.
Please Help! Thank you!
I think you're missing a 'this'.
<Text style={style.drinkText} onPress={() => this.RandomChooseRound1()}>
I have the following TextInput,
<TextInput
style={[
styles.inputField,
isEmailError && { borderColor: color.delete },
]}
placeholder={'E-mail'}
placeholderTextColor={color[colorScheme].textMuted}
autoCapitalize={'none'}
autoCorrect={false}
value={userCredentials.email}
onChangeText={onChangeEmail}
onSubmitEditing={passwordInput.current && passwordInput.current.focus}
blurOnSubmit={false}
returnKeyType={'next'}
keyboardType="email-address"
/>
When I click anywhere else outside the keyboard(let's say a button), the expected behaviour is that the button will get clicked, however, in here, first click always closes the keyboard then I have to press again for whatever element i was trying to reach.
This is because of scroll view. Add props keyboardShouldPersistTaps in your scrollview as below to solve error :
<ScrollView
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
>
...
...
</ScrollView>
You can find more detail here
Maybe try this:
import DismissKeyboard from 'dismissKeyboard';
<TouchableWithoutFeedback onPress={()=>{DismissKeyboard()}}>
<View style={Styles.container}>
<TextInput />
</View>
</TouchableWithoutFeedback>
I have created an autoconplete search field which displays the places using mapbox API. I am using the ListView for sugesstions list. when list appears and I tap on the address i need to select, on the first tap keyboard hides and onPress works in the second tap.
I am trying to figure out what's wrong.
<View style={styles.container}>
<View style={styles.searchContainer}>
<View style={styles.mapMarkerContainer}>
{mapMarkerIcon}
</View>
<View style={styles.inputContainer}>
<TextInput
style={styles.textinput}
onChangeText={this.searchLocation}
placeholder="Type your address here"
underlineColorAndroid='rgba(0,0,0,0)'
value={this.state.inputVal}
placeholderTextColor="#fff"
/>
</View>
</View>
<View keyboardShouldPersistTaps='always' style={styles.listViewContainer}>
<ListView
dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
renderRow={this.renderAdress}
style={styles.listView}
renderSeparator={this.renderSeparator}
enableEmptySections
/>
</View>
</View>
renderAddress
renderAdress = (address) => {
return (
<TouchableOpacity onPress={() => this.onListItemClicked(address)} style={styles.listItem}>
<View>
<Text>{address.place_name}</Text>
</View>
</TouchableOpacity>
);
};
onListItemClicked
onListItemClicked= (address) => {
this.props.onAddressGet(address);
console.log(address);
this.setState({
searchedAdresses: [],
inputVal: address.place_name
});
}
You should move the keyboardShouldPersistTaps-property to the ListView as it is a property from ScrollView and will be inherited to ListView:
Instead of
<View keyboardShouldPersistTaps='always'
<ScrollView ...>
You need:
<View
<ScrollView keyboardShouldPersistTaps='always' ...>
https://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps
I am developing an App using react native. I want to pass a parameter to a function in my flatlist for a specific record. But, the flat list ignore this line of code:
onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
Here is my code:
<FlatList
ItemSeparatorComponent={ () => <View style={ styles.rowSep } /> }
horizontal={false}
data={this.state.result}
renderItem={
({item}) => (
<View style={styles.containerrow}>
<View style={styles.viewPark}>
<Text style={styles.itemBold}> {I18n.t('Data_e_ora_inizio')}:
<Text style={styles.itemNormal}>{item.start}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Data_e_ora_termine')}:
<Text style={styles.itemNormal}>{item.end}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Energia')}: <Text style={styles.itemNormal}>{item.energy_delivered}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Colonna')}: <Text style={styles.itemNormal}>{item.column_id}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Costo_della_ricarica')}:
<Text style={styles.itemNormal}>€ {item.amount}</Text></Text>
<Text style={styles.itemBold}> {I18n.t('Aggiornamento_del')}:
<Text style={styles.itemNormal}>{item.last_update}</Text></Text>
</View>
<View style={styles.rowCenter}>
<Button label={I18n.t('Via_questa_ricarica')} color={defStyleValues.RechargeElectricCar} onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
</View>
</View>
)
}
keyExtractor={item => item.id}
/>
Also here is my function:
onPressTopUp(columnID){
console.log("TEST2, ", columnID);
}
In other words, My problem is that I need to pass columnID of each specific row to the onPressTopUp(columnID) function in the FlatList. I checked the console log, even it dose't show both TEST1 and TEST2. Can you help me to do that?
Just use Arrow Function , it will take care of binding.
your function is :-
onPressTopUp(columnID){
console.log("TEST2, ", columnID);
}
Replace with Arrow Function :- and it will work for you.
onPressTopUp = (columnID) => {
console.log("Test, ", columnID);
}
and change your label Property with title inside your Button
You can use Button like this below :-
import { Button } from 'react-native';
...
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
I think the problem is you had not bind the onPressToUp function, try this:
onPressTopUp = (columnID) => {
console.log("Test, ", columnID);
}
Is Button component imported from React Native? Because react native Button component doesn't have label property.
Did you try call function with column id like this this.onPressTopUp(15).
Hope this help.