So My app is pretty basic:
import React, { Component } from 'react';
import Landing from './App/pages/landing.js';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NavigatorIOS
} from 'react-native';
class twitterQue extends Component {
_enter() {
console.log('Hey Girl');
}
render() {
return (
<NavigatorIOS
initialRoute={{
component: Landing,
title: 'Welcome!',
passProps: {},
}}
/>
);
}
}
AppRegistry.registerComponent('twitterQue', () => twitterQue);
I then have a landing component:
import React, { Component } from 'react';
import Button from '../components/button/buttons.js';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
class Landing extends Component {
_enter() {
console.log('Hey Girl');
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Twitter Que
</Text>
<Button type={"primary"} buttonWidth={240} onPress={() => this._enter()}>Que Up Some Tweets!</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('Landing', () => Landing);
module.exports = Landing;
Nothing to funky. Nothing renders out to the page and there are no errors. The app loads and I see "Welcome!" As the title but the (Landing) component doesn't show. Am I missing something?
If I move every thing from Landing render into index.js render it works. Am I misunderstanding the docs?
Try adding style={{flex:1}} to NavigatorIOS:
<NavigatorIOS
style={{flex:1}}
initialRoute={{
component: Landing,
title: 'Welcome!',
passProps: {},
}}
/>
NavigatorIOS has no default styling out of the box. So basically there is no default width or height specified. This means that if you do not specify a width and a height, or a flex value, then it will not show up in your view.
Related
I am working on a ReactNative Project. I am a beginner so this question might seem silly. I am creating a basic navigation for a login screen and keep getting this error message
'Unable to resolve module ./src/Home from /app7-react-native/App.js:
Then it says none of these files exist
Here is my App. js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from '.src/Home';
import Login from './src/Login';
const Navigator = createStackNavigator ({
Home: { screen: Home},
Login: { screen: Login},
});
const App = createAppContainer(Navigator);
export default App;
Home.js
import React from 'react';
import { StyleSheet, View, Text, Button} from 'react-native';
export default class Home extends React.Component {
static navigationsOptions = ({ navigation }) => {
return {
title: navigation.getParam('name'),
};
};
render() {
const { navigate, state } = this.props.navigation;
return (
<View style={styles.container}>
<Text>Hello {state.params.name}</Text>
<Button
title="Go to home screen"
onPress={() => navigate('Home')}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Login.js
import React from 'react';
import { Text, View, TextInput, Stylesheet, Button, Touchableopacity } from 'react-native';
export default class Login extends React.Component {
static navigationsOptions = {
title = 'Login',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Button
title="Go to profile screen"
onPress={() => navigate(
'Profile', { name: 'Jane'}
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
})
Try to replace this '.src/Home' with './src/Home';
and your folder structure must be :
App. js
src
Home.js
Login.js
2 fixes need to be done here
Replace '.src/Home' with './src/Home' in your App.js file.
MyRNProject
App.js
src
Home.js
Login.js
You seem to be calling "Home" from inside of Home.js onPress function. You are creating an infinite loop here. Change it to a different screen like Login or Profile
I have a createMaterialTopTabNavigator and when I press to navigate on another screen, I would like hide the tabs and the header but display the current header ("Pronostics détails"). It's possible ?
The code of MontanteTab :
import React from 'react';
import {ScrollView, View, FlatList} from 'react-native';
import {ListItem} from "react-native-elements";
import pronostics from "../../data/Constants/Pronostics";
import {createAppContainer, createStackNavigator} from "react-navigation";
import PronosticsDetailsScreen from "../../screens/PronosticsDetailsScreen";
class MontanteTab extends React.Component {
render() {
return (
<View>
<ScrollView>
<View>
<FlatList
data={pronostics}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => (
<ListItem
key={item.id}
leftAvatar={{source: {uri: item.image}}}
title={item.competition}
subtitle={item.equipe_domicile + ' - ' + item.equipe_exterieur}
onPress={() => this.props.navigation.navigate('PronosticsDetails', {name: 'Jnae'})}
/>
)}
/>
</View>
</ScrollView>
</View>
);
}
}
const MontanteStack = createStackNavigator(
{
Montante: {
screen: MontanteTab,
navigationOptions: ({navigation}) => ({
header: null,
}),
},
PronosticsDetails: {
screen: PronosticsDetailsScreen,
navigationOptions: ({navigation}) => ({
headerMode: 'screen',
headerTitle: 'Pronostics détails',
headerStyle: {
backgroundColor: '#000000',
textAlign: 'center',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
color: '#c7943e',
textAlign: 'center',
alignSelf: 'center',
justifyContent: 'center',
flex: 1,
}
}),
},
},
{
initialRouteName: 'Montante',
}
);
export default createAppContainer(MontanteStack);
The code of PronosticsDetailsScreen :
import React from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import {Text} from "react-native-elements";
export default class PronosticsDetailsScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Détails</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
contentContainer: {
paddingTop: 30,
},
image: {
height: 100,
width: 100,
}
});
I tried to set the header to "null" but the current header is also hidden..
Thank you in advance for your help
Life would be easy if the API supported the ability to hide createMaterialTopTabNavigator()! But this option exists for bottom tabs, not top.
After doing research and test, I think it is possible to hide the tabs and header. It's a matter of playing with the nested navigation. (Inspired by: https://github.com/react-navigation/react-navigation/issues/1979 and Hide parent's navigation header from the nested navigator)
For example:
Pushing the back button on Screen 07 will go back to Screen 06.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation';
import Screen01 from './screens/Screen01';
import Screen02 from './screens/Screen02';
import Screen03 from './screens/Screen03';
import Screen04 from './screens/Screen04';
import Screen05 from './screens/Screen05';
import Screen06 from './screens/Screen06';
import Screen07 from './screens/Screen07';
const AppStackNavigator = createStackNavigator({
home: {
screen: Screen01
},
flowOne: {
screen: createStackNavigator({
page02: {
screen: Screen02 },
page03: {
screen: Screen03 },
flowTwo: {
screen: createBottomTabNavigator({
page04: {
screen: Screen04
},
flowThree: {
screen: createMaterialTopTabNavigator({
page05: {
screen: Screen05
},
page06: {
screen: Screen06
},
})
}
}) // end createBottomTabNavigator, end flowThree
},
flowFour: createStackNavigator({
page07: {screen: Screen07}
}
) // end flowFour
},
{
navigationOptions: {header: null} // hides header in flowOne
})
},
});
const AppContainer = createAppContainer(AppStackNavigator);
export default class App extends React.Component {
render() {
return (
<AppContainer />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I've got Expo demo here: https://exp.host/#project8888/NavigationDemo
There is my code & the error below. I made some changes in the App.js file, & since then this issue has shown up. I had my router setup in this file originally, but then decided to move. I've tried other styles & it doesn't work either.
App.js
import React from 'react';
import { StyleSheet, Text, View, Navigator } from 'react-native';
import { Fonts } from './src/utils/Fonts';
import Menu from './app/components/Menu';
import Page from './app/components/Page';
import Router from './app/components/Router';
export default class App extends React.Component {
render() {
return (
<View style={styles.fonts}>
<Menu />
</View>
);
}
}
const styles = StyleSheet.create({
fonts: {
fontSize: 30,
fontWeight: 12,
fontFamily: Fonts.Baloo
},
});
Error
I had different styles & code on the Menu component before this issue & it worked fine, but now even when I make changes it doesn't go back to the original, just shows this same error.
Menu.js
import React from 'react';
import {
StyleSheet,
Text,
Image,
MenuItem,
Font,
View,
TextInput,
TouchableOpacity
} from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class Menu extends React.Component {
render() {
return (
<View style={styles.container}>
<Text
style={styles.fonts}
onPress={() => Actions.page()}>
Navvi
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
});
I already commented it, but this is how your code should look like (in Menu.js):
export default class Menu extends React.Component {
render() {
return (
<View style={styles.container}>
<Text
style={styles.fonts}
onPress={() => Actions.page()}
>
{"Navvi"}
</Text>
</View>
);
}
}
I'm trying to implement navigation into my practice app:
onPress will cause a move from HomeScreen to ListingReview.
I'm not sure what's going wrong to be honest, though I have suspect I'm not passing props correctly.
Please help!
This is my repo: https://github.com/rphly/practice
(Each object is created in a separate .js file in src/components.)
Index.js
import React, { Component } from 'react';
import { AppRegistry, ScrollView } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Header from './src/components/Header';
import Card from './src/components/Card';
import ListingsFeed from './src/components/ListingsFeed';
import ListingReview from './ListingReview';
class HomeScreen extends Component {
render() {
return (
<ScrollView>
<Header />
<ListingsFeed />
</ScrollView>
);
}
}
export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
});
AppRegistry.registerComponent('hackathon', () => App);
ListingDetails.js (where I'm implementing onPress)
import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Card from './Card';
import CardSection from './CardSection';
const ListingDetails = (props) => {
return (
<Card>
<CardSection>
<View style={styles.titleContainerStyle}>
<Text style={styles.titleContentStyle}>{props.listing.title}</Text>
</View>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: props.listing.primary_photo_url}}/>
</View>
<View style={styles.headerContentStyle}>
<Text style={{marginBottom: 5}} numberOfLines={15}>{props.listing.description.trim()}</Text>
<Text style={styles.priceContentStyle}>${props.listing.price}</Text>
</View>
<Button
onPress={() => navigation.navigate('ListingReview')}
title= "Mark Listing"
color = "#D2232A"
/>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
//backgroundColor: '#D2D2D2D2',
justifyContent:'center',
alignItems: 'center',
marginLeft: 10
},
titleContainerStyle: {
marginLeft: 10,
marginBottom: 2,
marginTop: 2
},
titleContentStyle: {
fontSize: 15,
fontWeight: 'bold'
},
thumbnailStyle: {
height: 180,
width: 180
},
thumbnailContainerStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 2,
marginLeft: 5,
marginRight: 5,
marginTop: 5,
marginBottom: 5
//alignItems: 'flex-start'
},
priceContentStyle: {
fontSize: 15,
color: 'green'
}
};
export default ListingDetails;
ListingFeed.js (where I connect ListingDetails and Index)
import React, { Component } from 'react';
import axios from 'axios';
import { View } from 'react-native';
import ListingDetails from './ListingDetails'
class ListingsFeed extends Component {
state = { listings:[] };
componentWillMount() {
axios.get('example.com/i-removed-the-url')
.then( response => this.setState({ listings:response.data.data.products}));
// this.setState({ listings:response.data.data.products})
}
renderListings() {
return this.state.listings.map(listing =>
<ListingDetails key={listing.id} listing={listing}/>
);
}
render() {
console.log(this.state);
return (
<View>
{this.renderListings()}
</View>
);
}
}
export default ListingsFeed;
You have to pass the navigation props from your HomeScreen to your ListingsFeed component like <ListingsFeed navigation={this.props.navigation}/>. And then, to pass this same props to your ListingDetails : <ListingDetails key={listing.id} listing={listing} navigation={this.props.navigation}/>
In your ListingDetails component you call the navigation.navigate('ListingReview') function, but the navigation is defined nowhere in your component. You have to call props.navigation.navigate('ListingReview') instead (from props) or get a navigation const from props : const {navigation} = props;
ListingDetails.js and ListingsFeed.js not in the stack.
export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
ListingDetails: { screen: ListingDetails },
ListingsFeed:{screen:ListingsFeed}
});
Whenever I try to run my iOS simulator, I'm getting that error. All modules are installed, file path to my picture is correct, no errors being thrown within my IDE except for the one that's appearing in my simulator. Picture below of error.
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
onButtonPress() {
this.props.navigator.push({
id: 'CreateAccount'
});
}
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onButtonPress.bind(this)}>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20 // Length of text input boxes.
},
input: {
backgroundColor: '#DAE5FF',
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<View>
<Text style={styles.title}>My App</Text>
</View>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)'
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
title: {
fontSize: 34,
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
fontFamily: 'Bodoni 72'
}
// movementTitle: {
// paddingBottom: 34
// }
});
export default BackGround;
Here's CreateAccount.js:
import React, {Component} from 'react';
import {Text} from 'react-native';
class CreateAccount extends Component {
render() {
return(
<Text>Must get to this page</Text>
);
}
}
export default CreateAccount;
Here's index.ios.js:
import React, {Component} from 'react';
import {View, StyleSheet, AppRegistry} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
import BackGround from './components/BackGround';
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
<Navigator
initialRoute={{id: 'Login'}}
renderScene={this.navigatorRenderScene}
/>
</View>
);
}
navigatorRenderScene() {
_navigator = navigator;
switch(route.id) {
case 'Login':
return (<Login navigator={navigator} title="Login"/>);
case 'CreateAccount':
return (<CreateAccount navigator={navigator} title="Create Account" />);
}
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
AppRegistry.registerComponent('dendroApp', () => dendroApp);
React recently removed PropTypes from their core library as of React 15.5.
Add the line
import PropTypes from 'prop-types';
And call your proptypes directly from that.
It seems PropTypes is undefined. I don't see it declared anywhere in your code. You have to import it via a separate module as shown in the documents: PropTypes.
Update:
Perhaps a library you are using is using the now deprecated/non-supported React.PropTypes. I recommend using a more up to date library or actually going into the library and updating the package so it uses the new PropTypes from the separate package instead of React.PropTypes. This should fix your problem
Yes definitely, if you upgrade react: 15 or higher then you have to add import PropTypes from 'prop-types';
But recently I faced the same issue in "react": "16.0.0-beta.5" after I changed
"dependencies": {
"react": "16.0.0-alpha.12"
},
"devDependencies": {
"react-test-renderer": "16.0.0-alpha.12"
}
Then it found working fine. Hope it helps!