I'm trying to add icons to my bottomTabNavigator using Icons from react-native-elements.
import { createBottomTabNavigator } from "react-navigation"
import { ServicesNavigator } from "./services-navigator"
import { AccountScreen } from "../screens/account-screen/account-screen"
import { Icon } from "react-native-elements"
export const BottomTabNavigator = createBottomTabNavigator({
services: {
screen: ServicesNavigator,
navigationOptions: {
tabBarLabel:"Services",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-build" type="Ionicon" size={10} />
)
},
},
account: { screen: AccountScreen },
})
The code above shows the following error in ios: Unexpected token, expected "</>/<=/>=" around the line where <Icon> is.
I've tried looking online but I can't seem to fix my problem. Any help would be appreicated!
those settings should not be within the RouteConfigs. Studying https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance you should do more like
export const BottomTabNavigator = createBottomTabNavigator({
services: ServicesNavigator,
account: AccountScreen,
},
{
defaultNavigationOptions: () => {
tabBarIcon: () => <Icon name="ios-build" type="Ionicon" size={10} />
},
},
})
I finally found the problem. All this time my file's extension was .ts, which does not support jsx, instead of .tsx. Changing the file extension to .tsx did it for me.
Related
I'm trying to make custom headerLeft button, But the thing is When I'm going to this specific, route without giving any errors or warnings, it is not working.
Here is my react-navigation stack
const Navigator = createStackNavigator({
Welcome: WelcomeScreen,
GetStarted: {
screen: GetStartedScreen,
},
CreatePassword: CreatePasswordScreen,
AlternatePhrase: {
screen:AlternatePhraseScreen,
navigationOptions: ({navigation}) => {
return {
headerLeft:<HeaderBackButton onPress={navigation.navigate("WelcomeScreen")} />
}
}
},
ConfirmPhrase: ConfirmPhraseScreen,
FanwallyAgreement: FanwallyAgreementScreen,
ImportWallet: ImportWalletFieldsScreen,
Main: MainScreen,
TokenDeposit,
});
Every other screens are working perfectly its just this one
`
AlternatePhrase: {
screen:AlternatePhraseScreen,
navigationOptions: ({navigation}) => {
return {
headerLeft:<HeaderBackButton onPress={navigation.navigate("WelcomeScreen")} />
}
}
},
`
Any suggestions on what am I doing wrong?
Try this
onPress={() => navigation.navigate("WelcomeScreen")}
I have been working on this simple mobile application. I am trying to show some icon on the bottom tab navigation instead of labels, but the icons are not showing up. Can someone help me figure out what the problem is?
I have been working on this simple mobile application. I am trying to show some icon on the bottom tab navigation instead of labels, but the icons are not showing up. Can someone help me figure out what the problem is?
Here is my code:
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { Icon } from 'react-native-elements';
// Components
import Home from './src/components/home/Home'
import EventInfo from './src/components/common/eventInfo/EventInfo'
import Profile from './src/components/profile/Profile'
import Browse from './src/components/browse/Browse'
import Activity from './src/components/activity/Activity'
import homeIcon from './src/images/home.png'
import browseIcon from './src/images/home.png'
import activityIcon from './src/images/home.png'
import profileIcon from './src/images/home.png'
import myIcon from './src/images/activity.png';
const HomeStackNavigator = createStackNavigator({
Home: {
screen: Home
},
EventInfo: {
screen: EventInfo
},
},{
initialRouteName: 'Home',
})
const BrowseStackNavigator = createStackNavigator({
Browse: {
screen: Browse
},
},{
initialRouteName: 'Browse',
})
const ActivityStackNavigator = createStackNavigator({
Activity: {
screen: Activity
},
},{
initialRouteName: 'Activity',
})
const ProfileStackNavigator = createStackNavigator({
Profile: {
screen: Profile
},
EventInfo: {
screen: EventInfo
},
},{
initialRouteName: 'Profile',
})
const AppNavigator = createBottomTabNavigator({
Home : HomeStackNavigator,
Browse: BrowseStackNavigator,
Activity: ActivityStackNavigator,
Profile : ProfileStackNavigator,
},{
initialRouteName:'Profile',
defaultNavigationOptions: ({ navigation }) => ({
tabBaricon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={myIcon}
style={{width:30, height:30}}
/>
);
},
}),
tabBarOptions: {
}
}
);
export default createAppContainer(AppNavigator);
This should fix your issue. You should also consider going through the docs here and here to understand better.
...
const AppNavigator = createBottomTabNavigator({
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ focused }) => (
<Icon
name='rowing' />
)
}
},
EventInfo: {
screen: EventInfo,
navigationOptions: {
tabBarIcon: ({ focused }) => (
<Icon
name='rowing' />
)
}
},
}, {
initialRouteName:'Profile',
});
...
Kindly let me know if this helped.
I'm learning react native and I did manage to get 2 tabbars up and running.
Now I'm trying to add a 3rd tabbar but every time I try to add a 3rd tabbar I only see 2 tabbars. I'm a little bit stuck and hope some one can help with some codeing.
import React from 'react';
import {
createMaterialTopTabNavigator,
} from 'react-navigation';
import FoldersList from '../screens/FoldersList';
const Routes = {
Home: {
screen: (props) => <FoldersList {...props} tabIndex={0}/>,
navigationOptions: {
title: 'Home'
}
},
MyNewTab: {
screen: (props) => <FoldersList {...props} tabIndex={1} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'My New Tab'
}
},
MyThirdTab: {
screen: (props) => <FoldersList {...props} tabIndex={2} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'My Third Tab'
}
}
}
const routeConfig = {
swipeEnabled: false
}
export default TabNavigator = createMaterialTopTabNavigator({
...Routes
}, routeConfig);
Your code has a syntax error and it's probably not compiling. Change the following:
export default TabNavigator = createMaterialTopTabNavigator({
to
export default createMaterialTopTabNavigator({
I'm putting together a react-native app and want tabs along the top. I am using createMaterialTopTabNavigator for the tabs and this works fine. However when I run the app on the newest iPhone simulator, the tabs bleed into the sensor bar. In trying to solve this, people suggest using the safeareaview but it doesn't seem to be any information on how to combine this with an outer tabs parent.
Any help that you guys could offer I would be greatly appreciated.
Thanks
import React from 'react';
import { createMaterialTopTabNavigator, SafeAreaView, MaterialTopTabBar } from 'react-navigation';
const SafeAreaMaterialTopTabBar = ({ ...props }) => (
<SafeAreaView>
<MaterialTopTabBar {...props} />
</SafeAreaView>
);
const options = {
tabBarComponent: props => (<SafeAreaMaterialTopTabBar {...props} />),
};
const RentalsTopTabNavigator = createMaterialTopTabNavigator({
[Routes.ROUTE_1]: {
screen: Screen1,
navigationOptions: {
title: 'Tab1',
},
},
[Routes.ROUTE_2]: {
screen: Screen2,
navigationOptions: {
title: 'Tab 2',
},
},
}, options);
Im using react-navigation to build my app, I want to have both tab and stack navigation so I did this:
const FindPage = StackNavigator({
Find: {
screen: Find,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Find',
});
const ProfilePage = StackNavigator({
Profile: {
screen: Profile,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Profile',
});
const MyApp = createBottomTabNavigator({
Find: FindPage,
Profile: ProfilePage
}
});
const auth = StackNavigator({
Login:{
screen: Login,
},
Register:{
screen: Register,
},
Main:{
screen: MyApp,
}
},{
initialRouteName: 'Main',
headerMode: 'none'
});
export default auth;
But I dont get it well. this is what the screenshot is
giving:
enter image description here
if you see the tab lost it tab icon and font when im using stacknavigation in tab navigation, this worked for me in another version of react nvigation and cant find anything on the web Please Help !
with reactnavigation2 you can achieve this like in the below code
Read more about it here https://reactnavigation.org/docs/en/bottom-tab-navigator.html
import Ionicions from "react-native-vector-icons/Ionicons";
screen: createBottomTabNavigator(
{
HomeScreen: {
screen: HomeStack,
navigationOptions: {
tabBarLabel: props => <Label name="Home" {...props} />,
tabBarIcon: props => (
<Icon name="ios-home-outline" fillname="ios-home" {...props} />
)
}
}
})