Why is this Text not displaying inside this View? Tried flexing on the circle and text. I like long walks on the beach and writing extra characters to qualify for this post to be active.
import React, {Component} from 'react';
import {View, StyleSheet, Text} from 'react-native';
export default class Interest extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.circle}>
<Text style={styles.text}>{this.props.title}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
circle: {
//flex: 1,
padding: 15,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 10,
minWidth: 80,
alignItems: 'center',
marginBottom: 10
},
text: {
//flex: 0,
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});
Text was hidden by padding and height. Corrected CSS is as follows:
const styles = StyleSheet.create({
circle: {
padding: 8,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 35,
marginBottom: 10,
alignItems: 'center'
},
text: {
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});
Related
i am trying to make a selectable button design by passing the "PRIMARY" or "TERTIARY" to type. i think there is a problem in the "styles['container_${type}']" in line 7 but i cant figure it out
import { View, StyleSheet, Image ,Text, Pressable} from 'react-native';
function CustomButton({onPress, text, type}) {
return (
<Pressable
onPress={onPress}
style={[styles.container, styles['container_${type}']]}>
<Text style={[styles.text, styles['text_${type}']]} >{text}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
container:{
width: '100%',
padding: 15,
alignItems: 'center',
borderRadius: 30,
marginVertical: 25,
},
container_PRIMARY:{
backgroundColor: '#fde17d',
},
container_TERTIARY:{
backgroundColor: 'pink',
},
text: {
fontWeight: 'bold',
color: 'white',
},
text_TERTIARY :{
color: 'gray',
}
})
export default CustomButton;
Try this,
import { View, StyleSheet, Image ,Text, Pressable} from 'react-native';
function CustomButton({onPress, text, type}) {
const stylesheet = type == 'PRIMARY' ? 'container_PRIMARY' : 'container_TERNIARY';
return (
<Pressable
onPress={onPress}
style={[styles.container, {...stylesheet}]}>
<Text style={[styles.text, styles['text_${type}']]} >{text}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
container:{
width: '100%',
padding: 15,
alignItems: 'center',
borderRadius: 30,
marginVertical: 25,
},
container_PRIMARY:{
backgroundColor: '#fde17d',
},
container_TERTIARY:{
backgroundColor: 'pink',
},
text: {
fontWeight: 'bold',
color: 'white',
},
text_TERTIARY :{
color: 'gray',
}
})
export default CustomButton;
Use `` for template literals not ' '.
Hi i'm new in REACT NATIVE, i have a in my react native app, with style of a card like the code below. first i want to split it into two horizontally parts with the ratio of( 3 for upper part and 2 for lower part). And second i want to write on each part.
I
import React from "react";
import {
Button,
StyleSheet,
Text,
View,
TouchableHighlight,
TouchableOpacity,
} from "react-native";
export default function App() {
return(
<View style={styles.card}>
<View style={styles.results}>
<Text style={styles.texty}>numbers</Text>
</View>
<View style={styles.calculations}>
<Text>numbers</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
card: {
flex: 1,
width: "80%",
height: 100,
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 5,
backgroundColor: "white",
padding: 100,
borderRadius: 15,
marginTop: 80,
margin: 42,
justifyContent: "center",
},
texty: {
fontSize: 30,
},
calculations: {
fontSize: 34,
},
results: {
flex: 6,
paddingTop: 25,
justifyContent: "center",
alignItems: "flex-end",
borderBottomWidth: 0.3,
borderBottomColor: "grey",
});
brought my code down there
Please use flex property to achieve this like:
card: { flex: 1 }
results: { flex: .6, flexWrap:'wrap'}
calculations: {flex:.4, flexWrap:'wrap'}
P.S:
You can add other styles as you like but don't use height property.
I'm trying to initialize a Text component in a parent component with a certain state, but it's not showing up at all. This should be something really simple and something I've done multiple times before, what am I doing wrong here? Nothing is showing up in the text component. Here is the component code:
import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export class GeneralInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder,
inputValue: "",
inputting: false,
validationMessage: "This is a required field",
validationStyles: styles.noValidation,
};
}
whenInputIsFocused() {
this.setState({placeholder: ""});
}
whenInputIsBlurred() {
this.setState({validationMessage: "This field is required"});
/* if (this.state.inputValue === "") {
this.setState({placeholder: this.props.placeholder});
}*/
}
storeValue = (inputValue) => {
this.setState({inputValue});
this.props.onChange({key: this.props.fieldId, value: inputValue});
}
focusNextField(nextField) { this.refs[nextField].focus(); }
render() {
const autoFocus = this.props.autoFocus == 'true';
const multiline = this.props.multiline == 'true';
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<View style={styles.inputContainer}>
<TextInput
autoCapitalize='none'
autoFocus={this.props.autoFocus}
onChangeText={this.storeValue}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputIsBlurred.bind(this)}
onFocus={this.whenInputIsFocused.bind(this)}
underlineColorAndroid="transparent"
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
placeholder={this.state.placeholder}
placeholderTextColor='rgba(255, 255, 255, 0.3)'
multiline={multiline}
selectTextOnFocus={false}
onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
style={styles.inputStyles} />
<Text style={styles.validationText}>{this.state.validationMessage}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
outerContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
width: '90%',
marginBottom: 20,
},
labelText: {
fontFamily: 'rubik-bold',
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
marginBottom: 5,
},
inputContainer: {
height: 40,
width: '100%',
backgroundColor: 'rgba(255, 255, 255, 0.3);',
shadowColor: 'rgba(0, 0, 0, 0.15)',
shadowOffset: {width: 0,height: 2},
shadowOpacity: 0,
shadowRadius: 0,
borderRadius: 2,
},
inputStyles: {
height: '100%',
width: '100%',
fontSize: 14,
color: '#fff',
paddingLeft: 15,
fontFamily: 'rubik-bold',
},
validationText: {
color: '#e16e17',
fontSize: 12,
fontFamily: 'rubik-bold',
marginTop: 3,
display: 'none',
},
});
Assuming you mean this
<Text style={styles.validationText}>{this.state.validationMessage}</Text>
Your styles have
validationText: {
color: '#e16e17',
fontSize: 12,
fontFamily: 'rubik-bold',
marginTop: 3,
display: 'none',
},
The display:'none' is going to make it not show up
I tried your code and modified the backgroundColor for the text area.
labelText: {
backgroundColor: "red",
...
I get this, which I believe is what you are looking for:
Are you showing the text on a white background?
Help, Im trying code an app an I can't seem to get past this error.
var React = require('react-native');
var {
View,
Text,
StyleSheet
} = React;
var styles = StyleSheet.create({
mainContainer: {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#48BBEC'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center',
color: '#fff'
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor: 'white',
borderRadius: 8,
color: 'white'
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
});
class Main extends React.Component{
render(){
return (
<View style={styles.mainContainer}>
<Text> Testing the Router </Text>
</View>
)
}
};
module.exports = Main;
I believe the problem lies in this block
class Main extends React.Component{
render(){
return (
<View style={styles.mainContainer}>
<Text> Testing the Router </Text>
</View>
)
}
};
There error message is: SyntaxError /Users/tevinrivera/Rondeh/App/Components/Main.js: Unterminated JSX contents(57:41)
Your imports are wrong. You need to import React from 'react' and other things like View, Stylesheet etc from 'react-native'.
Something like will work:
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
Everything looks fine. Try changing this code
var React = require('react-native');
var {
View,
Text,
StyleSheet
} = React;
to this
const React = require('React');
const ReactNative = require('react-native');
const{
StyleSheet,
View,
Text
} = ReactNative;
In the following code:
'use strict';
var React = require('react-native'),
{
AppRegistry,
StyleSheet,
Text,
View,
Component,
NavigatorIOS
} = React,
styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
}
})
class Login extends Component {
render() {
return (
/*<TouchableHighlight
style={styles.button}
underlayColor='#99d9f4'>*/
<Text style={styles.text}>Login with Google</Text>
/*</TouchableHighlight>*/
)
}
}
module.exports = Login
The <Text> Login gets rendered only when the surrounding <TouchableHighlight> is commented out. What am I doing wrong?
You need to import 'TouchableHighlight'.
Add TouchableHighlight to your list of requires.
var React = require('react-native'),
{
AppRegistry,
StyleSheet,
Text,
View,
Component,
NavigatorIOS,
TouchableHighlight
} = React,
In order to use the tag, you have to import it in the destructuring assignment block just like Text and View.