I cant seem to figure this out. I can get something to show, but its a box with an X in it, so im assuming its not picking up the vector icons. Any advice?
I have the show icon true, I have the tint color, I have the vector icons (i have tried both ionicons and font awesome, to no avail.
Code:
import React, { Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-
navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home'
};
render(){
return (
<View style={{ flex:1, alignItems:'center', justifyContent:'center'
}}>
<Text>Home Screen</Text>
</View>
);
}
}
const RootStack = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name = 'home' size={25} color={tintColor} />
)
}
},
},
{
tabBarOptions: {
showIcon:true,
tintColor:'red'
}
}
);
const AppContainer = createAppContainer(RootStack);
const styles = StyleSheet.create({
})
export default class App extends Component{
render(){
return <AppContainer />;
}
}
I am using react-native version 0.62 and I encountered this error too. Though 0.60+ versions of react native provide auto-linking feature, but for react-native-vector-icons this is an exception. You need to link it manually. To solve it, follow below steps
rm -rf node_modules
yarn
yarn react-native link
Hope that helps.
Fixed this. Once i realized it was the vectors, i just linked react-native with react-native-vectors.
Related
Help me please. I am making mobile app. I have bottom tab navigation that is making navigation between 3 main pages. I have done navigation between 1st page and second,but not with tab bottom navigation, with button. When i have made this i have not got something i want. I will be very happy if you help me. When i navigate to second page from first i have 2 titles. But i want to make 1:
there is 2 titles, first is < and second is "Courses", i want to make it like this "< Courses". Help me please. Code:
// 1st page
import Courses from './Courses'
<Button
onPress={() => {
navigate('Courses')
}}
title="More courses"
/>
const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Courses: {
screen: Courses,
},
Details: {
screen: DetailsScreen,
},
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'
import Home from './screens/Home'
import Courses from './screens/Courses'
import Editor from './screens/Editor'
import AppNavigator from './AppNavigator';
const TabNavigator = createBottomTabNavigator({
Home:{
screen:Home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Courses:{
screen:Courses,
navigationOptions:{
tabBarLabel:'Courses',
tabBarIcon:({tintColor})=>(
<Icon name="ios-school" color={tintColor} size={24} />
)
}
},
Editor:{
screen:Editor,
navigationOptions:{
tabBarLabel:'Editor',
tabBarIcon:({tintColor})=>(
<Icon name="ios-document" color={tintColor} size={24} />
)
}
},
},{
tabBarOptions:{
activeTintColor:'#db0202',
inactiveTintColor:'grey',
style:{
fontSize:3,
height:45,
backgroundColor:'white',
borderTopWidth:0,
elevation: 5
}
}
});
export default createAppContainer(TabNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You don't need to define another navigator in your Home screen. If you define Home like this it should work:
import React from 'react'
import { Button, View } from 'react-native'
export default class Home extends React.Component {
render() {
const { navigation: { navigate } } = this.props
<Button
title='More Courses'
onPress={() => navigate('Courses')}
/>
}
}
Your other screens should look similar to this.
I have a home screen built with React-Navigation 3.x. I have a header, some navigation icons, and a bottom tab menu. It is working well, but now I want to add a drawer menu to the screen and add an icon at the top right corner to toggle the drawer.
Here's a simplified version of my home screen (App.js):
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Activity1 from './Activity/Activity1';
import Activity2 from './Activity/Activity2';
import Activity3 from './Activity/Activity3';
import Calendar from './Screens/Calendar';
import Graph from './Screens/Graph';
import DrawerMenu from './components/DrawerMenu';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
headerRight: (<Button onPress={() => this.props.navigation.toggleDrawer()} title='Menu' />)
};
render() {
return (
<View style={styles.container}>
<View style={styles.iconContainer}>
<Icon name='icon1' onPress={this.navToActivity1} />
<Icon name='icon2' onPress={this.navToActivity2} />
<Icon name='icon3' onPress={this.navToActivity3} />
</View>
<View>
<DrawerMenu />
</View>
</View>
);
}
}
//create my main navigation stacks here
const Home = createStackNavigator({
HomeScreen,
Activity1,
Activity2,
Activity3,
});
//The following two are for the bottom tab bar only
const Calendar = createStackNavigator({ Calendar });
const Graph = createStackNavigator({ Graph });
const BottomTabNav = createBottomTabNavigator({
Home, Calendar, Graph
});
export default createAppContainer(TabNavigator);
And here's the code for DrawerMenu.js
import { Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Settings from './Settings';
import Profile from './Profile';
const SCREENWIDTH = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: SCREENWIDTH * 0.5,
drawerPosition: 'right',
};
const DrawerMenu = createDrawerNavigator({
Settings: { screen: Settings },
Profile: { screen: Profile },
},
DrawerConfig
);
export default createAppContainer(DrawerMenu);
I couldn't get the drawer to work. When I click on the "Menu" button at the top right corner in the Home Screen to invoke toggleDrawer(), I got an "undefined is not an object (evaluating 'ae.props.navigation')" error.
The drawer cannot be activated using gesture either, so I think I am not adding it correctly. What did I do wrong here? Thanks!!
install the package the react-native-drawer
https://www.npmjs.com/package/react-native-drawer
<Drawer
type="overlay"
ref={ref => (this._drawer = ref)}
content={<Sidebar />}
tapToClose={true}
openDrawerOffset={0.2} // 20% gap on the right side of drawer
panCloseMask={0.2}
closedDrawerOffset={-3}
styles={drawerStyles}
tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
>
cds
I'm trying to add Ripple Effect like this in BottomTabNavigator but don't know how?
I'm using createMaterialBottomTabNavigator for BottomTabNavigator.
To get the Material Bottom Tab Navigator to change color you need to use the tabBarColor property of the navigationOptions for each tab. You can see this in the documentation here. You also need to set shifting to be true in the navigator's config if you want the ripple effect.
You will need to make sure that you have the following dependencies installed:
react-navigation
react-navigation-material-bottom-tabs
react-native-paper
react-native-vector-icons, though if using Expo this is not required as it is already included
For more details on the dependencies that you need see the documentation
Here is a sample navigator:
import * as React from 'react';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'; // <- notice where we import createMaterialBottomTabNavigator from
import { MaterialIcons } from '#expo/vector-icons';
const tabBarIcon = name => ({ tintColor }) => (
<MaterialIcons
style={{ backgroundColor: 'transparent' }}
name={name}
color={tintColor}
size={24}
/>
);
const screens = {
Screen1: {
screen: Screen1,
navigationOptions: {
tabBarIcon: tabBarIcon('photo-album'),
tabBarColor: 'blue' // <- set this to the color you want
}
},
Screen2: {
screen: Screen2,
navigationOptions: {
tabBarIcon: tabBarIcon('favorite'),
tabBarColor: 'green' // <- set this to the color you want
}
}
};
const config = {
headerMode: 'none',
initialRouteName: 'Screen1',
shifting: true, // <- notice this has been set to true
activeColor: 'white',
inactiveColor: 'black'
};
const MainNavigator = createMaterialBottomTabNavigator(screens, config);
export default createAppContainer(MainNavigator);
I would have created a snack to show this working but unfortunately react-navigation-material-bottom-tabs doesn't play nice in a snack, but it does play nice in a local Expo or react-native app.
I get this error and it's driving me insane, I cannot even start a simple application on React Native. I am using the most basic example, with a fresh project and still throws this error.
I use react-navigation v3xx
Someone please help because I am losing my mind, thank you.
Here is the code I have:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}
class AboutMeMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}
const AppScreens = createStackNavigator({
Home: Home,
About: AboutMeMe
})
const App = createAppContainer(AppScreens);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
Hellow
As react navigation now depends on gesture so you must install an additional library to go after you have installed the react-navigation library
Run this command inside your project from your terminal
npm install --save react-native-gesture-handler
Then run this one
react-native link react-native-gesture-handler
These instructions are well explained here
https://reactnavigation.org/docs/en/getting-started.html#installation
for new react navigation version
Best regards
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler
I'm using react navigation for my app development. When i run log-android, it keeps logging something like this.
Navigation Dispatch: Action: {...}, New State: {...}
which is from createNavigationContainer.js line 150.
I've run through github and document said it could be done by by setting onNavigationStateChange={null} on a top-level navigator.
How can i achieve this by setting onNavigationStateChange={null} and where should i set it?
I've try to set like below, but it the page will not be able to redirect to other page.
export default () => {
<App onNavigationStateChange={null} />
}
Below are my app.js code
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { StackNavigator,DrawerNavigator } from 'react-navigation';
import DrawerContent from './components/drawer/drawerContent.js';
import News from './components/news/home.js';
const drawNavigation = DrawerNavigator(
{
Home : {
screen : News ,
navigationOptions : {
header : null
}
}
},
{
contentComponent: props => <DrawerContent {...props} />
}
)
const StackNavigation = StackNavigator({
Home : { screen : drawNavigation,
navigationOptions: {
header: null
}
}
});
export default StackNavigation;
This is my drawerContent.js
import React, {Component} from 'react'
import {View,Text, StyleSheet,
TouchableNativeFeedback,
TouchableOpacity,
TouchableHighlight
} from 'react-native'
import { DrawerItems, DrawerView } from 'react-navigation';
import Icon from 'react-native-vector-icons/Octicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
class DrawerContent extends Component {
constructor(props){
super(props);
console.log('DrawerContent|testtttttt');
}
render(){
return (
<View style={styles.container}>
<Text>Hi darren</Text>
<TouchableOpacity style={{ marginBottom:5 }} onPress={() => this.props.navigation.navigate('RegistrationScreen') } >
<View style={styles.nonIconButton}>
<Text style={{ color: 'black',fontSize: 13 }} >Sign Up</Text>
</View>
</TouchableOpacity>
<Text>Hi darren</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default DrawerContent;
First, make sure you are using the latest release of react-navigation as the comment noting that the fix was committed is fairly recent.
Based on your code example, to disable logging for all navigation state changes, you would want to replace this code:
export default StackNavigation;
with:
export default () => (
<StackNavigation onNavigationStateChange={null} />
);
as StackNavigation appears to be your root navigator.
React navigation is great, but this logging is really bad. Solution
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
render() {
return (
<AppNavigator onNavigationStateChange={null} />
);
}
}