I'm trying to make a custom router component, that will pick a layout dynamically. But, when I'm trying to render layout dynamically I receive blank page.
What I'm doing wrong?
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import WelcomePageLayout from '../layouts/welcome-page';
import GamePageLayout from '../layouts/game';
export default class Router extends Component {
constructor(props) {
super(props);
this.layouts = [
WelcomePageLayout,
GamePageLayout
];
this.state = {
currentLayout: 0
};
}
render() {
const layout = this.layouts[this.state.currentLayout];
return (
<View style={styles.container}>
{ layout }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
paddingTop: 60,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 100
}
});
A step ago, before adding this dynamic render everything was working as expected. So I'm pretty sure it's something about that.
Thanks in advance.
You are just passing the component as a child to View. Make sure you render it as well:
render() {
const Layout = this.layouts[this.state.currentLayout];
return (
<View style={styles.container}>
<Layout />
</View>
);
}
Related
I am struggling a little bit. I have tried to create more components for my React native app but after I did it my ButtonSaving stoped redirecting to Dashboard for some reason. I was trying some ways to pass onRowPress to component but without luck. What do I do incorrectly here please?
Login button is working fine => redirecting to Dashboard
ButtonSaving not working at all => should redirect to Dashboard
AppNavigator.js
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation';
import Homepage from './components/Homepage/Homepage';
import Dashboard from './components/Dashboard/Dashboard';
const AppNavigator = createStackNavigator({
Homepage: Homepage,
Dashboard: { screen: Dashboard},
},
{
initialRouteName: 'Homepage',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: 'white',
opacity: 70,
borderBottomColor: 'white',
borderColor: 'white'
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold'
}
}
}
);
const Container = createAppContainer(AppNavigator);
export default Container;
Homepage.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import {NavigationActions} from 'react-navigation';
// COMPONENTS
import ButtonSaving from './ButtonSaving/ButtonSaving';
class Homepage extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
},
this.handleClick = this.handleClick.bind(this);
this.onRowPress = this.onRowPress.bind(this);
}
handleClick() {
const counterApp = this.state.counter;
this.setState({
counter: counterApp + 1,
dashboard: 'Dashboard'
})
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render() {
return(
<View style={styles.container}>
{/* LOGIN BUTTON */}
<View style={styles.buttonContainer}>
<View style={styles.buttonLogin}>
<Button title="log in"
color="white"
onPress={() => this.props.navigation.navigate('Dashboard')}/>
</View>
</View>
{/* LOGO CONTAINER */}
<View style={styles.logoContainer}>
<Image
style={{height: 147, width: 170}}
source= {require('./REACT_NATIVE/AwesomeProject/logo.png')}
></Image>
</View>
{/* EXPLAINATION OF WALT */}
<Text style={styles.textContainer}>Lorem ipsum lorem upsum></Text>
{/* Needs to be refactored to VIEW */}
<ButtonSaving onPress={() => this.onRowPress}/>
</View>)
}
ButtonSaving.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
class ButtonSaving extends React.Component {
constructor(props) {
super(props);
this.state = {
},
this.onRowPress = this.onRowPress.bind(this);
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render(){
return(
<View style={styleButton.container}>
<LinearGradient
colors={[
'#00b38f',
'#7dcf5a'
]}
style={styleButton.opacityContainer}>
<TouchableOpacity>
<Button
title="Start Saving"
color='white'
onPress={this.onRowPress}/>
</TouchableOpacity>
</LinearGradient>
</View>
)
}
}
const styleButton = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
width: '100%',
height: 50,
justifyContent: 'center',
marginTop: '39%'
},
opacityContainer: {
height: 48,
borderRadius: 25,
backgroundColor: 'darkgreen',
width: '70%',
justifyContent: 'center',
alignItems: 'center'
}
})
export default ButtonSaving;
You miss to put dashboard in your state in ButtonSaving.js
In Homepage.js when your are calling handleClick ?. Dunno how you got that working...
You say in the onRowPress this:
this.props.navigation.navigate(this.state.dashboard);
but I don't see anywhere that you set this.state.dashboard.
Probabbly you missed set it up.
It was simple refactor and this helped!
<ButtonSaving navigation ={this.props.navigation}/>
I will update solution for others later.
There is no point to save "dashboard" in the Homepage state or the ButtonSaving state.
In Homepage.js you don't need to pass onPress to ButtonSaving
...
<ButtonSaving navigation={this.props.navigation}/>
...
Next in ButtonSaving.js
onRowPress = () => {
this.props.navigation.navigate('Dashboard');
}
I started playing with react-native and I got a problem with centering a text, it's a very simple code but idk why it's not working
I was playing with animations too and none of all the examples that I did didn't work
So I have a View with a Text and the styles, with the flex should be enought, but isn't
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeView extends Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>Hello World</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
alignItems: 'center',
justifyContent: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
}
});
Here is the App class
import React from 'react';
import { StyleSheet,View} from 'react-native';
import HomeView from './components/HomeView';
const App = () => {
return (
<View>
<HomeView/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
And the index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
You are not closing your class with } after render().
Inside of the App class you need to render the View with container style
so it would be
const App = () => {
return (
<View style={styles.container}>
<HomeView/>
</View>
);
};
so it has flex: 1 and then can take the full space and align itself properly.
I am using react-native-overlay-section. The bottom sheet is swipeable to the whole window but I want it to be swipeable to a particular height. How should I do? I have uploaded the code below:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import SlideUp from 'react-native-overlay-section';
export default class App extends Component {
constructor (props) {
super(props);
}
exampleContent = () => {
return (
<View >
<Text>This is test text</Text>
</View>
)
}
render() {
return (
<View style={{flex: 1}}>
<Text>Hello</Text>
<SlideUp
contentSection={this.exampleContent()}
draggableHeight={50}
/>
</View>
)
}
}
Here is the style:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
is it possible to set some styling properties from the parent as props and some styling properties from the component itself?
Here is my component:
import React,{ Component } from 'react';
import { View, Text } from 'react-native';
class BackgroundMar extends Component {
render(){
return (
<View style={[styles.viewStyle]}>
<Text>{this.props.test}</Text>
</View>
)
}
};
var styles = {
viewStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: props.color
}
};
export default BackgroundMar;
And here is my parent:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import BackgroundMar from "./components/BackgroundMar";
export default class App extends React.Component {
render() {
return (
<BackgroundMar
test={'aaa'}
color={'#ff2044'}
/>
);
}
};
});
I would like to set only the backgroundColor from the parent.
Okay I found the solution.
On the parent:
export default class App extends React.Component {
render() {
return (
<BackgroundMar
test={'#52a03f'}
/>
);
}
};
On the component itself:
class BackgroundMar extends Component {
render(){
return (
<View style={[styles.viewStyle, { backgroundColor: this.props.test}]}>
<Text>{this.props.test}</Text>
</View>
)
}
};
var styles = {
viewStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
};
Try something like
First send styles from parent as object... ex ..
style={{color:"#abcd"}}
then inside the child component. add that to style array
<View style={this.props.style ? [styles.viewStyle, this.props.style] :
[styles.viewStyle]}>
I've got a simple React Native app with a TabBarIOS component.
For each tab, I have a seperate .js file and the main TabBarIOS component lives in index.ios.js. The other classes are home.ios.js and contact.ios.js.
After I click on an icon I want the app to show the corresponding page( home.ios.js or contact.ios.js). However when I click one of the icons, I get a "Expected a component class, got object Object" error.
So far it looks like the rendering of the TabBarIOS component is alright. I myself think that there is a problem in the binding with the other .js files or a problem with the injection.
index.ios.js
var React = require('react');
var ReactNative = require('react-native');
import Home from './home.ios';
import Contact from './contact.ios';
var {
AppRegistry,
TabBarIOS,
} = ReactNative;
var {
Component
} = React;
class Tab extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'Home'
};
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === 'Home'}
systemIcon="featured"
onPress={() => {
this.setState({
selectedTab: 'Home',
});
}}>
<home/>
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'Contact'}
systemIcon="contacts"
onPress={() => {
this.setState({
selectedTab: 'Contact',
});
}}>
<contact/>
</TabBarIOS.Item>
</TabBarIOS>
)
}
}
AppRegistry.registerComponent('ProtoReactNative', () => Tab);
home.ios.js (I include only this one, contact.ios.js looks the same)
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
StyleSheet,
View,
Text
} = ReactNative;
var {
Component
} = React;
var styles = StyleSheet.create({
description: {
fontSize: 20,
textAlign: 'center',
color: '#FFFFFF'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'blue',
}
});
class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Welcome to your React Native Start Component!
</Text>
</View>
);
}
}
module.exports = Home;
Hopefully someone has a solution for me!
Thanks in advance!
EDIT:
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
StyleSheet,
} = ReactNative;
var {
View,
Text,
Component
} = React;
var styles = StyleSheet.create({
description: {
fontSize: 20,
textAlign: 'center',
color: '#FFFFFF'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
}
});
class Contact extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
This could be your second tab
</Text>
</View>
);
}
}
module.exports = Contact;
Step 1: Change <home/> to <Home/> and <contact/> to <Contact/>
Step 2: Inside contact js file, View and Text should be imported from ReactNative. Currently its imported from React