When i run the code, i get this error:
invariant violation view config not found
index.js code is :
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import main from './src/codes/main';
class app extends Component{
render(){
return <main/>;
}
}
AppRegistry.registerComponent('app', () => app);
main.js code is :
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
please help
The component names must be capitalized as a syntax requirement in React Native.
index.js
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import Main from './src/codes/main';
class App extends Component{
render(){
return <Main/>;
}
}
AppRegistry.registerComponent('App', () => App);
main.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class Main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
Related
I am trying to call a function from another class. All i need is when i press the button it should console log an output to my browser.I tried making some steps but it throws an error saying "Cannot read property of message". Here's my code
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import messageClass from "./message"
class App extends Component{
onPress = ()=>{
this.setState({FromStr: this.state.From})
this.setState({ToStr: this.state.To})
messageClass.message()
}
render(){
return (
<View style={styles.buttonStyle}>
<Button
title={"Press"}
color="#FFFFFF"
onPress={this.onPress}
/>
</View>
);
}
}
message.js
import { Component } from "react";
export default class messageClass extends Component{
message(){
console.log("Hiiiii")
}
}
Maybe you can try to use static method ?
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import messageClass from "./MessageClass"
export default class App extends Component{
onPress = ()=>{
messageClass.message()
};
render(){
return (
<View style={{width:100, height:50}}>
<Button
title={"Press"}
color="#FFFFFF"
onPress={this.onPress}
/>
</View>
);
}
}
import { Component } from "react";
export default class messageClass extends Component{
static message(){
console.log("foo")
}
}
I can't resolve this issue from my code.. When I switch to filmdetail view I got this error : Error: MobX injector: Store '...' is not available! Make sure it is provided by some Provider
Here my app.js
APP.JS
import React from 'react';
import {StyleSheet, View, Text} from "react-native";
import Navigation from './Navigation/Navigation';
import FilmStore from './Stores/FilmStore';
export default class App extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<View>
<Text>{FilmStore.test}</Text>
<Navigation filmStore={FilmStore} />
</View>
);
}
}
Here the navigation from React Navigation
Navigation.JS
import { createStackNavigator } from 'react-navigation';
// Views
import Search from '../Components/Search'
import FilmDetail from "../Components/FilmDetail";
const SearchStackNavigator = createStackNavigator({
Search: {
screen: Search,
navigationOptions: {
title: 'Rechercher'
}
},
FilmDetail: {
screen: FilmDetail,
navigationOptions: {
title: 'Détail'
}
},
});
export default SearchStackNavigator;
Here the film detail view
FilmDetail.JS
import React from 'react'
import Moment from 'moment';
import { observer, inject } from 'mobx-react';
import {StyleSheet, View, Text, ActivityIndicator, ScrollView, Image, Button} from 'react-native'
import {getDetail, getImageURI} from "../API/TMDBApi";
#inject('filmStore')
#observer
class FilmDetail extends React.Component {
constructor(props){
super(props);
console.log(props);
}
render() {
return (
<View>
</View>
)
}
}
export default FilmDetail
Looking for help :)
Thanks !
I replaced in app.js
..
import { observer } from 'mobx-react';
..
render() {
return (
<View>
<Text>{FilmStore.test}</Text>
<Navigation filmStore={FilmStore} />
</View>
);
}
by
..
import { observer, Provider } from 'mobx-react';
..
render() {
return (
<Provider filmStore={filmStore}>
<View style={styles.mainContainer}>
<Text>{filmStore.test}</Text>
<Navigation />
</View>
</Provider>
);
}
Now it works perfectly.
I'm trying to use react-native, react-navigation and typescript together to create an app. There are only two screens(HomeScreen and ConfigScreen) and one component(GoToConfigButton) in total, as follows.
HomeScreen
import React from "react";
import { NavigationScreenProps } from "react-navigation";
import { Text, View } from "react-native";
import GoToConfigButton from "./GoToConfigButton";
export class HomeScreen extends React.Component<NavigationScreenProps> {
render() {
return (
<View>
<Text>Click the following button to go to the config tab.</Text>
<GoToConfigButton/>
</View>
)
}
}
GoToConfigButton
import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";
class GoToConfigButton extends React.Component<NavigationInjectedProps> {
render() {
return <Button onPress={this.handlePress} title="Go" />;
}
private handlePress = () => {
this.props.navigation.navigate("Config");
};
}
export default withNavigation(GoToConfigButton);
The code for ConfigScreen is not given because it's not important here. Well, actually the above code works, I can go to the config screen by clicking on the button. The problem is, Typescript thinks I should provide the navigation property to GoToConfigButton manually.
<View>
<Text>Click the following button to go to the config tab.</Text>
<GoToConfigButton/> <-- Property "navigation" is missing.
</View>
How can I tell Typescript that the navigation property is given automatically by react-navigation?
You were just missing Partial<> interface wrapping your NavigationInjectedProps as it is described in this pull request where this issue was fixed.
import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";
class GoToConfigButton extends React.Component<Partial<NavigationInjectedProps>> {
render() {
return <Button onPress={this.handlePress} title="Go" />;
}
private handlePress = () => {
this.props.navigation.navigate("Config");
};
}
export default withNavigation(GoToConfigButton);
Tested with #types/react-navigation >= 2.13.0
import styles from "./styles";
import React, { PureComponent } from "react";
import { Button } from "react-native-elements";
import {
DrawerItems,
NavigationInjectedProps,
SafeAreaView,
withNavigation
} from "react-navigation";
class BurgerMenu extends PureComponent<NavigationInjectedProps> {
render() {
return (
<SafeAreaView style={styles.container} >
<Button
icon={{ name: "md-log-out", type: "ionicon" }}
title={loginStrings.logOut}
iconContainerStyle={styles.icon}
buttonStyle={styles.button}
titleStyle={styles.title}
onPress={() => this.props.navigation.navigate("LoginScreen")}
/>
</SafeAreaView>
);
}
}
export default withNavigation(BurgerMenu);
I know that the following snippet gets optimized if styles are created by Stylesheet.create() and Child extends PureComponent.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={styles.x} />
</View>
)
}
}
Does it also works with multiple styles? I'm afraid that [] literals prevent optimization.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={[styles.x, styles.y]} />
</View>
)
}
}
Or do I need to define combined style statically?
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
const childStyles = [styles.x, styles.y]
export default class Parent extends Component {
render() {
return (
<View>
<Child style={childStyles} />
</View>
)
}
}
I confirmed that array literal spoils PureComponent optimization.
Just starting out learning React Native. Going through examples on the official site. I did the Hello World example and the status bar is overlapping the text. How can I hide the status bar?
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Thanks
You can use the StatusBar component.
import React, { Component } from 'react';
import { AppRegistry, StatusBar, Text, View } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<View>
<StatusBar hidden={true} />
<Text>Hello world!</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);