ScrollView child layout must be applied through the contentContainerStyle prop

ScrollView child layout must be applied through the contentContainerStyle prop - javascript

I am using react native swiper. and this error was shown I don't know why. How can it be solved? In the past, there was not a problem like this. It's first time happening. What is wrong?
Here is the image of a full error:
<Swiper loop={false}
index={0}
style={styles.wrapper}
activeDotColor={'#EEE'}>
<View style={styles.slide1}>
<Text style={styles.text}>Choose category you like</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Bookmark articles that you</Text>
<Text style={styles.text}>like</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>Get notifications about your</Text>
<Text style={styles.text}>chosen topic</Text>
<Button style={styles.text} onPress={() => this.props.navigation.navigate("Home")}>
<Text style={styles.text}>Main Screen</Text>
</Button>
</View>
</Swiper>
)
} else {
return <View></View>
}
}
}
const styles = {
wrapper: {
justifyContent: 'center',
alignItems: 'center'
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
alignSelf: 'center',
color: '#FFF',
fontSize: 26,
fontWeight: 'bold'
},
}
export default WelcomeScreen
Please help to solve this annoying trouble.

Add style like this
<Swiper loop={false}
index={0}
contentContainerStyle={styles.wrapper}
activeDotColor={'#EEE'}>

Use contentContainerStyle props instead of style props.
contentContainerStyle={styles.wrapper}

Related

Trouble storing use input text in react native

I am trying to store the value of the color and the font size that the user has entered, but my program doesnt store the value, it changes it instantly when the user inputs text. I want it to change the font and background color when 'press me' is clicked. Here is what ive so far:
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity, Alert } from 'react-native';
function Input(props) {
return (
<TextInput
{...props}
style={{ height: 40, borderWidth: 1, padding: 20, paddingTop: 10, margin: 5 }}
editable
maxLength={40}
/>
);
}
export default function InputMultiline() {
const [mySize, setMySize] = useState('20');
const [myBGColor, setMyColor] = useState('yellow');
const colChange = () => {
setMyColor(myBGColor);
setMySize(mySize);
}
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: myBGColor.toLowerCase(),
borderBottomColor: '#000000',
borderBottomWidth: 1,
}}>
<Text style={{ fontSize: Number(mySize) }}>Hello</Text>
<View>
<Input
multiline
numberOfLines={4}
value={myBGColor}
onChangeText={colText => setMyColor(colText)}
/></View>
<View>
<Input
multiline
numberOfLines={4}
value={mySize}
onChangeText={sizeText => setMySize(sizeText)}
/></View>
<View style={styles.fixToText}>
<TouchableOpacity>
<Button onPress={colChange}
title="Press Me!"
color="#841584" />
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
marginHorizontal: 16,
},
title: {
textAlign: 'center',
marginVertical: 8,
fontSize: 20
},
fixToText: {
flexDirection: 'row',
justifyContent: 'space-between',
},
separator: {
marginVertical: 8,
borderBottomColor: '#737373',
borderBottomWidth: StyleSheet.hairlineWidth,
},
});
I have no clue how to change the font and background color together and click on 'press me'.

You should add 2 more states that will contain user's input:
export default function InputMultiline() {
const [mySize, setMySize] = useState('20');
const [myBGColor, setMyColor] = useState('yellow');
const [mySizeUserInput, setMySizeUserInput] = useState('20'); <---- ADDED
const [myBGColorUserInput, setMyColorUserInput] = useState('yellow'); <----- ADDED
const colChange = () => {
setMyColor(myBGColorUserInput); <----- CHANGED
setMySize(mySizeUserInput); <----- CHANGED
}
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: myBGColor.toLowerCase(),
borderBottomColor: '#000000',
borderBottomWidth: 1,
}}>
<Text style={{ fontSize: Number(mySize) }}>Hello</Text>
<View>
<Input
multiline
numberOfLines={4}
value={myBGColor}
onChangeText={colText => setMyColorUserInput(colText)} <----- CHANGED
/></View>
<View>
<Input
multiline
numberOfLines={4}
value={mySize}
onChangeText={sizeText => setMySizeUserInput(sizeText)} <----- CHANGED
/></View>
<View style={styles.fixToText}>
<TouchableOpacity>
<Button onPress={colChange}
title="Press Me!"
color="#841584" />
</TouchableOpacity>
</View>
</View>
);
Se tu

I was able to reproduce the issue with your codes, in my case styles were broken so you can try to change the view by removing flex and adding height, like this:
<View style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: myBGColor.toLowerCase(),
height: 100,
}}>

different color for every item of flatlist based on condition

