I have a component that loads into my app, however I can't get the Surface component to load. The text inside it renders fine, however the parent Surface component does not. It also does not appear in the inspector
My component is below. Any ideas?
import React, {useState, useContext} from 'react';
import {StyleSheet, View} from 'react-native';
import {Surface, Text} from 'react-native-paper';
function UpComing({navigation}) {
return (
<View style={styles.container}>
<Text style={{fontWeight: 'bold', fontSize: 15}}>Upcoming Classes</Text>
<Surface styles={styles.surface}>
<Text>Test</Text>
</Surface>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 20,
marginVertical: 10,
},
surface: {
padding: 8,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
elevation: 4,
},
});
export default UpComing;
Related
I'am new in React Native & I'am trying to create separated Button component file (reusable component), and when I press the button it will navigate to another page (react-navigation). Below is my code:
GlobalButton.js
import React from 'react'
import { StyleSheet, TouchableOpacity, Text} from 'react-native'
import { useNavigation, NavigationContainer } from '#react-navigation/native';
const GlobalButton = (props, {screenName}) => {
const navigation = useNavigation();
return
<TouchableOpacity style={[styles.btn, props.style]} onPress= {() => navigation.navigate(screenName)}>
{props.children}
</TouchableOpacity>
}
const styles = StyleSheet.create({
btn: {
alignItems: 'center',
textAlign: 'center',
borderRadius: 25,
height: 50,
}
})
export default GlobalButton;
LoginPage.js
import React from 'react'
import { StyleSheet, Text, View, Image, TextInput, Button} from 'react-native'
import ButtonLogin from '../components/GlobalButton'
// import { useNavigation, NavigationContainer } from '#react-navigation/native';
export default function LoginPage() {
return (
<View style={styles.penampung}>
<Image source= {require('../assets/beetle.png')} style={styles.gambar}/>
<TextInput style={styles.textField} placeholder='username' />
<TextInput style={styles.textField} placeholder='password' secureTextEntry={true} />
<ButtonLogin style={styles.btnStyle} screenName="MainPage"><Text style={styles.text}>LOGIN</Text></ButtonLogin>
</View>
)
}
const styles = StyleSheet.create({
penampung: {
flex: 1,
alignItems: 'center',
backgroundColor: '#00688B',
justifyContent: 'center'
},
gambar: {
height: 100,
width: 100,
},
textField: {
marginTop: 25,
backgroundColor: '#cafafe',
borderRadius: 25,
width: '80%',
height: 50,
paddingLeft: 20
},
btnStyle: {
padding: 10,
position: 'absolute',
bottom: 20,
backgroundColor: "#fc4445",
width: '80%'
},
text:{
fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
})
What I'am expecting is that when I click the login button it should navigate to the MainPage.js, but instead it gives error message ->
Error: You need to specify name or key when calling navigate with an object as the argument.
Please anyone help me in this matter, Thanks...
You should do like below as screenName is part of your props,
<TouchableOpacity style={[styles.btn, props.style]} onPress= {() => navigation.navigate(props.screenName)}>
I am trying to create a cardview in react-native with a title and body. however, i want to add a background color to the tittle but not able to do it.
i was able to create the cardview with a title header but not able to add a background color that covers the entire portion of the header.
see image attached for an example of what i want to implement.
As you can see, the card view has a tittle of summary and the title/header portion has a gray background. below the header is the body which contain the content of the cardview. i want to implement the same in react-native. can someone help? thanks in advance
//This is an example of Card View//
import React from 'react';
//import react in our code.
import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.
import { Card } from 'react-native-elements';
//import Card
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card title="Local Modules">
{/*react-native-elements Card*/}
<Text style={styles.paragraph}>
This is a card from the react-native-elements
</Text>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
Try this:
<Card title={
<View style={{ backgroundColor: 'red'}}>
<Text>Local Modules</Text>
</View>
}
...
/>
Edit your code like this :
//This is an example of Card View//
import React from 'react';
//import react in our code.
import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.
import { Card } from 'react-native-elements';
//import Card
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card title="Local Modules">
<View style={styles.header}>
<Text> Summary </Text>
</View>
<Text style={styles.paragraph}>
This is a card from the react-native-elements
</Text>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
header: {
backgroundColor : '#C4C4C4'
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
I have some issue while rendering TouchableOpacity
import React ,{Component} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
class Button extends Component {
render() {
return(
<TouchableOpacity onPress= {this.props.onPress}
style = {style.buttonStyle}>
<Text style = {style.textStyle}>{this.props.name}</Text>
</TouchableOpacity>
);
}
}
const style = {
textStyle:{
fontSize: 16,
alignSelf: 'center',
color: '#007aff',
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#000',
borderColor: '#007aff',
borderWidth: 1,
borderRadius: 5,
marginLeft: 5,
marginRight: 5
}
}
export {Button};
this is the code for my button component and My button looks like this when i render it
And i used the same component In Login Component and it worked fine...
Expected Button:
I am trying to have a list view show up that looks similar to this. The problem I am trying to solve is regarding word wrapping of the label. I do have it working with the code below, but it feels like a hack and doesn't work with device rotation. There has to be a way to do it without using Dimensions and styling.
Here is what I have.
import React, { Component } from 'react';
import {
StyleSheet,
Dimensions,
TouchableOpacity,
Text,
View
} from 'react-native';
import Moment from 'moment'
import Icon from 'react-native-vector-icons/FontAwesome';
class ProjectListItemRenderer extends Component {
componentDidMount() {
//alert(Dimensions.get('window').height)
}
render() {
return (
<View style={styles.projectRow}>
<View style={{width: Dimensions.get('window').width - 50}}>
<Text style={styles.itemName}>{this.props.name}</Text>
<Text style={styles.itemDetails}>{`${Moment(this.props.lastUpdated).fromNow()}`}</Text>
</View>
<View style={styles.moreContainer}>
<Icon name="chevron-right" size={15} style={styles.moreIcon} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
projectRow: {
flexDirection: 'row',
justifyContent: 'flex-start',
padding: 15,
},
itemName: {
fontSize: 18,
color: '#4A90E2',
},
itemDetails: {
fontSize: 12,
color: '#BBBBBB',
},
moreContainer: {
justifyContent: 'center',
alignItems: 'center'
},
moreIcon: {
color: "#d6d7da"
}
});
module.exports = ProjectListItemRenderer;
The other option I tried was absolute positioning, with the label being 20px from the right, and then absolute positioning the chevron on the right. The problem I ran into there was trying to figure out the height of the individual listItem renderer after it is rendered (and word wrapped).
The problem comes from having flexDirection: 'row' in the View containing your text. This makes the text overflow to the right instead of wrapping. If you want your text to wrap, the containing View must have flexDirection: 'column' in the style.
I've modified your code accordingly:
import React, { Component } from 'react';
import {
StyleSheet,
Dimensions,
TouchableOpacity,
Text,
View
} from 'react-native';
import Moment from 'moment'
import Icon from 'react-native-vector-icons/FontAwesome';
class ProjectListItemRenderer extends Component {
componentDidMount() {
//alert(Dimensions.get('window').height)
}
render() {
return (
<View style={styles.projectRow}>
<View style={styles.projectText}>
<Text style={styles.itemName}>{this.props.name}</Text>
<Text style={styles.itemDetails>
{`${Moment(this.props.lastUpdated).fromNow()}`}
</Text>
</View>
<View style={styles.moreContainer}>
<Icon name="chevron-right" size={15} style={styles.moreIcon} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
projectText: {
flex: 1,
flexDirection: 'column'
},
projectRow: {
flexDirection: 'row',
justifyContent: 'flex-start',
padding: 15,
},
itemName: {
fontSize: 18,
color: '#4A90E2',
},
itemDetails: {
fontSize: 12,
color: '#BBBBBB',
},
moreContainer: {
justifyContent: 'center',
alignItems: 'center'
},
moreIcon: {
color: "#d6d7da"
}
});
module.exports = ProjectListItemRenderer;
The only difference is I replaced {width: Dimensions.get('window').width - 50} with {flex: 1, flexDirection: 'column'}.
I'm learning react-native and have came up with a problem. I'm following a Tutorial series but might have missed something. I'm trying to use different style files for different components but the styles doesn't seem to apply.
Here is the snippet of the code:
index.ios.js
import React, {
AppRegistry,
Component,
Text,
View,
StatusBar
} from 'react-native';
StatusBar.setBarStyle('light-content');
class iTunesBrowser extends Component {
render() {
return (
<View style={styles.global.mainContainer} >
<View style={styles.navbar.appearance}>
<View style={styles.navbar.button} ></View>
<Text style={styles.navbar.title}>iTunesBrowser</Text>
<Text style={styles.navbar.button} >Search</Text>
</View>
<View style={styles.global.content}>
<Text> Some Text </Text>
</View>
</View>
);
}
}
import styles from './styles';
AppRegistry.registerComponent('iTunesBrowser', () => iTunesBrowser);
styles.js
export default {
global: require('./styles/global'),
navbar: require('./styles/navbar')
};
styles/global.js
import React, {StyleSheet} from 'react-native';
export default StyleSheet.create({
mainContainer: {
flex: 1
},
content: {
flex: 1,
backgroundColor: '#ccc'
}
});
styles/navbar.js
import React, {StyleSheet} from 'react-native';
export default StyleSheet.create({
appearance: {
backgroundColor: '#003333',
paddingTop: 30,
paddingBottom: 10,
flexDirection: 'row'
},
title: {
color: '#FFFFFF',
textAlign: 'center',
fontWeight: 'bold',
flex: 1
},
button: {
width: 50,
color: '#FEFEFE',
textAlign: 'center'
}
});
The styles work when put on the index or in a single style file.
I've tried your example and it works when you use JS files with this pattern:
import React, {StyleSheet} from 'react-native';
var global = StyleSheet.create({
mainContainer: {
flex: 1
},
content: {
flex: 1,
backgroundColor: '#ccc'
}
});
module.exports = global;
and
import React, {StyleSheet} from 'react-native';
var navbar = StyleSheet.create({
appearance: {
backgroundColor: '#003333',
paddingTop: 30,
paddingBottom: 10,
flexDirection: 'row'
},
title: {
color: '#FFFFFF',
textAlign: 'center',
fontWeight: 'bold',
flex: 1
},
button: {
width: 50,
color: '#FEFEFE',
textAlign: 'center'
}
});
module.exports = navbar;
The typical way to work with component styles in React Native is to keep the creation of your StyleSheets in the components themselves, not in separate files as you may be used to on the web with CSS. That way everything about the Component, the structure and the style are in the same file.
You can still have a global stylesheet, and pull in those styles when needed, but keep Component styles in the Component.
For a great example on how the community and Facebook recommends styling your components check out: http://makeitopen.com/