What could be the reason that content in Tab is not displayed?
I Receive a blank white box.
When I have only export const TopNavTabs without the class App it works but I need this as a component.
import React, { Component } from 'react'
import { Platform, View } from 'react-native'
import { TabNavigator } from 'react-navigation'
import General from './components/tabs/General'
import Help from './components/tabs/Help'
import Tips from './components/tabs/Tips'
export const TopNavTabs = TabNavigator({
General: { screen: General },
Help: { screen: Help },
Tips: { screen: Tips },
},
{
animationEnabled:true
});
export default class App extends Component{
render(){
return(
<View>
<TopNavTabs />
</View>
)
}
}
index.js
import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';
import App from './src/App';
export default class Test extends Component {
render() {
return (
<App />
);
}
}
AppRegistry.registerComponent('test', () => Test);
Related
I have created customized sidebar and have 5 to 6 screens. I am using NativeBase and want to open Sidebar with DrawerNavigator option but when I applied following code it was getting issue.
Drawer Navigator code
import React, { Component } from "react";
import WelcomeScreen from './screens/WelcomeScreen';
import ContactScreen from './screens/ContactScreen';
import DepartmentScreen from './screens/DepartmentScreen';
import EmailServiceScreen from './screens/EmailServiceScreen';
import MoreScreen from './screens/MoreScreen';
import SideBar from "./SideBar.js";
import { DrawerNavigator } from "react-navigation";
const SidebarNavigator = DrawerNavigator(
{
Home: { screen: WelcomeScreen },
Contact: { screen: ContactScreen },
Department: { screen: DepartmentScreen },
EmailService: { screen: EmailServiceScreen },
More: { screen: MoreScreen }
},
{
contentComponent: props => <SideBar {...props} />
}
);
export default SidebarNavigator;
Calling them in APP.Js as propos. See following code from APP.JS
import SidebarNavigator from './src/SidebarNavigator';
class App extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={createStore(reducers)}>
<Root>
<Router /> // It's a stack navigator which is working fine
<SidebarNavigator />
</Root>
</Provider>
);
}
}
console.disableYellowBox = true;
export default App;
The error here is that you are using DrawerNavigation instead of createDrawerNavigator.
Just do those changes and you should be good
import { createDrawerNavigator } from "react-navigation";
...
const SidebarNavigator = createDrawerNavigator( ... )
Source: https://reactnavigation.org/docs/en/drawer-navigator.html
You can try this code
You can use createDrawerNavigator and createAppContainer
import { createDrawerNavigator, createAppContainer } from "react-navigation";
...
const SidebarNavigator = createDrawerNavigator( ... )
const AppContainer = createAppContainer(SidebarNavigator);
// Now AppContainer is the main component for React to render
export default AppContainer;
createStackNavigator is giving error :
null is not an object (evaluating 't(r(d[1])).default.direction')
Not able to get is this error because of an import statement or anything else. Any help will be appreciated
My code for app.js is below:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './screens/Login';
import Home from './screens/Home';
const AppNavigator = createStackNavigator({
LoginScreen: { screen: Login },
HomeScreen: { screen: Home }
});
export default class App extends Component {
render() {
return (
<AppNavigator />
);
}
}
getting error:
Don't forget to:
import { createAppContainer } from 'react-navigation'
and wrap the StackNav with it like:
const AppContainer = createAppContainer(AppNavigator)
In your App Component instead of <AppNavigator/>, set <AppContainer/>.
My problem is That I want to access a Container in a component but it seems to be undefined.
undefined alert image
I am using Unstated and as you can see this is my code in the container file (login-container.js):
import { Container } from 'unstated'
class LoginContainer extends Container {
constructor(props){
super(props)
this.state = {
stepNumber: 0,
}
}
}
export default new LoginContainer()
And this is app.js:
import React, { Component } from 'react'
import { createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { Provider } from 'unstated'
import LoginContainer from './containers/login-container'
import Home from './screens/home'
import Splash from './screens/splash'
import Login from './screens/login'
import Intro from './screens/intro'
export default class App extends Component {
render() {
return (
<Provider inject={[LoginContainer]}>
<AuthStack/>
</Provider>
)
}
}
const SplashStack = createStackNavigator(...)
const AppStack = createStackNavigator(...)
const AuthStack = createStackNavigator(
{
Intro: { screen: Intro},
Login: { screen: Login}
},
{
headerMode: "none",
initialRouteName: "Intro"
}
)
const SwitchNavigator = createSwitchNavigator(...)
And this would be login.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Login extends Component {
constructor(props){
super(props)
}
render() {
// const { state: {stepNumber} } = this.props.loginContainer
alert(this.props.LoginContainer)
return (
<View>
<Text> someText </Text>
</View>
)
}
}
I previously tried to use Subscribe component to inject the container to my app but I got the same thing I am getting here.
Using
- react-native 0.58.6
- react-navigation 2.13.0 (due to some bugs in v3)
- unstated 2.1.1
What's really great about Unstated is how simple it is to implement.
Just wrap your render component in Unstated's <Subscribe to></Subscribe> tags and you're good to go. Whenever you setState() in the Container, all Components that Subscribe to it get re-rendered with the Container's updated state property values available to them.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';
import LoginContainer from './containers/login-container';
export default class Login extends Component {
constructor(props){
super(props)
}
render() {
return (
<Subscribe to={[LoginContainer, AnotherContainer]}>
{(container, another) => (
<View>
<Text>{container.state.stepNumber}</Text>
</View>
})
</Subscribe>
);
}
}
UPDATE: Or do it in this HOC way. After creating this:
WithUnstated.js
import React, { PureComponent } from "react";
import { Subscribe } from "unstated";
import DefaultStore from "../store/DefaultStore";
const withUnstated = (
WrappedComponent,
Stores = [DefaultStore],
navigationOptions
) =>
class extends PureComponent {
static navigationOptions = navigationOptions;
render() {
return (
<Subscribe to={Stores}>
{(...stores) => {
const allStores = stores.reduce(
(acc, v) => ({ ...acc, [v.displayName]: { ...v } }),
{}
);
return <WrappedComponent {...allStores} {...this.props} />;
}}
</Subscribe>
);
}
};
export default withUnstated;
Then wrap your component like so:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';
import LoginContainer from './containers/login-container';
import AnotherContainer from './containers/another-container';
class Login extends Component {
constructor(props){
super(props)
}
render() {
const {LoginContainer: container} = this.props;
return (
<View>
<Text>{container.state.stepNumber}</Text>
</View>
);
}
}
export default withUnstated(Login, [LoginContainer, AnotherContainer])
While writing a demo stacknavigation app I am encountering an error on semulator stating
" Route 'Main' should declare a screen. For example:
import MyScreen from './MyScreen';
...
Main: {
screen: MyScreen,
}
C:\RN\blog\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:23:8
validateRouteConfigMap
C:\RN\blog\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:18:21
default
C:\RN\blog\node_modules\react-navigation\src\routers\StackRouter.js:47:25
default
C:\RN\blog\node_modules\react-navigation\src\navigators\StackNavigator.js:51:29
......
"
Why this is happening I don't know can anybody has any idea ?
The remain code are below
import React from 'react';
import { Text, View } from 'react-native';
import MainScreen from './MainScreen';
import RegisterScreen from './RegisterScreen';
import { StackNavigator } from 'react-navigation';
const ScreenList = StackNavigator({
Main: {
screen: MainScreen,
},
Register: {
screen: RegisterScreen,
},
});
export default ScreenList;
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import MainScreen from './src/screens/MainScreen';
import ScreenList from './src/screens/ScreenList';
export default class App extends Component<{}> {
render() {
return (
<View>
<ScreenList />
</View>
);
}
}
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Card, Button, CardSection } from '../components/common/Index';
import Login from '../components/Login';
import ScreenList from './ScreenList';
export default class MainScreen extends Component {
render() {
return (
<View>
<Card>
<Login />
</Card>
<Text>----------------------------------</Text>
<Card>
<CardSection>
<Button>Register</Button>
</CardSection>
</Card>
</View>
);
}
}
Maybe its an issue with imports. Try removing
import MainScreen from './src/screens/MainScreen';
from App.js or wherever it is. It should work.
A guess, maybe you have not exported MainScreen Component.It will help if you can share the mainScreen file code.
I have the following React Native App set up and I'm trying to use the Toast component from Native Base:
app.js
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import { Root } from "native-base";
import {StackNavigator} from 'react-navigation';
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
export default class myApp extends Component {
render() {
return (
<Root>
<AppNavigator />
</Root>
);
}
}
const Screens = StackNavigator({
Main: {screen: MainView},
Config: {screen: ConfigView}
})
AppRegistry.registerComponent('myApp', () => Screens);
MainView.js (simplified)
import React, {Component} from 'react';
import { StyleProvider, Card, CardItem, Left, Right, Body, Icon, Toast, Header, Fab } from 'native-base';
import {StackNavigator} from 'react-navigation';
export default class MainView extends Component {
....
showError = (msg, err) => {
console.log("[ERROR]", err);
Toast.show({
text: msg,
position: this.state.toastPosition,
buttonText: this.state.toastErrorBtn
});
}
....
}
I've tried several ways, but keep getting this error:
Your app should start with rendering myApp component, like this:
AppRegistry.registerComponent('myApp', () => myApp);.
Inside myApp you should render your app navigator which is Screens not AppNavigator, that is how you named it.
This is how your app.js should look:
import React, { Component } from 'react';
import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
import {AppRegistry} from 'react-native';
export default class myApp extends Component {
render() {
return (
<Root>
<Screens />
</Root>
);
}
}
const Screens = StackNavigator({
Main: {screen: MainView},
Config: {screen: ConfigView}
})
AppRegistry.registerComponent('myApp', () => myApp);
We should use Root component
import { Root } from "native-base";
<Root>
// Screen
</Root>