All i need is to trigger onPress method of the ActionButton Without tapping on it.
Here is my code:
render () {
// act = this.refs.abc;
// alert(this.state.activeState)
// this.handleAutoPress();
return (
// <View style={styles.container}>
<View style={{flex:1, backgroundColor: '#f3f3f3'}} >
<Text>Component10 Component</Text>
{/*Rest of App come ABOVE the action button component!*/}
<ActionButton ref="abc" buttonColor="rgba(231,76,60,1)" >
{/*<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() =>
console.log("notes tapped!")}>
<Icon name="android-create" style={styles.actionButtonIcon} />
</ActionButton.Item>*/}
<ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
<Icon name="md-done-all" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
<Icon name="md-done-all" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
// </View>
)
}
You probably want to follow the instructions in this answer: How can I trigger a tabItem onPress within a component using React Native?
Instead of trying to invoke the onPress itself, just set onPress prop to a function and invoke that function wherever needed. No need to mess with refs or anything like that.
Related
I am making an android app with ReactNative. When a button is clicked, an alert shows up with the result (My code is Alert.alert(''Results:", returnResults(a,b,c)). Is there a way I can use Modal and the function returnResults(a,b,c) with it to show the message in a more customised way?
The problem is that when I use normal alert, the text is different on every device and I want to prevent that.(I want to specify the font, its size etc)
const Modal = () => {
const [modal, setModal] = useState(false);
return (
<View>
<Button title="Open Modal" onPress={() => setModal(true)} />
<Modal
animationType="slide"
transparent={false}
visible={modal}
onRequestClose={() => setModal(false)}
>
<View style={{ marginTop: 22 }}>
<View>
<Text>This is the modal content</Text>
<Button title="Close" onPress={() => setModal(false)} />
</View>
</View>
</Modal>
</View>
);
};
I actually found what i had been looking for. I just had to write the following code:
{returnResults(a,b,c)}
I have an array with values i want to present and then if the user press the edit button the presentation is changed to a list of TextInput components. When done editing the user can press Save or Cancel. If Cancel is pressed the values in the textInput fields should not be saved to the original array of values.
My problem is that even when pressing Cancel the data in the original array seems to be updated.
This is the code:
`
const handlePress = (text, index) => {
const newSchedule = [...scheduleTempState]
newSchedule[index].value = text
setScheduleTempState(newSchedule)
}
const handlePress2 =()=>{
setScheduleTempState([]);
console.log("handlepress2")
setEdit(false)
}
const handlePress3 =()=>{
setScheduleTempState(scheduleState);
console.log("handlepress3")
setEdit(true)
}
return (
edit
?
<View style={styles.scheduleRow}>
<View style={styles.buttonView}>
<TouchableOpacity onPress = { ()=>{saveSchedule(projectId,scheduleState);updateClient() ;setEdit(false)}} >
<MaterialIcons name="save" size={16} color="green" />
</TouchableOpacity>
<TouchableOpacity onPress = { ()=>{handlePress2()}} >
<MaterialIcons name="cancel" size={16} color="red" />
</TouchableOpacity>
</View>
<View>
<FlatList
horizontal = {true}
data={scheduleTempState}
keyExtractor={item => item.id}
renderItem={({item, index}) => {
return (
<View style={styles.decimalInputView}>
<TextInput
style={styles.cellInput}
onChangeText={(text) => {handlePress(text, index)}}
value = {item.value} />
</View>
)
}}
/>
</View>
</View>
:
<View style={styles.scheduleRow}>
<View style={styles.buttonView}>
<TouchableOpacity onPress = { ()=>handlePress3()} >
<MaterialIcons name="edit" size={14} color="black" />
</TouchableOpacity>
</View>
<View >
<FlatList
horizontal={true}
data={scheduleState}
renderItem={renderScheduleItem}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}`
I guess my problem has something to do with states not being updated, but i can not see how the edited values can be saved when i press cancel.
Problem:
You are updating the scheduleTempState by referencing your scheduleState. So when you mutate scheduleTempState, it also mutates the scheduleState.
Solution: Please use spread operator to scheduleState which can help to create a new copy of a reference.
const handlePress3 =()=>{
setScheduleTempState([...scheduleState]);
...
}
Suggestion: It would be better to use explanatory names for function. It will make the code more readable. For example:
onChangeText() instead of handlepress()
onCancelEditing() instead of handlepress2()
onEdit instead of handlepress3()
Hope you will get the idea.
My code:
{this.state.News.slice(0, this.state.currentShow).map((item) => {
return (
<View>
<View>
<View>
<Text>{item.Title}</Text>
<Text>{item.Content}</Text>
</View>
<View>
<Image source={{uri: item.Image}} />
</View>
</View>
<View>
<Text>{item.creationTime}</Text>
<Button onPress={this.gotoNews(item.Id.toString())}>
<Text>Load More</Text>
</Button>
</View>
</View>
)
})}
Whenever this page is run, Everything is right But why the button onPress runs when the react native screen is loaded!!
Try to change your button handler call from a function call to a function
you can use ES6 arrow functions to do this :
<Button onPress={()=>this.gotoNews(item.Id.toString())}>
<Text>Load More</Text>
</Button>
<Animatable.View animation={'fadeIn'} duration={1000} >
<TouchableOpacity key={index} activeOpacity={0.5} onPress={() => this.onPress()}>
<Text>Submit</Text>
</TouchableOpacity>
</Animatable.View>
Animated View is preventing the onPress action. If I remove the Animated View then onPress action works fine.
IF i wrap the content of the TouchableOpacity with a view, Then onPress action works fine.
<Animatable.View animation={'fadeIn'} duration={1000} >
<TouchableOpacity key={index} activeOpacity={0.5} onPress={() => this.onPress()}>
<View>
<Text>Submit</Text>
<View>
</TouchableOpacity>
</Animatable.View>
Can anybody let me know why AnimatedView is preventing the onPress and how come View make onPress works?
i have a component in which on button click i render a component
<View style={styles.container}>
<Text> in Default component!</Text>
<Button title="add"
onPress={this.handelSubmit} />
{items.map((item, index) => (
<Home key={index} data={index} />))}
</View>
and my home component look like
<View style={styles.container}>
<Text onPress={() => { this.props.navigation.navigate("Calculator")}}>Semester {this.props.data +1}</Text>
</View>
onPress event i want to navigate to other screen i.e 'Calculator.js' but i got an error
i am using react-navigation for navgation
If you want to navigate from a component, you have to use your component like this:
<Home key={index} data={index} navigation={this.props.navigation} />