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")
}
}
Related
I have 2 component parent(LoginScreen) and a child(SignupSection). Child component have onClick button. When user click button I need to fire childcall() function from the parent component and this is not working for me. I get this Error
_this.props.childcall is not a function.
(In '_this2.props.childcall()' is undefined)
I have the following code:
Parent
import React, {Component} from 'react';
import Wallpaper from './Wallpaper';
import SignupSection from './SignupSection';
export default class LoginScreen extends Component {
constructor(props) {
super(props)
}
childcall()
{
alert("hello , this call from child component");
}
render() {
return (
<Wallpaper>
<SignupSection
childcall ={this.childcall.bind(this)}
/>
</Wallpaper>
);
}
}
Child
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View, Text} from 'react-native';
export default class SignupSection extends Component {
constructor(props) {
super(props)
}
componentWillMount()
{
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text} onPress={()=>this.props.childcall()}>Create Account</Text>
<Text style={styles.text}>Forgot Password?</Text>
</View>
);
}
}
It doesn't work because you are rendering the function instead of passing it as a prop.
You are passing inside children prop
<SignupSection>
childcall={this.childcall}
</SignupSection>
change it to
<SignupSection childcall={this.childcall} />
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);
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>
);
};
}
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);