I just started react-native.
When I try to use the createMaterialBottomTabNavigator from 'react-navigatioin-tabs', I got this warning msg. I have no idea which part makes trouble from the code
maybe it's misuse something..
Could you help me out..?
code below..
import { createMaterialBottomTabNavigator
} from 'react-navigation-tabs';
import Home from '../Screens/HomeScreen/Home'
import Maps from '../Screens/HomeScreen/Maps'
import My from '../Screens/HomeScreen/My'
import Subjects from '../Screens/HomeScreen/Subjects'
const BottomTabNavigation = createMaterialBottomTabNavigator(
{
Home: { screen: Home },
Maps: { screen: Maps },
My: { screen: My },
Subjects: { screen: Subjects },
},
{
initialRouteName: 'Home',
activeTintColor: '#F44336',
}
);
export default BottomTabNavigation
BottomTabNavigation.js
import React, { Component } from 'react';
import {
NativeModules,
Text,
View,
} from 'react-native';
import styles from '../../Styles/HomeScreen/styles';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
class Home extends Component {
static navigationOptions = {
tabBarColor: '#3F51B5',
tabBarIcon: <MaterialIcons
style={{ backgroundColor: 'transparent' }}
name='photo-album'
color='red'
size={24}
/>,
};
render(){
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
export default Home;
Home.js
The problem lies in tabBarIcon, which is defined as a function which returns another function. So you would need to invoke that inner function as well ( tabBarIcon('photo-album')() ). And another thing: where is your tintColor variable extracted from?
I would change your code, and do something like this:
const tabBarIcon = (name, tintColor) => (
<MaterialIcons
style={{ backgroundColor: 'transparent' }}
name={name}
color={tintColor}
size={24}
/>
);
class Home extends React.Component {
static navigationOptions = {
tabBarColor: '#3F51B5',
tabBarIcon: tabBarIcon('photo-album', 'SOME_COLOR'),
title: 'good job!',
};
render() { ... }
}
change import * as React from 'react'; to
import React, { Component } from 'react';
export default class Home extends Component {
}
Hope that help
Related
i am new in react native. i am create new basic app with navigation bar.
i have two screen.
Home
List
i want to change both navigation bar title With "Home Screen" and "List Screen"
i have one button in home Screen. when i tap on button it navigate to list screen.
my problem is i can't change the title in list screen.
App.js
import { createAppContainer } from '#react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/screens/HomeScreen';
import ListScreen from './src/screens/ListScreen';
const navigator = createStackNavigator({
Home: HomeScreen,
List: ListScreen
},{
initialRouteName: 'Home',
defaultNavigationOptions:{
title: 'Home Screen'
}
}
);
export default createAppContainer(navigator);
HomeScreen.js
import React from 'react';
import { View, Text, StyleSheet, Button, TouchableOpacity, Stack} from 'react-native';
const HomeScreen = props => {
return(
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={() => props.navigation.navigate('List')}
>
<Text>START</Text>
</TouchableOpacity>
</View>
);
};
ListScreen.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
const ListScreen = () => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>List Screen</Text>
</View>
);
};
const styles = StyleSheet.create({
});
export default ListScreen;
i am use expo-cli.
please help me.
If we put defaultNavigationOptions in createStackNavigator then it might not be possible to update the screen header component so to update the header for screens separately then we have to specify individual navigationOptions.
we can create a stack navigator, try the below way to manage headers dynamically.
const HomeNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerShown: true,
headerTitle: "Home"
}
}
})
we also can manage the header from screens as below another method:
const LoginScreen = props => {
return <View />
}
LoginScreen.navigationOptions = navData => {
return {
headerTitle: "Login",
headerTransparent: true,
headerShown: false
}
}
I assume you are using React Navigation v5, you may always refer to their code sample here.
If you are lazy to read their sample, their code snippet is as below
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'My home' }}
/>
</Stack.Navigator>
);
}
Below is a sample code from me, which you can use..
StackNavigator.js - (You can name whatever you want)
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import ScreenA from '../Containers/ScreenA';
import ScreenB from '../Containers/ScreenB';
const Stack = createStackNavigator();
const AppFlow = () => {
return (
<NavigationContainer>
<Stack.Navigator name="Test App">
<Stack.Screen
name="First"
component={ScreenA}
options={{headerShown: true, title: 'Screen A Title'}}
/>
<Stack.Screen
name="Second"
component={ScreenB}
options={{headerShown: true, title: 'Screen B Title'}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
const MainStackNavigator = () => {
return AppFlow();
};
export default MainStackNavigator;
First.JS - (You can name whatever you want) Then at this "First" screen, you may navigate to "Second" screen by the following code
<TouchableOpacity
style={styles.button}
onPress={() => props.navigation.navigate('Second')}
>
<Text>START</Text>
</TouchableOpacity>
How I can re-render a web-view running inside a app built with react native. For exemple: The cart tab need to load the same url every time I click on it.
This is the cart class:
import React, { useState } from 'react';
import { ActivityIndicator, WebView, View, Button, ScrollView,
RefreshControl,
Text, } from 'react-native';
import Config from '../config';
export default class CarrinhoScreen extends React.Component {
reload() {
this.myWebView.reload()
}
render() {
return (
<>
<View style={{ flex: 1 }}>
<WebView
source={{ uri: 'https://www.genieshopp.com/checkout/cart/' }}
userAgent='bring-app'
startInLoadingState={true}
ref={(ref) => this.myWebView = ref}
/>
</View>
</>
)
}
};
Here is where the tabNavigator is created:
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import CarrinhoScreen from '../screens/CarrinhoScreen';
const config = Platform.select({
web: { headerMode: 'screen' },
default: {},
});
const CarrinhoStack = createStackNavigator(
{
Carrinho: CarrinhoScreen
},
config
);
CarrinhoStack.navigationOptions = {
tabBarLabel: 'Carrinho',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-cart' : 'md-cart'}/>
),
};
CarrinhoStack.path = '';
const tabNavigator = createBottomTabNavigator(
{
CarrinhoStack,
},
{
backBehavior: 'history'
}
);
tabNavigator.path = '';
export default tabNavigator;
I know there is the myWebView.reload(), but I want to know how I reload it when the bottom tab is switched or when I click on the same icon.
Solved by putting resetOnBlur: CarrinhoScreen after backBehavior: history
You can put any other screen you want to reset on there.
I'm trying to style my TabNavigator using Native Base, but I always get "props.navigation.navigate is not a function" and I have no idea why.
This is my TabNavigator:
import { createBottomTabNavigator } from 'react-navigation';
import React from 'react';
import { Button, Text, Icon, Footer, FooterTab } from 'native-base';
import CameraRouter from './CameraRouter';
import Feed from '../components/Feed';
const MainRouter = createBottomTabNavigator(
{
Feed: {
screen: Feed,
},
Camera: {
screen: CameraRouter,
navigationOptions: {
tabBarVisible: false,
},
},
},
{
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
onPress={() => props.navigation.navigate('Feed')}
>
<Icon name="bowtie" />
<Text>Lucy</Text>
</Button>
<Button
vertical
onPress={() => props.navigation.navigate('CameraRouter')}
>
<Icon name="briefcase" />
<Text>Nine</Text>
</Button>
<Button
vertical
>
<Icon name="headset" />
<Text>Jade</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
);
export default MainRouter;
Which I call here:
import React, { Component } from 'react';
import { YellowBox } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import MainRouter from './config/MainRouter';
import reducers from './reducers';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
class App extends Component {
render() {
const store = createStore(reducers);
return (
<Provider store={store}>
<MainRouter />
</Provider>
);
}
}
export default App;
What is wrong with my code? I used this guide to get an idea of the usage:
http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html
Thank you guys!
if want to implement with react-navigation 3.0 with native-base 2.13 then below code will work.
import { createBottomTabNavigator,createStackNavigator,createAppContainer } from 'react-navigation';
import React from 'react';
import { Button, Text, Icon, Footer, FooterTab } from 'native-base';
import Home from './containers/Home';
import CreateCase from './containers/CreateCase';
import Profile from './containers/Profile';
import Performance from './containers/Performance';
const MainNavigator = createStackNavigator(
{
Home : {
screen: Home,
navigationOptions: {
header: null,
}
},
Create: {
screen: CreateCase,
navigationOptions: {
title: "Generate Case",
}
},
},
{
initialRouteName: "Home"
}
);
const Main = createBottomTabNavigator({
Home: { screen: MainNavigator },
Profile: { screen: Profile },
Performance: {screen: Performance}
},
{
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
onPress={() => props.navigation.navigate('Home')}
>
<Icon name="bowtie" />
<Text>Lucy</Text>
</Button>
<Button
vertical
onPress={() => props.navigation.navigate('Profile')}
>
<Icon name="briefcase" />
<Text>Nine</Text>
</Button>
<Button
vertical
>
<Icon name="headset" />
<Text>Jade</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
);
export default createAppContainer(Main);
https://reactnavigation.org/docs/en/navigation-prop.html
This doc mentions that navigation props is not available to every component by default only the screen components have it.
if you wish to access this prop in other components then you either pass this prop to the component where it is needed or you use what is called 'withNavigation'
I think the props aren't being passed through from your App component, could you try this?
class App extends Component {
render() {
const store = createStore(reducers);
return (
<Provider store={store}>
<MainRouter {...props}/>
</Provider>
);
}
}
export default App;
I found the solution to my problem: I had to add a root StackNavigator
I have created a side menu using drawer navigation. i am getting shadow overlay on the back view. I want to remove the shadow overlay.
Here is what I am getting right now. you see that I am getting a shadow overlay over my view when the drawer is open.
Here is what I want I want the view to be no shadow over the view.
please find below my code which creates a side menu using drawer navigation.
// Drawer.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import Home from './AppNavigation';
import { SideMenu } from "./../Common/UIComponents";
import { widthScale } from "./../Common/Utils/Scaling";
export default DrawerStack = DrawerNavigator({
Home: { screen: Home },
MyAccount: { screen: () => <View /> },
MessageToBigFm: { screen: () => <View /> },
MeetTheMJs: { screen: () => <View /> },
Videos: { screen: () => <View /> },
AboutUs: { screen: () => <View /> },
ContactUs: { screen: () => <View /> },
TermsAndConditions: { screen: () => <View /> }
}, {
contentComponent: SideMenu,
drawerWidth: widthScale(320),
drawerBackgroundColor: "transparent",
style: { backgroundColor: "transparent", opacity: 0, shadowOpacity: 0, shadowColor: "transparent" }
});
Side menu js file
// SideMenu.js
import React, { Component } from "react";
import { View, Text, ScrollView, Platform } from "react-native";
import { NavigationActions } from "react-navigation";
import style from "./style";
import SideMenuHeader from "./SideMenuHeader";
import { ListFlat } from "./../../UIComponents";
import SideMenuData from "./SideMenuData";
import SideMenuCell from "./SideMenuCell";
import NavigationUtil from "./../../Utils/NavigationUtil";
class SideMenu extends Component {
constructor(props) {
super(props);
this.navigateToScreenWithIndex = this.navigateToScreenWithIndex.bind(this);
this.renderItemSeperator = this.renderItemSeperator.bind(this)
}
navigateToScreenWithIndex(index) {
const routeData = SideMenuData[index];
if (!routeData) {
return null;
}
const routeKey = routeData.navigationKey;
if (routeKey === null) {
return;
}
const navigateAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: routeKey })
]
});
this.props.navigation.dispatch(navigateAction);
}
renderItemSeperator({ leadingItem }) {
if (leadingItem.key === 4) {
return <View style={style.seperator} />
} else {
return null;
}
}
render() {
return (
<View style={style.container}>
{Platform.OS === "ios" && <View style={style.statusBar} />}
<View style={style.listContainer}>
<ListFlat
horizontal={false}
renderHeader={() => <SideMenuHeader />}
data={SideMenuData}
CellComponent={SideMenuCell}
otherProps={{ onCellPress: this.navigateToScreenWithIndex }}
renderSeparator={this.renderItemSeperator}
/>
</View>
</View>
);
}
}
export default SideMenu;
I had a similar situation where React's Material UI adds a "MuiBackdrop-root" class div upon showing the Drawer. This was on web, but a mobile version of styled-components exists for React-Native--it could work.
Using the styled-components library, I used a CSS property similar to the following to hide it using "display: none". You have to use the > to directly target the element.
Something like this:
const MyDrawer = styled(Drawer)`
& > .MuiBackdrop-root {
display: none;
}
`;
Hope this helps you!
I'm using React-Navigation with create react native app with expo sdk.
This is my my app.js page code:
import React from 'react';
import Expo from 'expo';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import Home from './Components/Home';
import Settings from './Components/Settings';
class App extends React.Component {
render() {
const MainNavigation = TabNavigator({
Home: { screen: Home },
Settings: { screen: Settings },
});
return (
<View>
<MainNavigation />
</View>
);
}
}
export default App;
In app page i'm exporting two components name home and settings page
Home.js page code:
import React from 'react';
import { StyleSheet, View, Text, Platform } from'react-native';
class Home extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Home',
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0
}
};
};
render () {
return (
<View>
<Text> Home Page </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default Home;
and Setting.js page code is:
import React from 'react';
import { View, Text, Platform } from'react-native';
class Settings extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Settings',
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0
}
};
};
render () {
return (
<View>
<Text> Settings Page </Text>
</View>
);
}
}
export default Settings;
My problem is that i'm trying to use tab navigator on my app with this two pages named Home.js and Settings.js
But it is not working and after expo sdk load its open with blank page (even no error returning)! Can anyone tell me what is my mistake on this codes or what is the issue that tab navigator is not coming or showing or working!!!!