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} />
Related
I am trying to to data using Flatlist inside a Modal. But sometimes (Not always) data is not displayed at all. Just empty screen. I am using expo client for test. Below is my code. This render() method is actually in a custom component. So, Modal is inside a custom component. I am not sure Modal has to cause any issue here.
// sometime flatlist does not work when inside a modal
render(){
return (
<View>
{ this.props.visible && this.renderChildModal()}
{ this.props.visible &&
<Modal
animationType="slide"
transparent={false}
visible={true}
onRequestClose={() => {
//Alert.alert('Modal has been closed.');
}}>
<View>
<View style={this.styles.buttonContainer}>
<TouchableOpacity style={this.styles.button}
onPress={this.props.onDone}>
<Text style={styles.labelButton}>Done</Text>
</TouchableOpacity>
</View>
<FlatList
data={this.state.items}
extraData ={this.state}
renderItem={({ item }) => (
<CheckBox
title={item.name}
checked={item.checked}
onPress={()=>this.onSelect(item.id-1)}
/>
)}
keyExtractor={item => item.id.toString()}
/>
</View>
</Modal>
}
</View>
)
}
It was not a problem with Modal. I was calling component named MultiSelect in screen as below,
<MultiSelect
items={specialities}
selectedItems={profile.specialities}
onItemSelected={this.onSelectedSpecialitiesChange}
visible={this.state.specialitiesModalVisible}
onDone={this.specialityMultiSelectDone}
>
</MultiSelect>
Sometime specialities is empty as it is retrieved from server asynchronously.
So, I changed my code as below,
{specialities.length>0 &&
<MultiSelect
items={specialities}
selectedItems={profile.specialities}
onItemSelected={this.onSelectedSpecialitiesChange}
visible={this.state.specialitiesModalVisible}
onDone={this.specialityMultiSelectDone}
>
</MultiSelect> }
That solves the issue.
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>
Root component is App.js
using Redux-saga as well.
my intention is that after login i want to use float button global.
but there are 3 tabs with Tab-Navigator (e.g Mail/Profile/Gallery..) and they have each Stack Navigator.
and i want to use floating button with different functions by tabs.
For example,
Mail.js --> fab function(Write)
Profile.js --> fab function(Call, Message)
Gallery.js -- > fab function(Share, Upload)..
like that.
where should i put Fab Component to use globally??
i'm using library
https://github.com/santomegonzalo/react-native-floating-action
if there is other nice library i would accept if you guys recommend me. thanks
App.js
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<ReduxNavigation />
</View>
</Provider>
)}}
You can use react-native-action-button module for action button.
if your action button is independent of current screen on which you are, then you can use it in root component, as the action button have absolute position.
here is sample code that you can use for reference.
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<ReduxNavigation />
<ActionButton buttonColor="rgba(231,76,60,1)">
<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
<Icon name="md-create" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
<Icon name="md-notifications-off" 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>
</Provider>
)
}
}
I'm using react-navigation and implementing drawer.
It worked on the iOS but it's not working on the android.
When I call _drawToggle,
_drawerToggle = () => {
this.props.navigation.navigate('DrawerOpen');
}
The screen gets darker(seems like working, but not quite).
Here is return value of the render() function.
<View style={{flex:1}}>
<Header
headerText="Restaurant List"
navigation={this.props.navigation}
drawerToggle={this._drawerToggle}
/>
<ScrollView>
<FlatList
data={restaurants}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</ScrollView>
</View>
My home page contains a View. This view contains a flat list with items. The flat list is being rendered through a different component
I should be able to use something like this.props.navigation.navigate('DetailPage') from the component not from my homePage.
I think i should pass the navigation as a prop to the but not sure how i could do that.
Navigation File
export const HomePageStack = StackNavigator({
Homepage:{
screen:homePage,
},
DetailPage:{
screen: DetailPage,
}
})
Home Page Screen
render(){
return(
<View>
<DetailedArea />
</View>
)}
Detailed Area
render(){
return(
<TouchableHighlight onPress={this.props.navigation.navigate('DetailPage')}>
<Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
</TouchableHighlight>
)}
the HomeScreen has this.props.navigation, but it isn't passed down to DetailedArea.
I recommend the following:
HomeScreen
render(){
return(
<View>
<DetailedArea onNavigate={() => this.props.navigation.navigate('DetalPage')} />
</View>
)}
DetailedArea
render(){
return(
<TouchableHighlight onPress={this.props.onNavigate}>
<Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
</TouchableHighlight>
)}