I am using react-native framework for developing my small android app.I'm trying to redirect to Home.js from index.android.js.when i run it,it showing red error message on my Emulator
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from 'App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp);
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii';
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;
Check with this import Path import Home from 'App/Component/Home';. I assume the Home.js is inside the Project(Folder) -> App (Folder) -> Component (Folder) -> Home.js. If it so then you need import like this import Home from './App/Component/Home';
Update 1:
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from './App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => mylApp);
Update 2
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii'
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;
Related
In this project I want to set the state of the userType using the data that I retrieved from the firebase db. fetching from the firebase is working correctly but I cant set the state of userType from there
I already tried
this.setState=({userType:snapshot.val()})
this.state=({userType:snapshot.val()})
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image } from 'react-native';
import * as firebase from 'firebase';
export default class Home extends React.Component {
constructor(props){
super(props)
this.state=({
userId:firebase.auth().currentUser.uid,
userType:'f'
})
}
componentDidMount() {
this.readUserData();
};
readUserData=()=> {
userstype= 'users/'+ this.state.userId + '/userType'
firebase.database().ref(userstype).on('value', function (snapshot) {
this.setState=({userType:snapshot.val()})
});
alert(this.state.userType)
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Taams</Text>
<Text style={styles.edition}>Developer's Edition</Text>
<Text style={styles.titleText}>Home</Text>
<Text>Alpha 0.0.0.1</Text>
</View>
)}}
I've update your setState method
Try below code
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image } from 'react-native';
import * as firebase from 'firebase';
export default class Home extends React.Component {
constructor(props){
super(props)
this.state=({
userId:firebase.auth().currentUser.uid,
userType:'f'
})
}
componentDidMount() {
this.readUserData();
};
readUserData=()=> {
userstype= 'users/'+ this.state.userId + '/userType'
firebase.database().ref(userstype).on('value', function (snapshot) {
this.setState({userType:snapshot.val}, () => {
alert(this.state.userType)
})
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Taams</Text>
<Text style={styles.edition}>Developer's Edition</Text>
<Text style={styles.titleText}>Home</Text>
<Text>Alpha 0.0.0.1</Text>
</View>
)}}
Hope this will work for you!
Thanks
React native android:
When I am navigating from one screen to next screen
undefined is not a function (evaluating '(0,
_reactNavigation.StackNavigator)({ SettingScreen: { screen: _settings.default }, HomeScreen: { screen: _Home.default } })')
App.js
import React, {Component} from 'react';
import { AppRegistry} from 'react-native';
import { Button } from 'react-native';
import {Navigation} from 'react-native'
import { StackNavigator } from 'react-navigation';
import Settings from './screens/Settings';
import Home from './screens/Home';
const AppNavigator = StackNavigator({
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
});
export default class App extends Component<Props> {
render() {
return (
<AppNavigator />
);
}
}
Setting.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Settings extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
<Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
</View>
)
}
};
export default Settings;
Home.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export class Home extends Component {
render() {
return (
<View>
<Text>This is the home screen</Text>
</View>
)
}
}
export default Home
Update your App.js to the below.
const App = createStackNavigator({
Home: HomeScreen,
Profile: ProfileScreen,
});
export default createAppContainer(App);
Remove the line export default Settings;
Remove the line export default Home;
Please try the updated function like below.
const App = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
});
Please, Try with the below changes.
import { createStackNavigator } from "react-navigation";
const AppNavigator = createStackNavigator(
{
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
}
)
I recreated the Drawer Navigation following this code: https://github.com/mariodev12/react-native-menu-drawer-navigator
Everything works correctly but now I do not know how to handle the native button to go back .. I would like to always return to the previous page, but if you press twice in the home exit the app.
This is my Code:
App.js
import React from 'react';
import {StackNavigator} from 'react-navigation';
import DrawerStack from './src/stacks/drawerStack';
const Navigator = StackNavigator({
drawerStack: {screen: DrawerStack}
}, {
headerMode: 'none',
initialRouteName: 'drawerStack'
})
export default Navigator
drawerStack.js
import React from 'react'
import {StackNavigator, DrawerActions} from "react-navigation";
import {Text, View, TouchableOpacity} from 'react-native';
import Home from "../components/home";
import DrawerScreen from "./drawerScreen";
const DrawerNavigation = StackNavigator({
DrawerStack: {screen: DrawerScreen}
}, {
headerMode: 'float',
navigationOptions: ({navigation}) => ({
headerStyle: {
backgroundColor: 'rgb(255,45,85)',
paddingLeft: 10,
paddingRight: 10
},
title: 'Home',
headerTintColor: 'white',
headerLeft: <View>
<TouchableOpacity
onPress={() => {
if (navigation.state.isDrawerOpen === false) {
navigation.dispatch(DrawerActions.openDrawer());
} else {
navigation.dispatch(DrawerActions.closeDrawer());
}
}}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
})
})
export default DrawerNavigation;
drawerScreen.js
import {DrawerNavigator} from 'react-navigation'
import Home from '../components/home';
import Login from '../components/login';
import Contacts from '../components/contacts';
import News from '../components/news';
const DrawerScreen = DrawerNavigator({
Home: {screen: Home},
Login: {screen: Login},
Contacts: {screen: Contacts},
News: {screen: News}
}, {
headerMode: 'none',
initialRouteName: 'Home'
})
export default DrawerScreen;
news.js "Example of one page"
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
Now, how do I insert the back button in the header instead of the classic menu (DrawerStack) for only the 'News.js' page?
In Android you have to handle back button actions by yourself with BackHandler from react-native.
First of all
import { BackHandler } from 'react-native';
in ComponentDidMount add an event listener to listen for backpress:
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
in ComponentwillUnmount make sure you remove the listener:
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
then
onBackPress = () => {
//inside here do what you want with single back button
}
Checkout this link too:
https://reactnavigation.org/docs/en/drawer-based-navigation.html
If you want to go back to previous Screen with back button drawer navigation isn't for you and you should try to use Stack Navigator.
You need create the button in your news screen too, like this.
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
}
}
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
To make better, you can create a new screen with only your custom navigation options.
Before adding this question , I have checked previous answers. Unfortunately I didn't find any fit to this. I'm a beginner in React Native and I'm following a tutorial. I'm getting this error.
index.android.js
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/components/header';
const App = () =>(
<Header/>
);
AppRegistry.registerComponent('albums' , ()=>App);
header.js
import React from 'react';
import { Text } from 'react-native';
const Header = () => {
return <Text> Albums ! </Text>;
};
export default Header;
//import lib
import React from 'react';
import {AppRegistry,View} from 'react-native';
import Header from './src/components/Header';
// create the component
const App = () => {
return (
<Header />
);
};
// render the component
AppRegistry.registerComponent('ListItem', () => App);
Header.js
import React from 'react';
import { Text } from 'react-native';
const Header = (props) => {
return(
<Text > Albums ! </Text>
);
};
export default Header;
You are providing a wrong path please correct this
import Header from './src/components/Header';
With
import Header from '../src/components/Header';
I think you need to pass in the props from your index.android.js to your header.js.In your original code,you set const Header = (props) => { in your header.js,but you didn't pass the props in your index file.
//import lib
import React from 'react';
import {AppRegistry,View} from 'react-native';
import Header from './src/components/Header';
// create the component
const App = () => {
return (
<Header headerText={'Albums'} />
);
};
// render the component
AppRegistry.registerComponent('ListItem', () => App);
header.js
import React from 'react';
import { Text } from 'react-native';
const Header = (props) => {
return(
<Text > {props.headerText} </Text>
);
};
export default Header;
I am just learning react-native and how it works with redux. I have setup a store, setup a loginContainer, loginView. This view has a button that when it is clicked, i send an action / reducer to change the text of the button too "logged in". I was hoping I could get some insight into why I see the logs for the action / reducer, but nothing ever gets sent to the loginContainer to then re-render on the loginView.
Here is the code for loginView:
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import MainView from '../MainView/mainview';
import loginReducers from '../../reducers';
import { createStore } from 'redux';
import * as loginActions from '../../actions/actions';
import { LOGIN } from '../../actions/actions';
class LoginView extends Component {
constructor(props)
{
super(props);
}
render() {
const {text, _loginPressed} = this.props;
return (
<View style={styles.container}>
<TextInput style={styles.textInput} placeholder={"Username.."}/>
<TextInput style={styles.textInput} placeholder={"Password.."}/>
<TouchableHighlight onPress={_loginPressed} style={styles.loginButton} underlayColor={'#2f9bd7'}>
<Text style={styles.loginButtonText}>{text}</Text>
</TouchableHighlight>
</View>
);
}
}
export default LoginView;
Login Container:
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import styles from './styles';
import loginReducers from '../../reducers';
import {LOGIN} from '../../actions/actions'
import LoginView from '../../components/Login/loginview';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
export default class LoginContainer extends Component {
constructor(props) {
super(props);
}
render() {
const {text} = this.props;
console.log(this.state);
return (
<LoginView
text={text}
_loginPressed={this._loginPressed.bind(this)}/>
);
}
}
const stateToProps = (state) => {
return {
state: this.state
}
}
const dispatchToProps = (dispatch) => {
return {
_loginPressed: () => {
dispatch(LOGIN())}
};
};
export default connect(stateToProps, dispatchToProps)(LoginView)
top view (setup.js):
import App from './components/App';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './store';
const store = configureStore();
function setup() {
class Root extends Component {
render() {
return (
<Provider store={store}>
<App/>
</Provider>
);
}
}
return Root;
}
module.exports = setup;
App/index.js
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import LoginContainer from '../../containers/Login/loginContainer';
import configureStore from '../../store';
class App extends Component {
render() {
return (
<Navigator
initialRoute={{name: 'LoginView', component: LoginContainer}}
renderScene={(route, navigator) => {
//creates new element with the component and navigator;]
if (route.component) {
return React.createElement(route.component, Object.assign({navigator }, {type: 'LoginView', text: 'Login'}));
}
}}
/>
);
}
}
export default App;