I'm building a react admin app but there seems to be a problem with the translation, I only see translation keys for standard elements
Translation keys
import React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import fakeDataProvider from 'ra-data-fakerest';
const fakeData = {
region: [
{ name: "A" }, { name: "B" }
]
}
const dataProvider = fakeDataProvider({ region: fakeData.region }, true);
class App2 extends React.Component<{}, {}> {
render() {
return <Admin dataProvider={dataProvider}>
<Resource name="region" list={ListGuesser} />
</Admin>
}
}
export default App2;
Related
I am using WIX-React-Native-Navigation and while pushing a component in the stack I am getting this error.
Error
One thing to say, I am using Viro-React ARScene Navigation (Scene Navigation) in WIX-React-Native-Navigation.
Here's my code
index.js
import { AppRegistry } from 'react-native';
var OpenDoor = require('./app/base')
import Stack from './app/navigation';
import { Navigation } from "react-native-navigation";
AppRegistry.registerComponent('ViroSample', () => OpenDoor);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: Stack
}
});
});
navigation.js
import { Navigation } from "react-native-navigation";
import Base from './base';
import Menu from './components/Menu/menu';
Navigation.registerComponent('Base', () => Base);
Navigation.registerComponent('Menu', () => Menu);
const Stack = {
children: [{
component: {
name: 'Base'
},
}
]
};
export default Stack;
base.js
import React, {Component} from 'react';
import {
Alert,
View
} from 'react-native';
import {ViroARSceneNavigator} from 'react-viro';
import { Navigation } from 'react-native-navigation';
import APIKeys from './index';
import Camera from './components/Camera/camera';
import MenuButton from './components/Menu/menu_button';
class Base extends Component {
constructor(props) {
super(props);
this.navigateScreen = this.navigateScreen.bind(this);
}
navigateScreen(location) {
Navigation.push(this.props.componentId, {
component: {
name: location
}
});
}
render() {
return(
<View style={styles.container}>
<ViroARSceneNavigator
initialScene = {{
scene: Camera
}}
apiKey = {APIKeys.ViroReact}
style = {styles.ar_scene}
/>
<MenuButton navigation={this.navigateScreen}/>
</View>
);
}
};
const styles = {
container: {
flex: 1
}
};
export default Base;
module.exports = Base;
Correct me, If I am wrong somewhere.
What I am doing is, creating an application where users can decorate home virtually with the help of Augmented Reality. The mobile app is created on React-Native while the library used for augmented reality is Viro-React.
So, When I want to navigate from One Screen to another, then while pushing component in the stack I am getting this error.
Thanks.
I just updated RNN to version 2 and I'm stuck with my first push
I get an error :
undefined is not an object (evaluating '_reactNativeNavigation.default.push')
other answers on stack overflow didn't help me much so far
I guess my issue is related to this.props.componentId but I couldn't find any help in the official doc as well.
or perhaps it's coming from a wrong call to the stack since I never use the id property set in App.js
I'm also wondering if I have to provide an id manually for each screen or, as it is said in the doc it will be done automatically by RNN
if someone can guide me, I'm a bit lost -_-
my code :
App.js
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import LandingScreen from './src/screens/Landing/Landing';
import AuthScreen from './src/screens/Auth/Auth';
import configureStore from './src/store/configureStore';
import strings from './src/global/strings';
const store = configureStore();
// Landing
Navigation.registerComponentWithRedux(strings.screens.screenLanding, () => LandingScreen, Provider, store);
// Auth
Navigation.registerComponentWithRedux(strings.screens.screenAuth, () => AuthScreen, Provider, store);
// Start App
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack:{
id:"appStack",
children: [
{
component: {
name: strings.screens.screenLanding,
options: {
topBar:{
title:{
text:"Welcome"
}
}
}
}
}
]
},
}
});
});
Landing.js
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import Navigation from 'react-native-navigation';
import strings from '../../global/strings';
class Landing extends Component {
goToScreen = (screenName) => {
Navigation.push(this.props.componentId, {
component: {
name: screenName
}
})
}
render() {
return (
<View>
<Button
title="Connexion"
onPress={() => this.goToScreen(strings.screens.screenAuth.toString())}
/>
</View>
)
}
}
export default Landing;
as indicated by jinshin1013 in RNN issue tracker In Landing.js,
I should have import Navigation like this :
import { Navigation } from 'react-native-navigation
Hi i want to create a component by using a createDrawerNavigator, and want to add it all screens could you help me.
In the below example don't copy all the syntax understand the concept from my explanation I have configured redux and many other imports you may not need so configure and include content in below files as you need.
File name - BurgerMenu.js
import React, { Component } from "react";
import SideBar from "./SideBar.js";
import News from "../../Containers/News"; // import your screens instead
import Copyright from '../../Containers/Gallery' // import your screens instead
import { DrawerNavigator } from "react-navigation";
const BurgerMenu = DrawerNavigator(
{
News: { screen: News },
RulesOfUse: { screen: RulesOfUse },
Copyright: { screen: Copyright }
},
{
contentComponent: props => <SideBar {...props} />
}
);
export default BurgerMenu;
File name - SideBar.js
In this file specify the layout, any actions like navigation, api call etc of drawer as you want which is imported to above BurgerMenu.js file
/*
SideBar.js
Component used to render contents of SideBar
*/
import React from 'react';
import { View, Modal, Text, Linking } from 'react-native';
const {
modalBackground,
topContentStyle,
bottomContentStyle
} = styles;
class SideBar extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
}
render() {
return (
<View
elevation={5}
style={modalBackground}
>
</View>
);
}
}
export default SideBar;
And in the App.js import Burgermenu.js to StackNavigator
import React, { Component } from 'react'
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import Splash from './src/App/Containers/Splash';
import Login from './src/App/Containers/Login';
import InformationPage from './src/App/Containers/Gallery'
import BurgerMenu from './src/App/Components/BurgerMenu/index'
import configureStore from './src/RNRedux/ConfigureStore';
// Manifest of possible screens
const PrimaryNav = StackNavigator({
Splash: { screen: Splash },
Login: { screen: Login },
Home: { screen: BurgerMenu },
InformationPage: { screen: InformationPage }
}, {
// Default config for all screens
headerMode: 'none',
initialRouteName: 'Splash',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
channelId: ""
};
this.store = configureStore();
}
componentDidMount() {
}
componentWillMount() {
}
render() {
return (
<Provider store={this.store}>
<PrimaryNav />
</Provider>
);
}
}
Just open the burger menu from any the screens imported to BurgerMenu.js
In my example you can open it from news.js and gallery.js which are imported to BurgerMenu.js.
Just use below functions for open and close
openBurgerMenu() {
this.props.navigation.openDrawer();
}
closeBurgerMenu() {
this.props.navigation.closeDrawer();
}
I've just installed react-native-navigation using the installation guides provided on https://wix.github.io/react-native-navigation/#/installation-ios and the usage guide https://wix.github.io/react-native-navigation/#/usage.
I've followed these and checked out multiple example apps, but I cannot figure out why my screens won't register.
The error I receive is: console.error: "Navigation: project.testscreen registration result is 'undefined'".
The registerScreens is called and the registration is completed, but it seems like the registration results to undefined.
index.js
import App from './src/app'
const app = new App();
app.js
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens();
Navigation.startTabBasedApp({
tabs: [{
label: 'Test',
screen: 'project.testscreen',
title: 'Test',
}]
});
screens.js
import { Navigation } from 'react-native-navigation'
import { TestScreen } from './components/testScreen'
export function registerScreens() {
Navigation.registerComponent('project.testscreen', () => TestScreen)
}
testScreen.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class TestScreen extends Component {
render() {
return (
<View>
<Text>Hi</Text>
</View>
)
}
}
export default TestScreen
react-native: 0.55.4
react-native-navigation: latest (1.1.479)
change
import { TestScreen } from './testScreen'
to
import TestScreen from './testScreen'
Because TestScreen exports as default
I'm following a tutorial for authenticating react routes and I can now allow users to access a route if authenticated is true.
routes.js
import React from 'react';
import { Route, IndexRoute,Redirect } from 'react-router';
import App from './app';
import requireAuth from '../Authentication/require_authentication';
import Dashboard from '../Dashboard';
import Managers from '../Managers';
import Guests from '../Guests';
import Login from '../Login';
export default (
<Route path="/" component={App}>
<IndexRoute component={requireAuth(Dashboard)} />
<Route path="dashboard" component={requireAuth(Dashboard)} />
<Route path="advertisers" component={requireAuth(Managers)} />
<Route path="properties" component={requireAuth(Guests)}/>
<Route path="login" component={Login} />
</Route>
);
require_authentication.js
/*HIGHER ORDER COMPONENT */
import React, { Component } from 'react';
import { connect } from 'react-redux';
export default function(ComposedComponent) {
class Authentication extends Component {
static contextTypes = {
router: React.PropTypes.object
}
componentWillMount() {
if (!this.props.authenticated) {
this.context.router.push('/login');
}
}
componentWillUpdate(nextProps) {
if (!nextProps.authenticated) {
this.context.router.push('/login');
}
}
render() {
return <ComposedComponent {...this.props} />
}
}
function mapStateToProps(state) {
return { authenticated: state.auth.authenticated };
}
return connect(mapStateToProps)(Authentication);
}
When a user logs in they have this as the state in the localStorage:
userId: 1,
userName:"Bob",
roleName:"Manager"
I'm still fairly new to composed components but I'm wondering if there's a way to not only authenticate but prevent users with specific roles from accessing routes. Eg. Managers should only be able to see the Manager route and Dashboard. Guests can only see Dashboard and Guests.
It's definitely possible, you simply need to add a condition after checking authorization that would check if user's role allows to see the route it's trying to render, and if not it may redirect the user to a default route or a page that displays an error message.
Following the concept of your Higher Order Component in require_authentication.js, here's a modified version that should do what you want:
const checkPermissions = (userRole, router) => {
if (userRole === "Manager") {
if (!(router.isActive('/dashboard') ||
router.isActive('/manager'))) {
return false;
}
}
return true;
};
export default function(ComposedComponent) {
class Authentication extends Component {
static contextTypes = {
router: React.PropTypes.object
}
componentWillMount() {
if (!this.props.authenticated) {
this.context.router.push('/login');
} else if (!checkPermissions(this.props.user.role, this.context.router)) {
this.context.router.push('/');
}
}
componentWillUpdate(nextProps) {
if (!nextProps.authenticated) {
this.context.router.push('/login');
} else if (!checkPermissions(this.props.user.role, this.context.router)) {
this.context.router.push('/');
}
}
render() {
return <ComposedComponent {...this.props} />
}
}
function mapStateToProps(state) {
return {
authenticated: state.auth.authenticated,
user: state.auth.user
};
}
return connect(mapStateToProps)(Authentication);
}
An implementation of the checkPermission function may be different and more configurable, the one from the example is just to demonstrate the idea.
I assumed that you have an authorized user data in your state inside the auth object. It may be changed depend on where user's data is stored in fact.