I'm trying to import my navigation (with routing) and my main.js to index.ios.js as such:
import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js';
This just renders the last named Component (so only shows my navigation), I couldn't find anything on the subject and I've tried importing the nav into my main.js. Does anyone have documentation on where to find the solution or does anyone know the solution?
Navigation.js (I know this won't really do anything yet I just want it to show both views):
import React, { Component } from 'react';
import { AppRegistry, Text, Navigator, TouchableHighlight } from 'react-native';
import Style from '../Style';
console.log('doing this');
export default class NavAllDay extends Component {
render() {
const routes = [
{title: 'First Scene', index: 0},
{title: 'Second Scene', index: 1},
];
return (
<Navigator
style={Style.header}
initialRoute={routes[0]}
renderScene={(route, navigator) =>
<TouchableHighlight onPress={() => {
if (route.index === 0) {
navigator.push(routes[1]);
} else {
navigator.pop();
}
}}>
<Text>Hello {route.title}!</Text>
</TouchableHighlight>
}
navigationBar={
<Navigator.NavigationBar
routeMapper={{
LeftButton: (route, navigator, index, navState) =>
{
if (route.index === 0) {
return null;
} else {
return (
<TouchableHighlight onPress={() => navigator.pop()}>
<Text>Back</Text>
</TouchableHighlight>
);
}
},
RightButton: (route, navigator, index, navState) =>
{
if (route.index === 1) {
return null;
} else {
return (
<TouchableHighlight onPress={() => navigator.push(routes[1])}>
<Text>Done</Text>
</TouchableHighlight>
);
}
},
Title: (route, navigator, index, navState) =>
{ return (<Text>Awesome Nav Bar</Text>); },
}}
style={Style.header}
/>
}
/>
);
}
}
AppRegistry.registerComponent('PRSNT_demo', () => NavAllDay)
Main.js:
import React, { Component } from 'react';
import Style from './Style';
import {
AppRegistry,
Text,
View
} from 'react-native';
export default class PRSNT_demo extends Component {
render() {
return (
<View style={Style.container}>
<View style={Style.invites}>
<Text style={Style.presentListText}> Section</Text>
</View>
<View style={Style.presentList}>
<Text style={Style.presentListText}>
List
</Text>
</View>
</View>
);
}
}
AppRegistry.registerComponent('PRSNT_demo', () => PRSNT_demo);
AppRegistry.registerComponent('PRSNT_demo', () => PRSNT_demo); this line should only exist in you index.ios.js and index.android.js file.
Also, to import files you just place these at the top of the file you want to use them:
import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js'
if you wanted to use them in your index.ios.js file you need to do something like this:
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
import PRSNT_demo from './src/main.js'
import NavAllDay from './src/components/navigation.js'
export default class Main extends Component {
render() {
return (
<View>
<PRSNT_demo />
<NavAllDay />
</View>
)
}
}
AppRegistry.registerComponent('PRSNT_demo', () => Main);
The AppRegistry is saying which component you want initially rendered.
Related
I'm kind of sure that the export-import is well done, because I use export default.
It was a working code when I had both the sign-up and log-in forms in the same page.
Now I want to navigate to two different pages through two buttons, and it gives me this error in loginIndex.js, that is the file in which I created the NavigationStack.
The fact is that it worked perfectly before adding the two new files to the stack, but now it tells me that 'Welcome' is not a React component.
Dependencies
src
/components
/screens
/welcome
/index.js
/sign_up
/SignUp.js
/login
/login.js
/routes
/loginStack.js
index.js
// #flow
import React, { Component } from 'react';
import {
TouchableOpacity,
StatusBar,
Animated,
FlatList,
Image,
View,
Text,
YellowBox,
} from 'react-native';
import Loading from '~/components/common/Loading';
import {withNavigation} from 'react-navigation';
import Navigation from '~/routes/loginStack'
import ROUTE_NAMES from '~/routes/loginStack'
const Welcome = ({navigation}) => {
onClickLoginButton = (): void => {
const navigation = this.props.navigation
navigation.navigate(ROUTE_NAMES.LOGIN)
};
onClickSignUpButton = (): void => {
const navigation = this.props.navigation
navigation.navigate(ROUTE_NAMES.SIGNUP)
};
onLoadBackgroundImage = (): void => {
this.setState({
isBackgroundImageLoaded: true,
});
};
return (
<Container>
<Navigation/>
<Loading />
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
translucent
animated
/>
<BackgroundImage
onLoad={this.onLoadBackgroundImage}
/>
{isBackgroundImageLoaded && (
<Wrapper>
<TitleWrapper>
<Title></Title>
</TitleWrapper>
<NavigationTitleWrapper>
<TouchableOpacity
onPress={this.onClickLoginButton}
>
<Animated.Text
>
Accedi
</Animated.Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onClickSignUpButton}
>
<Animated.Text>
Registrati
</Animated.Text>
</TouchableOpacity>
</NavigationTitleWrapper>
</Wrapper>
)}
</Container>
);
}
export default withNavigation(Welcome);
loginStack.js
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import Welcome from '../components/screens/welcome/index';
import MainStack from './mainStack';
import Login from '~/components/screens/log_in/Login';
import SignUp from '~/components/screens/sign_up/SignUp';
export const ROUTE_NAMES = {
LOGIN: 'LOGIN',
MAIN_STACK: 'MAIN_STACK',
WELCOME: 'WELCOME',
SIGNUP: 'SIGNUP',
};
const LoginStack = createSwitchNavigator(
{
[ROUTE_NAMES.WELCOME]: {
screen: Welcome,
},
[ROUTE_NAMES.LOGIN]: {
screen: True_login,
},
[ROUTE_NAMES.SIGNUP]: {
screen: SignUp,
},
[ROUTE_NAMES.MAIN_STACK]: {
screen: MainStack,
},
},
{
initialRouteName: ROUTE_NAMES.SPLASH,
},
);
const AppContainer = createAppContainer(LoginStack);
export default AppContainer;
You are using 'setState' but using functional comoponents.
You should use hooks instead..
In addition you use 'this' but again, relevant for classes..
You are adding typescript annotations but using javascript..
Try to change the index file lto this:
import React from 'react';
import {
TouchableOpacity,
StatusBar,
Animated
} from 'react-native';
import Loading from '~/components/common/Loading';
import { withNavigation } from 'react-navigation';
import Navigation from '~/routes/loginStack'
import ROUTE_NAMES from '~/routes/loginStack'
const Welcome = ({ navigation }) => {
const [isBackgroundImageLoaded, setIsBackgroundImageLoaded] = React.useState(false);
onClickLoginButton = () => {
navigation.navigate(ROUTE_NAMES.LOGIN)
};
onClickSignUpButton = () => {
navigation.navigate(ROUTE_NAMES.SIGNUP)
};
onLoadBackgroundImage = () => {
setIsBackgroundImageLoaded(true);
};
return (
<Container>
<Navigation />
<Loading />
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
translucent
animated
/>
<BackgroundImage
onLoad={onLoadBackgroundImage}
/>
{isBackgroundImageLoaded && (
<Wrapper>
<TitleWrapper>
<Title></Title>
</TitleWrapper>
<NavigationTitleWrapper>
<TouchableOpacity
onPress={onClickLoginButton}
>
<Animated.Text
>
Accedi
</Animated.Text>
</TouchableOpacity>
<TouchableOpacity
onPress={onClickSignUpButton}
>
<Animated.Text>
Registrati
</Animated.Text>
</TouchableOpacity>
</NavigationTitleWrapper>
</Wrapper>
)}
</Container>
);
}
export default withNavigation(Welcome);
I am trying to access the props.route.params.data information from the react navigation route prop, however when I try to output it on the screen it just says TypeError: undefined is not an object(evaluating props.routes.params). I know I have correctly followed the path to that data object because I console.log it on the console and it outputs that data. However when I want to put put it on the user interface it gives me that error. Been searchong online but no one has the same issue, maybe because the way to get the params using react stack navigator v5 is by route.params, and v5 came outa couple of months ago. So I will post my code below along with the console.log screen, the error message, and also the object that I am picking from. Thank you!
// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import About from "./screens/About";
import Home from "./screens/Home";
import PokeDetails from "./screens/PokeDetails"
import { createStackNavigator } from '#react-navigation/stack';
const App =()=> {
const Stack = createStackNavigator();
return(
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home}/>
<Stack.Screen name="PokeDetails" component={PokeDetails}/>
<Stack.Screen name="About" component={About}/>
</Stack.Navigator>
</NavigationContainer>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
}
})
export default App;
// Home.js
import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
import { useRoute } from '#react-navigation/native';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.then((res)=> res.json())
.then((response)=> {
this.setState({
isLoading: false,
dataSource: response.results,
})
console.log("RESPONSE",response)
console.log("RESPONSE.RESSSULTS",response.results)
})
}
render() {
const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
return(
<View style={GlobalStyles.container}>
<View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
<FlatList
keyExtractor={(item, index) => item.name}
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails',
{data:"hello"})}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
</TouchableOpacity>
}/>
<Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
</View>
)
}
}
export default Home;
// PokeDetails.js
import React from "react";
import { View, Text , Image, Button} from "react-native";
import {GlobalStyles} from "../styles/GlobalStyles";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '#react-navigation/native';
const PokeDetails =(props)=> {
console.log(props)
console.log(props.route.params.data, "PROPSSSSSSSSSSS");
return(
<View style={GlobalStyles.container}>
<Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.route.params.data}</Text>
</View>
)
}
export default PokeDetails;
You are getting the following error because you are pokedetails in your home screen, you can get the data props only if you navigate to pokedetails screen, the thing you can do something like this:
change your Home.js like this:
import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import PokeDetails from "./Pokedetails";
import { useRoute } from '#react-navigation/native';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
}
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
.then((res)=> res.json())
.then((response)=> {
this.setState({
isLoading: false,
dataSource: response.results,
})
console.log("RESPONSE",response)
console.log("RESPONSE.RESSSULTS",response.results)
})
}
render() {
const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
return(
<View>
<View>{showIndicator}</View>
<FlatList
keyExtractor={(item, index) => item.name}
numColumns={1}
data={this.state.dataSource}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails',
{data:"hello", imageUrl:`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
<PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
</TouchableOpacity>
}/>
<Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
</View>
)
}
}
export default Home;
Here iam just passing imageUrl also for reference purpose.
change your pokedetails.js some thing like this:
import React from "react";
import { View, Text , Image, Button} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useRoute } from '#react-navigation/native';
const PokeDetails =(props)=> {
console.log("props is",props);
if(props.navigation == undefined)
{
return(
<View>
<Image source={{uri: props.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.name}</Text>
</View>
)
}
else{
return(
<View>
<Image source={{uri: props.route.params.imageUrl}} style={{height: 50, width: 50}}/>
<Text>{props.route.params.data}</Text>
</View>
)
}
}
export default PokeDetails;
Here iam just adding a if condition to check whether the screen is loaded is navigated from another screen.
when the Homescreen loaded it will be something like this:
On clicking bulbassor you will be navigating to the pokedetails screen where here iam showing the details you are sending through navigation:
Hope this helps!
How to show Activity indicator 5 seconds before "Hello world". can you help me please.
import React, { Component } from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
Try this:
import React from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
export default class App extends React.Component {
state = {
showContent: false,
};
componentDidMount() {
setTimeout(() => {
this.setState({ showContent: true });
}, 5000);
}
render() {
const { showContent } = this.state;
return showContent ? (
<View>
<Text>Hello world!</Text>
</View>
) : (
<View>
<ActivityIndicator />
</View>
);
}
}
I have this component in react-native and when I press the button i need the whole view to be cloned.
How can I do it?
import React, { Component } from 'react';
import {
Platform, Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import styles from '../../assets/Styles'
class AccountForm extends Component {
render() {
return (
<View>
<TextInput
style={styles.input2}
placeholder="Registered addresses"
/>
<TouchableOpacity style={styles.AddIcon}>
<Image source={require('../../assets/images/addicon.png')}/>
</TouchableOpacity>
</View>
);
}
}
export default AccountForm;
I'm assuming, you want to add one TextInput on tapping the Image. You can modify based on requirement.
import React, { Component } from 'react';
import {
Platform,
Text,
Image,
View,
TextInput,
TouchableOpacity,
ScrollView
} from 'react-native';
import styles from '../../assets/Styles'
class AccountForm extends Component {
constructor() {
super();
this.state = {
count: 1,
};
this.addMore = this.addMore.bind(this);
}
addMore() {
this.setState({
count: ++this.state.count,
})
}
renderAddress() {
const elements = [];
for (let i = 0; i < this.state.count; i++) {
elements.push(
<TextInput key={i}
style={styles.input2}
placeholder="Registered addresses"
/>
);
}
return elements;
}
render() {
return (
<View>
{this.renderAddress();}
<TouchableOpacity onPress={this.addMore} style={styles.AddIcon}>
<Image source={require('../../assets/images/addicon.png')}/>
</TouchableOpacity>
}
</View>
);
}
}
export default AccountForm;
i am getting above mentioned error while running my code and have also searched about this error , i do understand the meaning of this error But i am not able to figure it out in my case.
Here is the code for index.android.js file :-
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import TabNavigatoro from './src/pages/TabNavigatoro';
export default class ReactNewsfeedDemo extends Component {
render() {
return (
<TabNavigatoro/>
);
}
}
AppRegistry.registerComponent('ReactNewsfeedDemo', () => ReactNewsfeedDemo);
Code for TabNavigatoro.js :-
import React, { Component } from 'react';
import {
AppRegistry,
Image
} from 'react-native';
import { Actions, ActionConst } from 'react-native-router-flux';
import logoImg from '../images/logo.png';
import eyeImg from '../images/eye_black.png';
import homeView from './homeView';
import profileView from './profileView';
import TabNavigator from 'react-native-tab-navigator';
export default class TabNavigatoro extends Component {
constructor(props){
super(props);
this.state={selectedTab:'home'}
}
render() {
return (
<TabNavigator selectedTab = {this.state.selectedTab}>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
renderIcon={() => <Image source={logoImg} />}
renderSelectedIcon={() => <Image source={logoImg} />}
onPress={() => this.setState({ selectedTab: 'home' })}>
{homeView}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
renderIcon={() => <Image source={eyeImg} />}
renderSelectedIcon={() => <Image source={eyeImg} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
{profileView}
</TabNavigator.Item>
</TabNavigator>
);
}
}
Here is homeView.js code :-
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
export default class homeView extends Component {
render() {
return (
<View style={styles.container} >
<Text style = {styles.description}>
This is Home View , Please click to confirm.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container : {
flex:1,
alignSelf : 'stretch',
justifyContent:'center',
},
description : {
fontSize:16,
color: '#ffffff',
textAlign:'center',
},
});
I found one link with same error but it was not answered :-
https://github.com/expo/react-native-tab-navigator/issues/130
please let me know what actually causing problem whey it's no picking {homeView} and {profileView} pages, why it's coming null ?
Appreciate!!!