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()}>
Related
I have an old issue with scrolling some content inside TouchableOpacity (react-native). I've been trying to find any solution for months but nothing worked together with onPress/onPressIn/Out handlers. Any ideas?
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
<ScrollView>
{/* some content to be scrolled here */}
</ScrollView>
</TouchableOpacity>
use TouchableOpacity inside the Scrollview
<ScrollView>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
</ScrollView>
I am new with reactjs and I'm coding with snack. I'm trying to make an app and when I run it on the browser, everything works fine, but when I try it on Expo Go on my mobile device, the app either crashes entirely or shows this error
Text strings must be rendered within a < Text > component
I'm not really sure what's wrong with the code
export default class Menu extends React.Component {
render() {
return (
<View style={styles.background}>
/*<ImageBackground style={styles.background}></ImageBackground>*/
{/*Header*/}
<View style={styles.header}>
<Image
source={require('../../components/YANA.png')}
style={styles.yana}></Image>
<Text style={styles.headerText}>YANA</Text>
</View>
{/*Menu buttons*/}
<View style={styles.container}>
<Pressable
style={styles.button}
onPress={() => {
this.props.navigation.navigate('Chatbot');
}}>
<Image
source={require('../../components/chatbot.png')}
style={styles.buttonImageChat}></Image>
<Text style={styles.text}>Chatbot</Text>
</Pressable>
<Pressable
style={styles.button}
onPress={() => {
this.props.navigation.navigate('selfCare');
}}>
<Image
source={require('../../components/selfcare.png')}
style={styles.buttonImage}></Image>
<Text style={styles.text}>Self-Care</Text>
</Pressable>
<Pressable
style={styles.button}
onPress={() => {
this.props.navigation.navigate('Journal');
}}>
<Image
source={require('../../components/journal.png')}
style={styles.buttonImage}></Image>
<Text style={styles.text}>Journal</Text>
</Pressable>
{/*Phone and home button*/}
<Pressable
style={styles.phone}
onPress={() => {
this.props.navigation.navigate('Menu');
}}>
<Image
source={require('../../components/phone.png')}
style={styles.imgPhone}></Image>
</Pressable>
<Pressable
style={styles.home}
onPress={() => {
this.props.navigation.navigate('Splash');
}}>
<Image
source={require('../../components/home.png')}
style={styles.imgHome}></Image>
</Pressable>
</View>
</View>
);
}
}
I hope someone can help
You should add curly braces between the ImageBackground Component. React native sees yours as a string so it throws an error that strings must be enclosed within a Text tag
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>
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.
Hello I have this Lisview and on the renderRow I have this return statement :
<TouchableHighlight onPress={this._onPressWidget(rowData)}>
<View>
<View style={style}>
<Text style={styles.text}>
{rowData}
</Text>
</View>
</View>
</TouchableHighlight>
The thing is that the onPress function is launched automatically without pressing the button. Can anyone tell me why is that? I'm doing this with react native
Thank you in advance!
You are calling the _onPressWidget during rendering. What you need to do is pass a callback function that calls it, once the callback executes.
<TouchableHighlight onPress={() => this._onPressWidget(rowData)}>
seriously save my hours!! thx a lot.
I should share the tips here:
let returnView = this.props.item.map((v,i ) => {
return <TouchableHighlight onPress={() => this._fireEventToParent(v.id)}>
<View style={ListItemStyles.liPiece}>
<Image style={[ListItemStyles.liPieceImage} source={{uri: v.itemImage }} />
<Text style={ListItemStyles.liPieceTxt}>{v.itemName}</Text>
</View>
</TouchableHighlight>;
});
only map can work here, I tried forEach, cannot work.