I want color of every item based on condition like:-
I will have my condition like :- let check = item.project_status.
and check can be completed, in-progress and incomplete.
and red for incomplete, yellow for in-progress and green for completed.
Here is my flatlist code:-
<FlatList
style={{height:constants.DesignHeight - 100}}
data={props.DATA}
renderItem={({ item }) =>
<TouchableOpacity onPress={props.onPress} style={styles.flatlistContainer}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={styles.text}>{item.project_name} </Text>
<Text style={styles.text2}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={styles.text}>Assigned to: {item.project_manager.name} </Text>
<Text style={styles.text2}>End: {moment(item.end_date).format("DD/MM/YYYY")}</Text>
</View>
<View>
</View>
</TouchableOpacity>
}
KeyExtractor={(item) => item.id}
// ItemSeparatorComponent={() => renderSeparator()}
/>
const styles = StyleSheet.create({
flatlistContainer: {
width: '100%',
},
text: {
fontSize: constants.vw(20),
lineHeight: constants.vw(30),
},
text2: {
fontSize: constants.vw(16),
lineHeight: constants.vw(30),
}
})
How can I achieve this?
Thanks!!!

i think you can make a style for each project status
and you can use it
const styles = StyleSheet.create({
...
incomplete: {
color: 'red'
},
inprogress: {
color: 'yellow'
},
completed: {
color: 'green'
}
}})
and you can use it on style tag
like this
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={[styles.text, styles[item.project_status]}>{item.project_name} </Text>
<Text style={[styles.text2, styles[item.project_status]}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
</View>

overlap button with another view

I have a screen where I input some values in the input field and get search results displayed accordingly (within the <View style={styles.dropdown}>). I want that the list should overlap my ActionButton. Just like it overlaps my other input field.
I have already added zIndex and it works for the second input field but not for the button.
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
<View style={styles.searchFieldContainer}>
<AddressSearchInput
addressType="favouritePoint"
iconName="search"
textChangeHandler={textChangeHandler}/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList}/>
</View>
<View style={styles.fieldDescription}>
<Text>Standortname:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input style={styles.searchText}/>
</Item>
</View>
<View style={styles.buttonContainer}>
<ActionButton buttonText="Platz Speichern"/>
</View>
</View>
</SafeAreaView>
);
};
export const styles = StyleSheet.create({
searchFieldContainer: {
alignItems: 'center',
height: moderateScale(120),
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
zIndex: 1,
},
fieldDescription: {
alignItems: 'center',
},
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
},
container: {
height: '100%',
backgroundColor: 'white',
width: '100%',
flex:1,
},
});

You have to add styles to your <View style={styles.container}>. Like:
container: {
display:"flex",
flex-direction:"column",
//etc
}
Because now your Views are all separate from each other.

How to create fixed overlay <View> React Native

I want to make the grey box position is fixed, so when I scrolldown or scrollup the grey box is stay still on it position.
Is it possible to do such thing in React Native ?
Here's my code:
<View>
<ScrollView>
<View style={styles.continueToPaymentContainer}>
</View>
</ScrollView>
</View>
container: {
flex: 1,
// justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
continueToPaymentContainer:{
width:width,
height: 100,
position:'absolute',
bottom:0,
backgroundColor: 'grey',
}

Try below code. You just have to add your view outside the scroll view.
<View>
<ScrollView>
// Do your stuff
</ScrollView>
<View style={styles.continueToPaymentContainer}>
</View>
</View>
container: {
flex: 1,
// justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
continueToPaymentContainer:{
width:width,
height: 100,
position:'absolute',
bottom:0,
backgroundColor: 'grey',
}

I just found it
All I need to do is just put my grey box on the outside of <ScrollView>
<View>
<ScrollView>
<Another element>
</ScrollView>
<View style={styles.continueToPaymentContainer}>
</View>
</View>
I hope this will helps for future search

Change Button Color onPress (toggle functionality) React Native

hope all is well.
I seem to be having difficulty with a basic button functionality. All I need is the state of the class to change and the button style to change every-time the button is pressed. Unlike TouchableHighlight, I need to color change to stay until the button is pressed again (to go back to the original color).
I have tried to use SwitchIOS but it doesn't seem to be easily styled into a circular button, and therefore doesn't really work out. I am a novice so still learning and would greatly appreciate your help. Here is what I have so far:
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
Image,
TouchableHighlight,
TextInput,
} = React;
class LS1 extends React.Component{
constructor(props){
super(props);
this.state = {
paleo: false,
vegan: false,
vegetarian: false,
nutfree: false,
dairyfree: false,
healthy: false,
glutenfree: false,
}
}
SkipLogin() {
var num = window.height/8.335;
console.log(num);
}
render() {
return (
<View style={styles.container}>
<Image source={require('image!LS1')} style={styles.bgImage}>
<Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>
<View style={styles.container}>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice}>
<Image style={styles.bubblechoice} source={require('image!vegan')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Vegan</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!paleo')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Paleo</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!nutfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Nut-Free</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!glutenfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Gluten-Free</Text>
</View>
</Image>
</TouchableHighlight>
</View>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-50}}>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!dairyfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Dairy-Free</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!vegetarian')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Vegetarian</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,1)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!healthy')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Healthy</Text>
</View>
</Image>
</TouchableHighlight>
</View>
</View>
<Image source={require('image!nextbtn')} style={{resizeMode: 'contain', width:200, height:50, alignSelf: 'center', marginBottom: 50}}/>
<TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
<View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
<Text>skip this step</Text>
</View>
</TouchableHighlight>
</Image>
</View>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
},
bgImage: {
flex: 1,
width: window.width,
resizeMode: 'cover',
},
icontext: {
color: '#5d5d5d',
fontWeight: '400',
fontSize: 20,
backgroundColor: 'transparent',
paddingLeft: 10,
alignItems: 'center',
marginTop: window.height/2.2,
textAlign: 'center',
margin: 10,
},
bubblechoice_click: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
bubblechoice: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
row: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
marginTop: -30,
},
choicetext: {
alignItems: 'center',
alignSelf: 'center',
color: 'white',
marginTop: 35,
fontWeight: '600',
marginLeft: -18,
fontSize: 14,
flex: 1,
textAlign: 'center'
},
overlay: {
backgroundColor:'rgba(80,94,104,0.7)',
height: 100,
width: 100,
alignItems:'center'
},
});
module.exports = LS1;
And here is a visual of what that produces:
Here's what the button should look like after being selected:

