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>
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)}
Why does the following Button not work on android?
render() {
return (
<View>
<View style={{height:50}}>
<Text>if this is here, the button will not work</Text>
</View>
<View>
<Button
title="Confirm"
onPress={() => alert('click')}
/>
</View>
</View>
)
}
When I remove the top view, the button works. (no problems on ios)
render() {
return (
<View>
<View>
<Button
title="Confirm"
onPress={() => alert('click')}
/>
</View>
</View>
)
}
Ok, the part, I posted does work. The cause for my problem was nesting it from another (parent) view.
I am trying design like below image with react native.If anyone have worked like this modal design over the toolbar then please help me.
1
You will need a Modal with a embedded TouchableOpacity combined with some styling for positioning.
Please refer this
https://snack.expo.io/SJrDAC8Qr
render() {
return (
<>
<View>
<Appbar.Header>
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="search" onPress={() => this.setState({displayModal: true})} />
</Appbar.Header>
<View>
<Text>Main content!</Text>
</View>
</View>
{/*Modal code*/}
<Modal transparent={true} visible={this.state.displayModal}>
{/*Container .. clicking this closes the modal*/}
<TouchableOpacity style={{flex:1}} onPress={() => this.setState({displayModal:false})}>
<View style={{backgroundColor:'blue', position:'absolute', right:0, width:200, height: 200}}>
<Text style={{color:'#ffffff'}}>Hello World!</Text>
</View>
</TouchableOpacity>
</Modal>
</>
);
}
Not very nicely styled but I guess it does what you want
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} />
Normally the height of a FlatList is set by wrapping a around it.
This doesn't appear to work if I put it inside a modal component of react native.
Is there any other way to set the height for a FlatList?
<Modal
visible={visible}
transparent={true}
animationType='slide'
>
<View style={middleInnerContainer}>
<FlatList
data={this.props.vegetablesBenefit}
renderItem={modalBenefitItem}
keyExtractor={(item) => item.key}
scrollEnabled
/>
</View>
</Modal>
I've simplified this code to the basic structure I am using.
It works perfectly fine outside of a modal.
Can you be more specific? If you want a list inside a popup you can simply use the following code I wrote for creating a generic dialog popup!
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<Modal
visible={this.state.showDialog}
transparent={true}
onRequestClose={() => this.closeDialog()}
animationType='slide'>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
<View style={styles.parentContainer}>
<View style={styles.childContainer}>
<View style={styles.viewContainer}>
{/* tslint:disable-next-line:no-empty */}
<TouchableWithoutFeedback onPress={() => { }}>
<View>
<Text style={styles.headerStyle}>{this.props.headerTitle}
</Text>
</View>
</TouchableWithoutFeedback>
{this.renderListComponent()}
</View>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
Handles the touch outside as well. Let me know if this completes your requirement.