I hope you can help me... I'm looking to the different discussions about it but nothing seems to work for me... It's really weird.
I want to custom the font of my app. I choose Parisienne as font for my titles. I downloaded he font into my "assets/font" folder. My App.js is here but It doesn't work as in Expo tutorial... App.js is just the door for DrawerNavigator.
Is anyone able to help me ? Thanks a lot !
import React, { Component } from "react";
import { View } from "react-native";
import styles from "./assets/Styles";
import DrawerNavigator from "./Drawer/DrawerNavigator";
import * as Font from "expo-font";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fontLoaded: false
};
}
async componentDidMount() {
await Font.loadAsync({
Parisienne: require("./assets/fonts/Parisienne/Parisienne.ttf")
});
this.setState({ fontLoaded: true });
}
render() {
if ((this.state.fontLoaded = true)) {
return <DrawerNavigator />;
} else {
return null;
}
}
}
DrawerNavigator.js :
import React from "react";
import {
Image,
Platform,
Dimensions,
StyleSheet,
Text,
View
} from "react-native";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Actus from "../Components/Actus/Actus";
import Carte from "../Components/Carte/Carte";
import Reservation from "../Components/Reservation/Reservation";
import Restaurant from "../Components/Restaurant/Restaurant";
import Vins from "../Components/Vins/Vins";
import Acces from "../Components/Acces/Acces";
import Newsletter from "../Components/Newsletter/Newsletter";
import Welcome from "../Components/Welcome/Welcome";
// import Settings from "../Components/Settings/Settings"
import MenuDrawer from "./MenuDrawer"
import Slider from "../Components/Slider/Slider";
const WIDTH = Dimensions.get("window").width;
const DrawerConfig = {
drawerWidth: WIDTH * 0.35,
contentComponent: ({ navigation }) => {return (<MenuDrawer navigation = {navigation} />)}
};
const DrawerNavigator = createDrawerNavigator(
{
Welcome: {
screen: Welcome
},
Actus: {
screen: Actus
},
Carte: {
screen: Carte
},
Reservation: {
screen: Reservation
},
Restaurant: {
screen: Restaurant
},
Vins: {
screen: Vins
},
Acces: {
screen: Acces
},
Newsletter: {
screen: Newsletter
},
Slider: {
screen: Slider
}
},
DrawerConfig
);
export default createAppContainer(DrawerNavigator);
The Error :
console.error : "fontFamily "Parisienne" is not a system font and has
not been loaded through Font.loadAsync.
I just saw you have huge error in your render function
render() {
// here shouldn't be = true
if ((this.state.fontLoaded = true)) {
return <DrawerNavigator />;
} else {
return null;
}
}
You shoud change it to
render() {
// correct way of checking bool value
if (this.state.fontLoaded) {
return <DrawerNavigator />;
} else {
return null;
}
}
The problem here is that this.state.fontLoaded = true will always return true and it will load the component before loading the font, causing the error.
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.
Hello All I am facing an issue.
I am trying to set different root in app.js file but it always open Home View. Can anyone tell me what is wrong with my code. Any help would be highly appreciable!
import React, { Component } from "react";
import { View, Text, AsyncStorage, AppRegistry } from "react-native";
import LoginContainer from "./Login/LoginContainer";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from "./Dashboard/Home";
const RootStack = createStackNavigator(
{
login: { screen: LoginContainer },
Home: { screen: Home }
},
{
initialRouteName: "login"
}
);
const AppContainer = createAppContainer(RootStack);
class Demo extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
email: ""
};
}
componentDidMount() {
const email = AsyncStorage.getItem("email").then(email => {
this.setState({
isLoading: false,
email: email
});
});
}
render() {
if (this.state.isLoading) {
return (
<View>
<Text>Loading..</Text>
</View>
);
}
if (this.props.email !== "") {
return <Home />;
} else {
return <AppContainer />;
}
}
}
export default Demo;
AppRegistry.registerComponent("Demo", () => Demo);
Instead of
export default Demo;
Use this :
export default AppContainer;
or
export default createAppContainer(RootStack);
My code is as follows:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {LoginNavigator} from './src/components/login/LoginNavigator'
import {MainNavigator} from './src/components/main/MainNavigator'
import FBSDK from 'react-native-fbsdk'
import {createSwitchNavigator} from 'react-navigation'
const { AccessToken } = FBSDK
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
accessToken: null
}
}
componentDidMount() {
AccessToken.getCurrentAccessToken()
.then((data) => {
this.setState({
accessToken: data.accessToken
})
})
.catch(error => {
console.log(error)
})
}
render() {
const Navigator = makeRootNavigator(this.state.accessToken)
return <Navigator />
}
}
const makeRootNavigator = (isLoggedIn) => {
return createSwitchNavigator(
{
LoginNavigator: {
screen: LoginNavigator
},
MainNavigator: {
screen: MainNavigator
}
},
{
initialRouteName: isLoggedIn ? "MainNavigator" : "LoginNavigator"
}
)
}
and I'm getting the error above. Since my Navigators depend on the variables created in construtor, I needed to do it via render(). Following react-native documentation on application containers didn't help.
In react-navigation v3, you must wrap makeRootNavigator with createAppContainer. Change your code to :
render() {
const Navigator = createAppContainer(makeRootNavigator(this.state.accessToken));
return <Navigator />
}
and don't forget to import createAppContainer on top of the file
import {createSwitchNavigator, createAppContainer} from 'react-navigation'
This is working solution for above problem
import { createStackNavigator } from 'react-navigation-stack'
import Login from './src/Login';
import Fruits from './src/Fruits';
import FruitZoom from './src/FruitZoom';
import {createAppContainer } from 'react-navigation';
import React from 'react';
const AppNavigator = createStackNavigator({
Login: { screen:Login},
Fruits: { screen: Fruits},
FruitZoom: { screen: FruitZoom}
}, {
initialRouteName: 'Login',
headerMode: 'none'
});
const Apps = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <Apps />;
}
}
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();
}
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './Home.js';
import EntryPoint from './src/containers/EntryPoint.js';
import Stage2 from './src/containers/Stage2.js';
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Material Management',
},
},
EntryPoint: {
screen: EntryPoint,
navigationOptions: {
headerTitle: 'Entry Point'
}
},
Stage2 : {
screen : Stage2,
navigationOptions : {
headerTitle : 'Stage 2'
}
}
});
export default RootNavigator;
The above code is my App.js
I want to wrap the redux store around it. How do i do that . Couldn't find a proper documentation for redux setup with React-native.
import { createStore,bindActionCreators } from 'redux'
import { connect, Provider } from 'react-redux'
function mapStateToProps(state) {
return state;
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
}
let Container = connect(mapStateToProps,mapDispatchToProps)(RootNavigator);
export default class APP extends Component{
render(){
return (<Provider store={store}>
<Container/>
</Provider>)
}
};