I am newbie using React Native, I have a problem to show/display header title using React Navigation, I try to look for but fail all.
This is my complete script:
Loginscreen.js
class LoginScreen extends Component {
static navigationOptions = {
title: 'Login',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Login Screen</Text>
<Button title="Login To" onPress={() => this.props.navigation.navigate('Tabs')} />
<Button title="Go To Register" onPress={() => this.props.navigation.navigate('Register')} />
</View>
);
}
}
RegisterScreen.js
class RegisterScreen extends Component {
static navigationOptions = {
title: 'Register',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Register Screen</Text>
<Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
</View>
);
}
}
HomeScreen.js
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
</View>
);
}
}
ProfileScreen.js
class ProfileScreen extends Component {
static navigationOptions = {
title: 'Profile',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Profile Screen</Text>
<Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
</View>
);
}
}
App.js
and I get Result like this :
Please anyone help me to show/display header title (circle red), header title in component LoginScreen and Register are fine, but in component HomeScreen and ProfileScreen are lost. Please help me to show/display it.
Thanks.
Define headerMode: 'screen', inside your stacknavigator.
i.e. your rootStack
const rootStack = createStackNavigator(
{
},{
headerMode: 'screen'
})
You must reload the application if you have not, because navigationOptions are static therefore they load only once when app launches and they don't update.
Related
App.js code:
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
constructor(props){
super(props);
this.state={count:0};
this.incrementCount=this.incrementCount.bind(this)
}
incrementCount(){
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={styles.homeScreen}>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
this.incrementCount();
this.props.navigation.navigate('Details');
}}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
constructor(props){
super(props);
this.state=this.state.bind(this)
this.incrementCount=this.incrementCount.bind(this)
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello </Text>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
const styles= StyleSheet.create({
homeScreen:{
}
});
export default createAppContainer(AppNavigator);
I wanted to increment a number (0), every time the user goes to the details(the second page) page. The incremented number should be displayed on the details(the second page) page.
I am a beginner in react native and I don't know how to use state in different classes. Do explain the concept of state along with the solution.
You have to send your count as prop to your DetailsPage. So in code it will look like this:
<Button
title="Go to Details"
onPress={() => {
this.incrementCount();
this.props.navigation.navigate('Details',{count:this.state.count});
}}/>
And in your DetailsScreen you have to access it like this:
class DetailsScreen extends React.Component {
constructor(props){
super(props);
//Remove these lines this is causing error and this is wrong
//this.state=this.state.bind(this)
//this.incrementCount=this.incrementCount.bind(this)
}
render() {
let count = this.props.navigation.getParam('count')
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>You were here {count} times </Text>
</View>
);
}
}
I am trying to set up a navigation action using react-navigation but I am having trouble since I am using a FlatList and a Pure Component to render the items in the list. The list is rendering fine but when I try to add an onPress function to the TouchableHighlight I cannot call the normal navigate function because it does not know what the variable navigate means. I would like to keep the separate file for the Pure Component instead of moving it into the other class if possible.
Pure Component:
export default class Lot extends React.PureComponent {
render() {
return (
<TouchableHighlight
onPress={() => navigate('LotView')}
>
<View style={{ flex: 1, height: 150, alignItems: 'center', justifyContent: 'center' }}>
<View>
{this.props.active && (<Image source={images[this.props.index]} style={[styles.images]} />)}
</View>
</View>
</TouchableHighlight>
);
}
}
The following are in my App.js class.
FlatList
<FlatList
data={this.state.lots}
renderItem={({ item }) => <Lot {...item} />}
/>
Navigation screens
export const MyApp = StackNavigator({
Home: { screen: HomeScreen },
LotView: { screen: LotView },
});
Lot should be dummy component (should not have any external access)
export default class Lot extends React.PureComponent {
render() {
return (
<TouchableHighlight
onPress={this.props.onPress} // <== CHANGED
>
<View style={{ flex: 1, height: 150, alignItems: 'center', justifyContent: 'center' }}>
<View>
{this.props.active && (<Image source={images[this.props.index]} style={[styles.images]} />)}
</View>
</View>
</TouchableHighlight>
);
}
}
HomeScreen
<FlatList
data={this.state.lots}
renderItem={({ item }) => <Lot {...item} onPress={() => this.props.navigate('LotView')} />} //<== CHANGED
/>
As per title, I would like to have a modal opened when clicked on a view
app.js
<View>
<MediaBar onClick={this.toggleModal}> />
<Modal show={this.state.isOpen}
onClose={this.toggleModal}>
`Here's some content for the modal`
</Modal>
</View>
Mediabar.js: https://pastebin.com/6bW5gz99
modal.js: https://pastebin.com/3vQgLyTg
The Modal component has a visible property.
https://facebook.github.io/react-native/docs/modal.html
You just have to update its value using your parent component state.
I will do something like this
App.js
import React, { Component } from 'react';
import { View, Text, Modal, TouchableWithoutFeedback, Dimensions, TouchableOpacity } from 'react-native';
class App extends Component {
state = {
modalVisible: false
}
render() {
return(
<View style={this.styles.viewStyle}>
<Modal visible={this.state.modalVisible}
transparent={true}>
<View style={this.styles.viewStyle}>
<View style={this.styles.dialogStyle}>
</View>
</View>
</Modal>
<View style={this.styles.anotherView}>
<TouchableOpacity onPress={()=> this.setState({ modalVisible: true})}>
<Text>Hello</Text>
</TouchableOpacity>
</View>
</View>
);
}
styles = {
viewStyle: {
flex:1,
alignItems: 'center',
justifyContent: 'center'
},
dialogStyle: {
height: Dimensions.get('window').height*0.2,
width: Dimensions.get('window').width*0.9,
backgroundColor: '#d3d3d3',
elevation: 10,
borderRadius: 5
},
anotherView:{
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center'
}
}
}
export default App;
To Achieve the modal like below:
I am getting the error "undefined is not an object('this.props.navigation.navigate)" when I click the button titled with "Chat with Lucy" which is supposed to take me to the ChatScreen screen.
All of this code is within the App.js file i'm using that is being exported into the android and ios files.
Any reason why i'm getting this error? thanks!
import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
Button
} from 'react-native';
export default class firstapp extends Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require('./Packit_title.png')} />
<TextInput
style={styles.account}
/>
<TextInput
style={styles.account}
/>
<View style={styles.button}>
<Button
title="Login"
color="#c47735"
/>
<Button
title="Sign Up"
color="#c47735"
/>
</View>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
class ChatScreen extends Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
const firstappNav = StackNavigator({
Home: { screen: firstapp },
Chat: { screen: ChatScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f49542',
},
account: {
backgroundColor: '#ffffff',
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 10,
width: 200
},
button: {
flexDirection: 'row',
}
});
AppRegistry.registerComponent('firstapp', () => firstapp);
You are exporting your firstapp component which has no access to the navigation prop since nothing is being passed to it. You need to export your navigator component firstappNav instead.
AppRegistry.registerComponent('firstapp', () => firstappNav);
This is because props object is undefined in firstapp Component. You will have to override its constructor to access props. Read this
I am trying to create a custom drawer in react-navigation. However I am getting an error. The error is JSX attributes must only be assigned a non-empty expression. I have even create the array and maped it to show but still getting an error. Did i miss anything?
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
const navitems =[
{
name:'Home',
nav:'classesnew',
},
{
name:'Device',
nav:'start',
},
]
class DrawerContent extends React.Component{
constructor(props) {
super(props)
}
render(){
return (
<Image source={require('../images/logo.png')}
style={styles.container}>
<View style={{justifyContent: 'center',
alignItems: 'center',}}>
<Image style={styles.image} source={{uri: ''}}/>
</View>
<View>
{
navitems.map((l,i)=>{
return (
<TouchableOpacity
key={i}
style={{marginBottom:0.5}}
onPress={()=>{
this.props.navigation.navigate(l.nav)
}
}>
<View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
<Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25, }} color="#ffffff" />
<Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
</View>
</TouchableOpacity>)
})
}
</View>
</Image>)
}
}
const DrawerRoutes = (
{
Main: { screen: App, title: 'Main' },
Device: { screen: Device, title: 'Device' },
})
const Drawer = DrawerNavigator(DrawerRoutes ,{
contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});
Drawer.navigationOptions = {
contentOptions: {
activeBackgroundColor: '#ff5976',
style: {
backgroundColor: '#000000',
zIndex: 100,
paddingTop: 0
}
},
header: ({ state, setParams, navigate, dispatch }) => ({
visible: true,
tintColor: '#ffffff',
title: "LokaLocal",
style: {
backgroundColor: '#ff5976'
},
right: (
<TouchableOpacity
onPress={() => navigate('DrawerOpen')}
>
<Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
</TouchableOpacity>
),
left: (
<TouchableOpacity
onPress={}
>
<Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
</TouchableOpacity>
),
})
}
export const Routes = StackNavigator(
{
Login: { screen: Login },
Dashboard: {screen: Drawer},
},
);
I am using react-navigation 1.0.0.bet.9
<TouchableOpacity
onPress={}
Here , as the error mentioned , you can't assign an empy expression to a JSX attributes.
You can't have empty {} in JSX attributes.
In here you can't have
<TouchableOpacity
onPress={}
>
Fix this by having
<TouchableOpacity
onPress={someFunction}
>
Error:
onPress={}
You have to pass a prop but to run this temporary you can do this as :
onPress={""}
let me know if it worked :)