Related
I have this code for creating a drawer navigator. But I can't open my drawer through left to right slide. Can anyone please help me to solve my problem. I am new to react-native. I am using react-navigation v4 and react-navigation-drawer for the drawer navigator.
const EMBotomTabScreen = createDrawerNavigator ({
SUMMARY: {
screen : EMNavigator,
navigationOptions :{
animationEnabled : 'true',
// headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#369841',
//activeBackgroundColor : '#f2f2f2',
inactiveTintColor : 'gray',
inactiveBackgroundColor : '#adc1b8',
borderRightWidth:2,
borderRightColor:'blue',
labelStyle: {
fontSize: 13,
},
style: {
backgroundColor: '#f2f2f2',
// borderRightWidth:2,
// borderRightColor:'blue'
},
indicatorStyle: {
backgroundColor: 'red',
},
},
tabStyle: {
backgroundColor: 'green',
borderRightWidth:2,
borderRightColor:'blue'
},
indicatorStyle : {
backgroundColor : 'red'
},
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `ios-desktop`;
return <Image source={require('../assets/aaaaa.png')} size={27} color={tintColor} />;
},
}
},
DEMAND: {
screen : EMDemandNavigator,
navigationOptions : {
tabBarOptions: {
activeTintColor: '#369841',
// activeBackgroundColor : '#f2f2f2',
inactiveTintColor : 'gray',
inactiveBackgroundColor : '#adc1b8',
labelStyle: {
fontSize: 13,
},
style: {
backgroundColor: '#f2f2f2',
},
},
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `ios-cloud`;
return <Image source={require('../assets/aaaaaaa.png')} size={27} color={tintColor} />;
},
}
},
ALARM: {
screen : EMAlarmNavigator,
navigationOptions : {
animationEnabled : 'true',
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#369841',
//activeBackgroundColor : '#f2f2f2',
inactiveTintColor : 'gray',
inactiveBackgroundColor : '#adc1b8',
borderRightWidth:2,
borderRightColor:'blue',
labelStyle: {
fontSize: 13,
},
style: {
backgroundColor: '#f2f2f2',
// borderRightWidth:2,
// borderRightColor:'blue'
},
indicatorStyle: {
backgroundColor: 'red',
},
},
tabStyle: {
backgroundColor: 'green',
borderRightWidth:2,
borderRightColor:'blue'
},
indicatorStyle : {
backgroundColor : 'red'
},
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `bell-o`;
return <Icons name={iconName} size={27} color={tintColor} />;
},
}
}
You can get an idea from the below given code.
import Splash from '../Splash/Splash';
import Home from '../screens/Home';
import DrawerScreen from '../screens/DrawerScreen'
//And many more
import {createStackNavigator,
createSwitchNavigator,
createAppContainer,
createDrawerNavigator} from 'react-navigation';
const AppStack = createDrawerNavigator({
Home:Home,
},{
contentComponent: DrawerScreen,
defaultNavigationOptions: {
drawerWidth: Dimensions.get('window').width - 120,
},
});
const AppNavigator = createStackNavigator({
Splash:Splash,
Login:Login,
SignUp:SignUp },,{
defaultNavigationOptions: {
header: null,
gesturesEnabled: false
},
initialRouteName: "Splash");
const AppContainer = createAppContainer(AppNavigator);
Whenever you want to open the drawer like on click of the drawer icon. then add these line in the onPress definition.
this.props.navigation.openDrawer();
I cant seem to get the icons to align using the new react-navigation-tabs.....some icons are sitting higher than others.
Also the icons are covering the labels and Id like to have some margin between icon and label.
I tried the code style={{textAlignVertical: 'center'}} for the icons (from another question on SO) but that did not work either
Below is code
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import IconFA from 'react-native-vector-icons/FontAwesome';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';
const ProfileTabBarIcon = ({tintColor}) => (
<IconFA
name="user-circle"
size={35}
color={tintColor}
/>
);
const SearchTabBarIcon = ({tintColor}) => (
<IconMCI
name="account-search"
size={45}
color={tintColor}
/*onPress={() => {
console.log('HELP!!');
this.props.navigation.navigate('Search');
}}*/
/>
);
const MessageTabBarIcon = ({tintColor}) => (
<IconFA
name="envelope"
size={35}
color={tintColor}
/>
);
const SignedInTabNav = createMaterialTopTabNavigator(
{
Profile: {
screen: Profile,
navigationOptions: {
tabBarLabel: 'Me',
tabBarIcon: ProfileTabBarIcon,
},
},
Search: {
screen: Search,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: SearchTabBarIcon,
},
},
Message: {
screen: Message,
navigationOptions: {
tabBarLabel: 'Message',
tabBarIcon: MessageTabBarIcon,
},
},
},
{
tabBarOptions: {
showIcon: true,
upperCaseLabel: false,
activeTintColor: '#42CBC8',
inactiveTintColor: '#9A9F99',
iconStyle: {
width: 'auto',
height: 20,
},
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: '#F8F8FF',
//borderBottomWidth: 2,
borderBottomColor: '#D3D3D3',
paddingVertical: 2,
height: 60,
},
},
animationEnabled: false,
},
);
....but this is what it looks like :(
Can anyone help?
I styled the first icon and you can change it as necessary to fit your needs and then apply those to the other two icons as well. If you need to understand what is going on better go ahead and apply backgroundColor attr to different elements. Simply, I wrapped the icon component in a View and then gave that view some styling to fit the icon appropriately.
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import IconFA from 'react-native-vector-icons/FontAwesome';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import React from 'react';
import { StyleSheet, View } from 'react-native';
const ProfileTabBarIcon = ({tintColor}) => (
<View style={styles.container}>
<IconFA
style={styles.iconStyle}
name="user-circle"
size={35}
color={tintColor}
/>
</View>
);
const SearchTabBarIcon = ({tintColor}) => (
<IconMCI
name="account-search"
size={45}
color={tintColor}
/*onPress={() => {
console.log('HELP!!');
this.props.navigation.navigate('Search');
}}*/
/>
);
const MessageTabBarIcon = ({tintColor}) => (
<IconFA
name="envelope"
size={35}
color={tintColor}
/>
);
export default SignedInTabNav = createMaterialTopTabNavigator(
{
Profile: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Me',
tabBarIcon: ProfileTabBarIcon,
},
},
Search: {
screen: LinksScreen,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: SearchTabBarIcon,
},
},
Message: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Message',
tabBarIcon: MessageTabBarIcon,
},
},
},
{
tabBarOptions: {
showIcon: true,
upperCaseLabel: false,
activeTintColor: '#42CBC8',
inactiveTintColor: '#9A9F99',
labelStyle: {
fontSize: 12,
margin: 0
},
iconStyle: {
flex: 1
},
style: {
backgroundColor: '#F8F8FF',
height: 65,
borderBottomColor: '#D3D3D3',
},
},
animationEnabled: false,
},
);
const styles = StyleSheet.create({
container: {
flex: 1,
width: 50,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
}
});
I added an empty tabBarLabel in the tab screen, and included the text inside the tabBarIcon.
<Tab.Screen
name="Home"
component={MainStackNavigator}
options=
{{
tabBarLabel:"",
tabBarIcon:() =>
{
return(
<View>
<Text>Home</Text>
<Image
style={{ width:20,height:20 }}
source{require('./assets/home_white.png')}>
</Image>
</View>
)
}
}}
/>
set resizeMode in your style section
such as :
<Image
source={iconName}
style={{ width: 25, height: 25, tintColor }}
resizeMode={"contain"}
/>
I am trying to get my app to swipe between screens using react navigation. I have tried setting swipeEnabled, animationEnabled and gesturesEnabled to true but nothing has worked so far.
I am new to react navigation and thought i would give it a try.
I am using createStackNavigator so i dont know if i need to change that.
import React, { Component } from 'react';
import { createBottomTabNavigator,
createStackNavigator, createAppContainer } from 'react-navigation';
const Worcester = createStackNavigator(
{
Wrh,
},
{
initalRouteName: Wrh,
defaultNavigationOptions: {
title: 'Worcester',
headerLeft: <ActionBarImage />,
headerTintColor: '#333333',
headerTitleStyle: {
fontWeight: 'bold',
color: '#000000'
},
tabBarOptions: {
labelStyle: {
fontSize: 40
}
},
headerStyle: {
backgroundColor: '#FFFAFA',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
HeaderTitle: 'Test',
backgroundColor: '#FFDEAD',
swipeEnabled: true,
animationEnabled: true,
gesturesEnabled: true
}
});
const Alex = createStackNavigator(
{
Alx,
},
{
initalRouteName: Alx,
defaultNavigationOptions: {
title: 'Redditch',
headerLeft: <ActionBarImage />,
headerTintColor: '#333333',
headerTitleStyle: {
fontWeight: 'bold',
color: '#000000'
},
tabBarOptions: {
labelStyle: {
fontSize: 20
}
},
headerStyle: {
backgroundColor: '#FFFAFA',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
swipeEnabled: true,
animationEnabled: true,
gesturesEnabled: true
},
},
});
const TabNavigator = createBottomTabNavigator(
{
Worcester: { screen: Worcester },
Redditch: { screen: Alex },
},
{
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: '#605F60',
inactiveBackgroundColor: 'grey',
activeBackgroundColor: '#FFFAFA',
labelStyle: {
fontSize: 20,
marginTop: 0,
paddingTop: 0
},
style: {
paddingTop: 10
},
swipeEnabled: true,
animationEnabled: true,
gesturesEnabled: true
},
}
);
export default createAppContainer(TabNavigator);
You should use a topTabNavigator/bottomTabNavigator to swipe between screens on the same stack.
Then you use your stacknavigators,screens like that :
...
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
...
const someTabNavigator= createMaterialTopTabNavigator(
{
SomeScreen: {
screen:TheScreen,
navigationOptions: {
tabBarAccessibilityLabel: 'The Screen',
tabBarLabel: ({ tintColor }) => <LabelTitle tintColor={tintColor} label="The Screen" />,
},
},
SomeOtherScreen: {
screen: TheOtherScreen,
navigationOptions: {
tabBarAccessibilityLabel: 'The Other Screen',
tabBarLabel: ({ tintColor }) => <LabelTitle tintColor={tintColor} label="The Other Screen" />,
},
},
},
{
// Configs and etc.
swipeEnabled: true,
lazy: true,
optimizationsEnabled: true,
animationEnabled: true,
tabBarPosition: 'top',
tabBarOptions: {
scrollEnabled: true,
style: {
backgroundColor: colors.white,
},
inactiveTintColor: inactiveTintLabelColor,
activeTintColor: activeTintLabelColor,
indicatorStyle: {
backgroundColor: colors.primaryColor,
},
tabStyle: {
width: screen.screenWidth >= 600 ? 210 : 120,
}
},
}
)
Now I am trying to create React Native app on Expo and use React-Navigation Tab Bar but I could't.
Actually I don't get any error but this code below doesn't work.
No warning as well.
import { createBottomTabNavigator, createAppContainer } from 'react-
navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import Home from './src/Screens/Home';
import Help from './src/Screens/Help';
const App = createBottomTabNavigator(
{
Home: {
screen: Home,
defaultNavigationOptions: {
tabBarIcon: ({ tintColor }) => {
<Icon name="home" style={{ width: 25, height: 25, tintColor:
tintColor}}/>
},
title: 'Home',
},
},
Help: { screen: Help },
},
{
swipeEnabled: false, //Android用
tabBarOptions: {
activeTintColor: '#DE628D',
inactiveTintColor: '#707070',
},
},
);
export default createAppContainer(App);
the tab works fine, but if you meant, there's no icon, try this instead
navigationOptions: {
tabBarIcon: ({ tintColor, activeTintColor }) => (
<Icon name="home" size={24} color={tintColor} />)
},
Please try to implement this way. This is copy of my tabNavigator. Hope this will be helpful for you.
const TabRouter = createBottomTabNavigator(
{
HomeAfterLoginScreen: { screen: A },
ShowListAlertScreen: { screen: B },
ShowListProfessionScreen: { screen: C },
MyAccountScreen: { screen: F }
},
{
tabBarPosition: "bottom",
tabBarOptions: {
style: { backgroundColor: "#50bcb8" },
showIcon: true,
showLabel: true,
gesturesEnabled: true,
indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
inactiveTintColor: "#fff",
activeTintColor: "#fff",
tabStyle: { justifyContent: "center", alignItems: "center" }
}
});
I got it. I have solved this issue.
const App = createBottomTabNavigator(
{
Favorite: {
screen: FavoriteShops,
navigationOptions: {
tabBarLabel: 'お気に入り',
tabBarIcon: ({ tintColor }) => (
<Icon name="heart" size={25} color={tintColor} />
),
},
},
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: 'ホーム',
tabBarIcon: ({ tintColor }) => (
<Icon name="home" size={30} color={tintColor} />
),
},
},
Help: {
screen: Help,
navigationOptions: {
tabBarLabel: 'その他',
tabBarIcon: ({ tintColor }) => (
<Icon name="bars" size={25} color={tintColor} />
),
},
},
},
{
swipeEnabled: false, //Android用
tabBarOptions: {
showIcon: true,
showLabel: true,
activeTintColor: '#DE628D',
inactiveTintColor: '#707070',
style: {
width: '100%',
height: 70,
},
tabStyle: {
paddingTop: 20,
},
},
},
);
My React Native application consists of a TabNavigator that is nested inside of a StackNavigator, which is the entry point of the app's routing.
In the StackNavigator I have also a screen for About, which I want to be shown when an Icon in the header is clicked. The TabNavigator works as expected, however clicking the icon does nothing and does not produce any error. Does anyone have an idea what I am missing?
This is the code:
import { Icon } from 'native-base';
import React, { Component } from 'react';
import { createTabNavigator, createStackNavigator } from 'react-navigation';
import { View } from 'react-native';
import HomeTab from './tabs/HomeTab';
import HistoryTab from './tabs/HistoryTab';
import AboutScreen from './AboutScreen';
export default class Main extends Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'Find Phone Country',
headerStyle: {
backgroundColor: '#C62828'
},
headerMode: 'screen',
headerTintColor: '#FFFFFF',
headerTitleStyle: {
fontWeight: 'bold',
justifyContent: 'space-between',
alignSelf: 'center',
textAlign: 'center',
flex: 1,
flexGrow: 1
},
headerRight: (
<Icon
name="ios-help-circle-outline"
style={{ paddingRight: 16, color: 'white' }}
onPress={() => navigation.navigate('About')}
/>
),
headerLeft: <View />
};
};
render() {
return <RootStack />;
}
}
const MainTabNavigator = createTabNavigator(
{
Home: {
screen: HomeTab
},
History: {
screen: HistoryTab
}
},
{
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: 'bottom',
tabBarOptions: {
showIcon: true,
showLabel: true,
upperCaseLabel: false,
allowFontScaling: true,
indicatorStyle: {
opacity: 0
},
style: {
backgroundColor: '#C62828'
},
activeTintColor: '#ffffff',
inactiveTintColor: '#e0e0e0'
}
}
);
const RootStack = createStackNavigator({
Main: {
screen: MainTabNavigator,
navigationOptions: () => ({
title: 'Main',
headerBackTitle: null,
header: null
})
},
About: {
screen: AboutScreen,
navigationOptions: () => ({
title: 'About',
headerBackTitle: 'Back'
})
}
});
Thank you
Icon from native-base doesn't have a prop named onPress. Try encapsulating your icon inside a proper component for capturing the touch, like:
headerRight: (
<TouchableWithoutFeedback onPress={() => navigation.navigate('About')}>
<Icon
name="ios-help-circle-outline"
style={{ paddingRight: 16, color: 'white' }}
/>
</TouchableWithoutFeedback>
),
and don't forget, on your imports:
import { View, TouchableWithoutFeedback } from 'react-native';