I think you should take a step back and do some basic React tutorials before digging too much into React Native - this is a fairly straightforward problem to solve :) Here's a solution for you:
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
Image,
TouchableHighlight,
TextInput,
} = React;
class ToggleButton extends React.Component {
render() {
return (
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice} onPress={this.props.onPress}>
<Image style={styles.bubblechoice} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}>
<View style={[styles.overlay, this.props.selected ? {backgroundColor: 'rgba(80,94,104,0)'} : {}]}>
<Text style={styles.choicetext}>{this.props.label}</Text>
</View>
</Image>
</TouchableHighlight>
);
}
}
class LS1 extends React.Component{
constructor(props){
super(props);
this.state = {
paleo: false,
vegan: false,
vegetarian: false,
}
}
updateChoice(type) {
let newState = {...this.state};
newState[type] = !newState[type];
this.setState(newState);
}
SkipLogin() {
var num = window.height/8.335;
console.log(num);
}
render() {
return (
<View style={styles.container}>
<View style={styles.bgImage}>
<Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>
<View style={styles.container}>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
<ToggleButton label='Vegan' onPress={() => { this.updateChoice('vegan') }} selected={this.state.vegan} />
<ToggleButton label='Paleo' onPress={() => { this.updateChoice('paleo') }} selected={this.state.paleo} />
<ToggleButton label='Vegetarian' onPress={() => { this.updateChoice('vegetarian') }} selected={this.state.vegetarian} />
</View>
</View>
<TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
<View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
<Text>skip this step</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
},
bgImage: {
flex: 1,
width: window.width,
resizeMode: 'cover',
},
icontext: {
color: '#5d5d5d',
fontWeight: '400',
fontSize: 20,
backgroundColor: 'transparent',
paddingLeft: 10,
alignItems: 'center',
marginTop: window.height/2.2,
textAlign: 'center',
margin: 10,
},
bubblechoice_click: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
bubblechoice: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
row: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
marginTop: -30,
},
choicetext: {
alignItems: 'center',
alignSelf: 'center',
color: 'white',
marginTop: 35,
fontWeight: '600',
marginLeft: -18,
fontSize: 14,
flex: 1,
textAlign: 'center'
},
overlay: {
backgroundColor:'rgba(80,94,104,0.7)',
height: 100,
width: 100,
alignItems:'center'
},
});
module.exports = LS1;
AppRegistry.registerComponent('main', () => LS1);
You can try it out by downloading Exponent to your phone from http://exponentjs.com/ (app store or beta, whichever you prefer) then loading up exp://exp.host/#brentvatne/button-color-exp

Simplest way with TouchableOpacity and active styles:
<TouchableOpacity
style={ this.state.active? styles.btnActive : styles.btn}
onPress={() => this.setState({active: !this.state.active})}>
</TouchableOpacity>

Develop Reference

JavaScript is the programming language of the Web.

ScrollView child layout must be applied through the contentContainerStyle prop - javascript

Add style like this <Swiper loop={false} index={0} contentContainerStyle={styles.wrapper} activeDotColor={'#EEE'}>

Use contentContainerStyle props instead of style props. contentContainerStyle={styles.wrapper}

Related

Trouble storing use input text in react native

different color for every item of flatlist based on condition

overlap button with another view

How to create fixed overlay <View> React Native

Change Button Color onPress (toggle functionality) React Native

Categories

Resources