picture
My problem is that I don't know were to put "title". I have TabNavigator, with two pages. You can see on the image, which is what I really want to do.
import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View >
<Button
title='Click me'
onPress={() => this.props.navigation.navigate('HomeScreen')} />
</View>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
export default createMaterialTopTabNavigator({
Test1: { screen: HomeScreen },
Test2: { screen: SettingsScreen },
});
One possible solution is to wrap the MaterialTopTabNavigatorinside a StackNavigator and add the title option to it. So your code should looks something similar to this:
import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View >
<Button
title='Click me'
onPress={() => this.props.navigation.navigate('HomeScreen')} />
</View>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const App = createMaterialTopTabNavigator({
Test1: { screen: HomeScreen },
Test2: { screen: SettingsScreen },
});
export default createStackNavigator({
app: {
screen: App,
navigationOptions: {
title: 'Screen title',
},
},
});
Related
I need to show NetAlert modal in every screen when intenet is down. I have created a NetAlertModal component for that . I am not sure where to render this component . I am using react navigation Switch navigator. If I am rendering as below it is not showing login screen.
I am new to react native so please help.
Below is my code
/***App.js*/
render() {
return (
<Provider store={store}>
<PersistGate>
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView
style={styles.safeArea}
forceInset={{bottom: 'never', top: 'never'}}>
<NetAlertModal /> <------ Need to show this
<RootNav
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</SafeAreaView>
</Fragment>
</PersistGate>
</Provider>
);
}
}
/*rootNav.js*/
const RootNav = createSwitchNavigator(
{
Drawer: DrawerNavigator,
Auth: AuthStack,
},
{
initialRouteName: 'Auth',
},
);
export default createAppContainer(RootNav);
*/AuthStack.js*/
import {createStackNavigator} from 'react-navigation';
import Login from '../components/login/Login';
import Verify from '../components/verify/Verify';
const rootConfiguration = {
loginPage: {screen: Login},
verifyPage: {screen: Verify},
};
const stackNavigatorConfiguration = {
initialRouteName: 'loginPage',
headerMode: 'none',
defaultNavigationOptions: {
headerTintColor: '#ffeb3b',
headerTitleStyle: {
fontWeight: 'bold',
flex: 1,
textAlign: 'center',
},
},
};
export const AuthStack = createStackNavigator(
rootConfiguration,
stackNavigatorConfiguration,
);
Try this below example in your app.js which I create using #react-native-community/netinfo library
import React, { Component } from 'react';
import NetInfo from "#react-native-community/netinfo";
import { View, Text, Modal } from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = {
isConnected: true,
};
}
componentDidMount() {
NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
}
handleConnectivityChange = isConnected => {
this.setState({ isConnected });
};
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{/* your app */}
</View>
{
!this.state.isConnected &&
<Modal
visible={!this.state.isConnected}
transparent={true}
animationType='slide'
>
<View style={styles.modelStyle}>
<View style={styles.modelWrapperStyle}>
<Text style={{ textAlign: 'center' }}>{global.strings.oops}</Text>
<Text style={{ textAlign: 'center' }}>{global.strings.internetConnection}</Text>
</View>
</View>
</Modal>
}
</View>
);
}
}
const styles = {
modelStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
modelWrapperStyle: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#e3dfde',
padding: 20,
width: '90%',
borderRadius: 20
},
};
export default App;
Change this according to your requirement. Feel free for doubts.
import { NetInfo } from 'react-native';
NetInfo.isConnected.fetch().then(isConnected => {
if(isConnected)
{
console.log('Internet is connected');
}
})
use above code as a HOC or make it global for your root file
i'm currently trying to implement custom component to show the icon i've.
i got no error when rendering it , but 2 of list of screen didn't shows up. am i need to do something with styling or there's a problem with my code
if anyone could inspect my code that would be awesome
this is my error
here are my code
App.js
import React from 'react';
import {
StyleSheet,
View,
SafeAreaView,
ScrollView,
Dimensions,
Image,
Text
} from 'react-native';
import {
createDrawerNavigator,
DrawerItems
} from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import SettingsScreen from './screen/SettingsScreen';
export default class App extends React.Component {
render () {
return (
<AppDrawerNavigator />
);
}
}
const CustomDrawerComponent = ( props ) => (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('./img/cs.png')}
style={{height:120, width:120, borderRadius: 20}}
/>
</View>
</ScrollView>
</SafeAreaView>
)
const AppDrawerNavigator = createDrawerNavigator ({
Home: HomeScreen,
Settings: SettingsScreen
},{
contentComponent: CustomDrawerComponent
})
const styles = StyleSheet.create({
container: {
flex: 0,
color: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Homescreen.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
class HomeScreen extends Component {
render () {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
export default HomeScreen ;
const styles = StyleSheet.create({
container: {
flex: 1,
color: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
According to the official doc, your Drawer Navigator has to be defined like:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
},
Settings: {
screen: SettingsScreen,
}
});
You're not assigning an object with a prop screen to each custom screen.
For more details take a look at doc.
as I understand, you need to add DrawerItems to your drawer.
import { DrawerItems, SafeAreaView } from 'react-navigation';
const CustomDrawerComponent = ( props ) => (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('./img/cs.png')}
style={{height:120, width:120, borderRadius: 20}}
/>
</View>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
I've created an app using ReactNative, and i'm using react-navigation to navigate my app.
I'm trying to add an activeTintColor so the active tab gets a unique color, but nothing happens. The text stays white.
Any reason why this happens?
I've looked trough the docs, and followed it's instructions, but to no avail.
Anyone knows to solution to my problem? (why doesn't activeTintColor work in my app?)
Navigation File
import React from 'react';
import { Platform,View, Text, StyleSheet, } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
activeTintColor: '#000',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'Settings',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Settings Screen</Text>
</View>
);
}
}
class WalletsScreen extends React.Component {
static navigationOptions = {
title: 'Wallet',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Wallet Screen</Text>
</View>
);
}
}
const Tab = createBottomTabNavigator({
Home: {
screen: HomeScreen,
},
Wallet: {
screen: WalletsScreen,
},
Settings: {
screen: SettingsScreen,
},
},
{
tabBarOptions:{
tabStyle: {
width: 100,
backgroundColor: 'black',
},
labelStyle:{
color: 'white',
},
}
}
);
const RootStack = createStackNavigator({
Home1: {
screen: Tab,
},
});
export { RootStack, Tab}
activeTintColor is a property of tabBarOptions object and you are using it in navigationOptions.
const Tab = createBottomTabNavigator({
////Screens,
{
tabBarOptions:{
activeTintColor: 'blue',
tabStyle: {
width: 100,
backgroundColor: 'black',
},
labelStyle:{
color: 'white',
},
}
}
);
I am new to react native. I tried using the createStackNavigator module. However, I do not know why my onClick function is not directing me to the required screen. Here are my codes are shown below:
mySpaceRouter.js
import {createStackNavigator} from 'react-navigation'
import SubscriptionScreen from './subscribed'
import MySpaceScreenRT from './myspace'
import React, {Component} from 'react'
const RootStack = createStackNavigator(
{
MySpace : MySpaceScreenRT,
subscribed : SubscriptionScreen,
navigationOptions:{
header:{ visible:false }
}
},
{
initialRouteName : 'MySpace',
},
)
class MySpaceScreen extends Component{
render(){
return(
<RootStack />
)
}
}
export default MySpaceScreen;
mySpace.js
import React, { Component } from 'react'
import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native'
import { Avatar, Button, Icon } from 'react-native-elements'
import MyButton from '../Button'
class MySpaceScreenRT extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.textHolder}>
<Text style={styles.headerText}>My Space</Text>
</View>
</View>
<View style={styles.boxContainer} >
<ScrollView style={styles.scrollContainer}>
<View style={styles.profileContainer}>
<Avatar
large
rounded
title="CR"
onClick={() =>this.props.navigation.navigate('subscribed')}
activeOpacity={0.7}
/>
<Text style={styles.profileName}>Christaino Ronaldo </Text>
</View>
<MyButton text='Subscribed' icon='ios-play' />
<MyButton text='Downloads' icon='ios-folder-open' onPress ={() => console.log('Works!')} />
<MyButton text='History' icon='ios-timer-outline' />
<MyButton text='Rate Our App' icon='ios-star-half' />
</ScrollView>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
},
header: {
height: 70,
backgroundColor: '#780c1c',
elevation: 5,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
boxContainer: {
flex: 1,
flexDirection: 'column',
},
textHolder: {
},
headerText: {
fontSize: 20,
color: 'white'
},
profileContainer: {
height: 150,
borderColor : '#696969',
borderBottomWidth: 0.5,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
profileName: {
position: 'relative',
zIndex: 1,
fontSize: 16,
color: '#000000',
alignSelf: 'center',
marginTop: 10,
marginLeft: 10
},
scrollContainer: {
flexDirection: 'column',
},
icons: {
marginTop: 10
},
Text: {
fontSize: 18,
alignSelf: 'center',
padding: 10
}
})
export default MySpaceScreenRT;
subscribed.js
import React, {Component} from 'react'
import {StyleSheet, Text, View} from 'react-native'
class SubscriptionScreen extends Component {
render(){
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>SubscriptionScreen!</Text>
</View>
)
}
}
export default SubscriptionScreen;
Thank you.
With react-native you use onPress() not onClick().
onPress={() =>this.props.navigation.navigate('subscribed')}
For each screen in the stack you have to create an entry so you should do something like this:
const RootStack = createStackNavigator({
MySpace: {
screen: MySpace,
navigationOptions: ({ navigation }) => ({
title: "My Space" ,
header:{ visible:false }
}),
},
subscribed: {
screen: SubscriptionScreen,
navigationOptions: ({ navigation }) => ({
title: "" ,
header:{ visible:false }
}),
}
},{
initialRouteName : 'MySpace',
})
in addition to that you have to change onClick to onPress
I am having problems to understand what is wrong in my App.js when it says undefined is not an object (evaluating 'this.props.navigation.navigate'). I have been following react native documentation when it switches between homescreen and chatsrceen. I still cant make it work. Could someone help me?
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Button,
View,
Navigator,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class App extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
const App1 = StackNavigator({
Home: { screen: App },
Chat: { screen: ChatScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export default App1
You need to export App1 not App.