I'm trying to link the backgroundColor value in the styles container to the state: color so the background color will change to whatever color I put on the textInput. Here are my codes. Thank you!
import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends Component {
state = {
color: '',
};
_color = (text) => {this.setState({color: text})};
_applyAndClear = () => {
this.setState({color: ''})}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value = {this.state.color}
onChangeText = {this._color}
onSubmitEditing = {this._applyAndClear}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'someColor',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 3,
width: 100,
height: 40,
borderColor: 'white',
alignItems: 'center',
justifyContent: 'center',
}
});
You could do this with the following:
<View style={[styles.container, { backgroundColor: this.state.color }]}>
Related
I'm new to react native and trying to create a button, here is my StartScreen:
import React from 'react' import Background from '../components/Background' import AppButton from '../components/AppButton'
export default function StartScreen({ navigation }) {
return(
<Background>
<AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" />;
</Background>
) }
Here is my AppButton:
import React from 'react'
import { StyleSheet, TouchableOpacity, Text } from "react-native";
export default function AppButton ({ onPress, title, size, backgroundColor }) {
return (
<TouchableOpacity
onPress={onPress}
style={[
styles.appButtonContainer,
size === "sm" && {
paddingHorizontal: 8,
paddingVertical: 6,
elevation: 6
},
backgroundColor && { backgroundColor }
]}
>
<Text style={[styles.appButtonText, size === "sm" && { fontSize: 14 }]}>
{title}
</Text>
</TouchableOpacity>
)
};
const styles = StyleSheet.create({
screenContainer: {
flex: 1,
justifyContent: "center",
padding: 16
},
appButtonContainer: {
elevation: 8,
backgroundColor: "#009688",
borderRadius: 10,
paddingVertical: 10,
paddingHorizontal: 12
},
appButtonText: {
fontSize: 18,
color: "#fff",
fontWeight: "bold",
alignSelf: "center",
textTransform: "uppercase"
}
});
Here is my Background:
import React from 'react'
import { ImageBackground, StyleSheet, KeyboardAvoidingView } from 'react-native'
import { theme } from '../core/theme'
export default function Background({ children }) {
return (
<ImageBackground style={styles.background}>
<KeyboardAvoidingView style={styles.container} behavior="padding">
{children}
</KeyboardAvoidingView>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flex: 1,
width: '100%',
backgroundColor: theme.colors.surface,
},
container: {
flex: 1,
padding: 20,
width: '100%',
maxWidth: 340,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
},
})
When I try to run the application in my Android phone I get the following error:
Error: Text strings must be rendered within a component.
Blockquote
But I cant figure out where this error happens. Can someone spot the mistake?
You have an unnecessary semicolon (;) in your StartScreen JSX, remove it.
export default function StartScreen({ navigation }) {
return(
<Background>
<AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" />
</Background>
); }
I keep getting this error in my debug console..
This is my main App component code :-
import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
import Bookitem from "./Bookitem";
const mB = [
{
rank: 1,
title: "Gathering Prey",
author: "John Sanford",
image : "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"
},
{
rank: 2,
title: "Memory Man",
author: "David Baldacci",
image : "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9781455586387.jpg"
}
];
export default class App extends Component {
constructor(props){
super(props);
this.state={data : this.addKeystoBooks(mB)};
}
addKeystoBooks = books => {
return books.map(book => {
return Object.assign(book,{key: book.title})
})
}
_renderitem = ({item}) => {
<Bookitem
coverURL = {item.image}
author = {item.author}
title = {item.key}
/>
}
render() {
return <FlatList
data={this.state.data}
renderItem={this._renderitem} />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection : 'row'
},
input : {
fontFamily: 'Lobster-Regular',
fontSize: 24,
padding: 40,
borderWidth: 2,
textAlign : "center"
}
});
My BookItem Component code is as follows :-
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class book extends Component {
render(){
return(
<View style = {styles.container}>
<Image style = {styles.cover} source = {this.props.coverURL} resizeMode="contain" />>
<View style = {styles.info}>
<Text style = {styles.author}>{this.props.author}</Text>
<Text style ={styles.title}>{this.props.title}</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create(
{
container : {
flex:1,
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
backgroundColor:"#FFFFFF",
borderBottomColor:"#AAAAAA",
borderBottomWidth: 2,
padding: 5,
height: 175
},
cover : {
flexDirection:"column",
alignItems: "flex-start",
height: 150
},
info:{
flexDirection: "column",
alignItems: "flex-end",
flex: 3,
alignSelf:"center",
padding: 20
},
author: {
fontFamily: "Lobster-regular",
fontSize: 20
},
title : {
fontSize: 23,
fontFamily: "Lobster-Regular"
}
}
)
I have used addkeystobooks function to add a unique identifier to each book for rendering of the flatList's data
I hope this information is sufficient enough to tell me where i am going wrong, i am trying to work with the react-native based on a mock book set..
I want to create a custom card in react native and it gets me confused as to use the views.
I have tried to make a card following the tutorial but I am not getting anywhere since its very confusing.The image below is what I'm trying to achieve.
This is what I have
trying to make the card
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Platform } from "react-native";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.squareShapeView}/>
<View style={{flex:0.7}}>
<Text>Test1</Text>
<Text>Test1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop:50,
justifyContent: 'center',
alignItems:'center',
flexDirection:'row',
borderWidth:0.3,
marginLeft:30,
marginRight:30
},
squareShapeView: {
//To make Square Shape
width:20,
height:70,
backgroundColor: '#14ff5f',
alignSelf:'flex-start'
},
});
This is what I expect to get
this is what I expect
I hope this might help you
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { MaterialIcons } from '#expo/vector-icons';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
const Card = ({ title, desc }) => (
<View style={styles.cardContainer}>
<View style={styles.cardContent}>
<View style={{ flexDirection: 'column' }}>
<Text>{title}</Text>
<Text>{desc}</Text>
</View>
<MaterialIcons name="navigate-next" size={40} color="red" />
</View>
</View>
)
export default class App extends React.Component {
constructor(props) {
super(props);
this.cards = [
{
title: 'Top up',
desc: 'Top up any number'
},
{
title: 'Top up history',
desc: 'View all of the top up you have made'
}
]
}
renderCards = () => {
return this.cards.map(card => (
<Card
title={card.title}
desc={card.desc}
/>
))
}
render() {
return (
<View style={styles.container}>
{this.renderCards()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 25,
},
cardContainer: {
paddingTop: 30,
paddingBottom: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffset: { x: 0, y: 10 },
shadowOpacity: 1,
borderLeftColor: 'blue',
borderLeftWidth: 10,
alignSelf: 'stretch',
backgroundColor: 'white',
marginTop: 20,
},
cardContent: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: 20,
}
});
https://snack.expo.io/#xavier96/aGVscC
I've made CustomHeader like below.
import React from 'react'
import {Platform, View, Text, TouchableHighlight, TouchableOpacity, StyleSheet} from 'react-native'
import {Ionicons} from '#expo/vector-icons';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';
export default class CustomHeader extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.wrap}>
<TouchableOpacity style={styles.goBack} onPress={() => {
this.props.nav.goBack(null)
}}>
<Ionicons name="ios-arrow-back" size={moderateScale(33)} color="#565656"/>
</TouchableOpacity>
<View style={styles.title}>
<Text style={styles.titleText}>Title</Text>
</View>
<TouchableOpacity style={styles.share}>
<Ionicons name="ios-share-outline" size={moderateScale(30)} color="#565656"/>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS === 'ios' ? Expo.Constants.statusBarHeight : 0
},
wrap: {
height: moderateScale(50),
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#e5e5e5'
},
goBack: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingLeft: 12,
},
title: {
flex: 8,
alignItems: 'center',
justifyContent: 'center'
},
titleText: {
fontSize: moderateScale(15),
fontWeight: 'bold'
},
share: {
flex: 1,
justifyContent: 'center',
paddingRight: 12,
alignItems: 'flex-end',
}
});
And this component is imported ContentDetailScreen.js below.
import React from 'react';
import CustomHeader from '../components/CustomHeader'
import {Platform, View, ScrollView, StyleSheet, Text, Dimensions, Image, Button, Modal} from 'react-native';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';
import {Ionicons} from '#expo/vector-icons';
import Swiper from 'react-native-swiper'
const {width} = Dimensions.get('window')
export default class ContentDetailScreen extends React.Component {
static navigationOptions = {
header: null
};
render() {
console.log(this.props.navigation);
return (
<View style={[styles.container]}>
<CustomHeader nav={this.props.navigation}/>
<Text style={{backgroundColor: 'red'}}>Something</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
shareIcon: {
color: '#565656'
},
wrapper: {
backgroundColor: '#333',
justifyContent: 'flex-start'
},
slide: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#111'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
},
image: {
width,
flex: 1
},
paginationStyle: {
position: 'absolute',
bottom: 10,
right: 10
},
paginationText: {
color: '#333',
fontSize: 20
}
});
But, It's displaying like .
I would like to be on just next of CustomHeader as common.
But 'Something (red color)' is on bottom of Screen.
What's wrong?
If I remove CustomHeader, It's correct.
remove the
flex: 1,
from the CustomHeader style, and you will get what you want
I have a react native screen where 2 text inputs are added by default, while 2 text inputs are added on button press only.
I am able to add text to the first 2 text inputs, but the other 2 are not accepting text, they accept text only when "Add another car" button is pressed again.
What am I missing? Why is the view not re-rendered when I add text.
CarReg.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
var Button = require('./Button');
var Parse = require('parse/react-native');
class CarReg extends Component {
constructor(props) {
super(props);
this.state = {
carNumber1: "",
carState1: "",
carNumber2: "",
carState2: "",
errorMessage: "",
carEntry: <View/>,
};
}
render() {
const { page } = this.state;
return (
<View style={styles.container}>
<Text
style={[styles.titleContainer, {marginBottom: 30}]}>
Please register your cars, you can add up-to 2 cars </Text>
<Text style={styles.titleContainer}> License plate number: </Text>
<TextInput
style={styles.textInputContainer}
onChangeText={(text) => this.setState({carNumber1: text})}
value={this.state.carNumber1}/>
<Text style={styles.titleContainer}> State: </Text>
<TextInput
style={styles.textInputContainer}
onChangeText={(text) => this.setState({carState1: text})}
value={this.state.carState1}/>
{this.state.carEntry}
<Text>{this.state.errorMessage}</Text>
<Button text="Add another car" onPress={this.onAddCarPress.bind(this)}/>
<Button text="Submit" onPress={this.onSubmitPress.bind(this)}/>
<Button text="I don't have a car" onPress={this.onNoCarPress.bind(this)}/>
</View>
);
}
onAddCarPress() {
this.setState({carEntry:
<View style={styles.addCarView}>
<Text style={styles.titleContainer}> License plate number: </Text>
<TextInput
style={styles.textInputContainer}
onChangeText={(text) => this.setState({carNumber2: text})}
value={this.state.carNumber2}/>
<Text style={styles.titleContainer}> State: </Text>
<TextInput
style={styles.textInputContainer}
onChangeText={(text) => this.setState({carState2: text})}
value={this.state.carState2}/>
</View>
})
}
onSubmitPress() {
this.props.navigator.push({name: 'main'});
}
onNoCarPress() {
this.props.navigator.push({name: 'main'});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
addCarView: {
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
titleContainer: {
fontSize: 20,
fontFamily: 'Helvetica',
},
textInputContainer: {
padding: 4,
margin: 5,
borderWidth: 1,
borderRadius: 10,
width: 200,
height: 40,
fontFamily: 'Helvetica',
alignSelf: 'center',
marginBottom: 10,
marginTop: 10,
},
});
module.exports = CarReg;
Button.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TouchableHighlight,
} from 'react-native';
class Button extends Component {
constructor(props) {
super(props);
}
render() {
return (
<TouchableHighlight
style={styles.container}
onPress={this.props.onPress}
underlayColor ='gray'>
<Text style={styles.textContainer}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 10,
padding: 5,
borderWidth: 1,
borderRadius: 10,
},
textContainer: {
fontFamily: 'Helvetica',
justifyContent: 'center',
alignSelf: 'center',
textAlign: 'center',
flex:1,
fontSize: 20,
}
});
module.exports = Button;
I created the demo of your code on the rnplay. (only ios version.)
I think it's not the good idea to push html to your state. The state is for the data like an array, a boolean and templates (strings). This is only my opinion, of course.
After you click to submit button, look at the console.