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;
Related
I am attempting to set up a react native navigation drawer and I have a button that toggles the drawer correctly although I am trying to set up the swipe function to also open the drawer, and this does not work at all. My drawer.js file is as follows
import React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import HomeStack from './homeStack';
import AboutStack from './aboutStack';
const Drawer = createDrawerNavigator();
export const AppNavigator = () => (
<NavigationContainer>
<Drawer.Navigator initialRouteName='Home'>
<Drawer.Screen
name='Home'
component={HomeStack}
/>
<Drawer.Screen
name='About'
component={AboutStack}
/>
</Drawer.Navigator>
</NavigationContainer>
);
export default AppNavigator;
Its imported to my App.js like this
import React from 'react';
import Navigator from './routes/drawer';
export default function App() {
return (
<Navigator />
)
}
I've already tried the suggestion in this post but have had no success.
I am running react native 0.63, react native navigation 5.9, react native navigation drawer 5.12.3 and react native gesture handler 1.10.0
For reference here is my index.js file with the updates in the previously mentioned post
/**
* #format
*/
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
I want to have both BottomTabNavigator and the default Header that is generated by createStrackNavigator.
my problem is that when I try to use both of these options one gets ignored and react-navigation docs are all based on class component and I cant work it out.
here is my navigator.js file
import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import RegisterLoginScreen from './views/RegisterLoginScreen/RegisterLoginScreen';
import ConfirmCodeScreen from './views/ConfirmCodeScreen/ConfrimCodeScreen';
import QRCodeScreen from './views/QRCodeBuy/QRCodeBuyScreen';
import ServicesScreen from './views/ServicesScreen/ServicesScreen';
import ProfileEditScreen from './views/ProfileEditScreen/ProfileEditScreen';
import TransactionScreen from './views/TransactionScreen/TransactionScreen';
const HeaderNavigator = createStackNavigator({
RegisterLogin: RegisterLoginScreen,
confirmCode: ConfirmCodeScreen,
QRBuy: QRCodeScreen,
});
const BottomTabNavigator = createBottomTabNavigator({
ProfileEdit: ProfileEditScreen,
Services: ServicesScreen,
Transactions:TransactionScreen,
QRBuy: QRCodeScreen,
});
const AppSwitch = createSwitchNavigator({
BottomTabNavigator: BottomTabNavigator,
Header:HeaderNavigator
});
export default createAppContainer(AppSwitch);
QRScreen.js
import React from 'react';
import {View, Text} from 'react-native';
const QRCodeBuyScreen = () => {
return (
<View>
<Text>This is qr screen</Text>
</View>
);
};
QRCodeBuyScreen.navigationOptions = () => ({
title:'بارکد',
headerStyle: {
backgroundColor: '#CD0448',
},
});
QRCodeBuyScreen.tabBarOptions = () => ({
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
});
export default QRCodeBuyScreen;
is there a way to have both in a screen? or any work around?
I leave the answer here I found myself. the key here is to nest the navigations inside each other and then pass one as the higher order navigation and one nested inside the higher order nav
so for example if you want something like this
headerTab{
login
confirm otp => bottomTab{
first{},
second{},
third{} // each can have their own stack of screens
}
}
you need to configure the navigator like below:
import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import LandingScreen from './views/SplashLandingScreen/SplashLanding';
import AboutScreen from './views/AboutScreen/AboutScreen';
import RegisterLoginScreen from './views/RegisterLoginScreen/RegisterLoginScreen';
import ConfirmCodeScreen from './views/ConfirmCodeScreen/ConfrimCodeScreen';
import userProfileScreen from './views/userProfileScreen/userProfileScreen';
import QRCodeScreen from './views/QRCodeBuy/QRCodeBuyScreen';
import ServicesScreen from './views/ServicesScreen/ServicesScreen';
import WalletScreen from './views/WalletScreen/Wallet';
import MyQRCodeScreen from './views/MyQRCode/MyQRCodeScreen';
import ProfileEditScreen from './views/ProfileEditScreen/ProfileEditScreen';
import TransactionScreen from './views/TransactionScreen/TransactionScreen';
import Msg from './views/Messages/Messegaes';
const StackNavigator = createStackNavigator({
Landing: LandingScreen,
RegisterLogin: RegisterLoginScreen,
confirmCode: ConfirmCodeScreen,
});
const ProfileStack = createStackNavigator({
Profile: userProfileScreen,
ProfileEdit: ProfileEditScreen,
MyQR: MyQRCodeScreen,
Wallet: WalletScreen,
About: AboutScreen,
Msg: Msg,
},);
const BottomTabNavigator = createBottomTabNavigator(
{
userProfile: ProfileStack,
Services: ServicesScreen,
Transaction: TransactionScreen,
QRBuy: QRCodeScreen,
},
{
initialRouteName: 'QRBuy',
},
);
const AppSwitchNavigator = createSwitchNavigator({
StackNavigator: StackNavigator,
BottomTabNavigator: BottomTabNavigator,
});
export default createAppContainer(AppSwitchNavigator);
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 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;
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;