Related
when ever I add this line of code in my react native app it
crashes.The expo app closes with out no error being thrown to the
console and its quite hard to debug because I don't see anything wrong
with the code.
What am thinking is it is wrong to have many views inside of a view component but I have not seen anyone complain about such error
<View>
<View style={styles.sameRowContainer}>
<View style={[styles.iconContainer, { backgroundColor: "#0CCE6B" }]}>
<Feather name="repeat" size={14} color="white" />
</View>
<Text style={styles.title}>Goal</Text>
</View>
<View>
<Text style={styles.title}>hello</Text>
</View>
</View>
this is the code that is render for the screen
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<ScrollView
showsVerticalScrollIndicator={false}
style={styles.container}
// contentContainerStyle={{ alignItems: "center" }}
>
<View style={styles.habitNameContainer}>
<Text style={styles.title}>Habit Name</Text>
<TextInput
style={styles.input}
onChangeText={onChangeTitle}
value={title}
placeholder={"Learn photography..."}
placeholderTextColor={"hsla(224, 100%, 10%, 0.343)"}
/>
</View>
<View style={styles.timeOfDay}>
<Text style={styles.title}>Select time of day to complete habit</Text>
<TimeOfDay
currentView={currentView}
setCurrentView={setCurrentView}
/>
</View>
<View>
<View style={styles.sameRowContainer}>
<View
style={[styles.iconContainer, { backgroundColor: "#0CCE6B" }]}
>
<Feather name="repeat" size={14} color="white" />
</View>
<Text style={styles.title}>Goal</Text>
</View>
<View>
<Text style={styles.title}>hello</Text>
</View>
</View>
<View style={styles.dummyView}></View>
</ScrollView>
</TouchableWithoutFeedback>
);
this is the style for the component as well
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
paddingHorizontal: 20,
paddingVertical: 20,
},
dummyView: {
height: 50,
},
habitNameContainer: {
// width: "90%",
marginBottom: 40,
},
title: {
marginLeft: 10,
fontSize: 16,
marginBottom: 5,
color: "hsl(0, 0%, 50%)",
},
input: {
flexDirection: "row",
fontSize: 18,
paddingLeft: 15,
height: 50,
borderRadius: 30,
backgroundColor: "hsl(224, 100%, 98%)",
fontWeight: "500",
},
timeOfDay: {
// flexDirection: "row",
marginBottom: 40,
},
sameRowContainer: {
flexDirection: "row",
alignItems: "baseline",
},
iconContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
height: 26,
width: 26,
borderRadius: 8,
backgroundColor: "#0CCE6B",
},
});
I´m trying without success to use the ScrollView component in React Native, below the code:
const width_proportion = '97%';
const height_proportion = '75%';
const styles = StyleSheet.create({
container: {
height: '100%'
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
},
text: {
color: "grey",
fontSize: 30,
fontWeight: "bold"
},
popup: {
color: '#CA0',
},
box: {
width: width_proportion,
height: height_proportion,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'steelblue',
// position: "absolute",
marginTop: '5%',
marginBottom: '3%',
marginLeft: '2%'
},
bottomBox: {
width: '97%',
height: 125,
backgroundColor: 'steelblue',
marginLeft: '2%',
marginBottom: 10,
marginTop: 5,
padding: 5
}
});
const MyTheme = {
colors: {
...DefaultTheme.colors,
background: '#EFA',
primary: '#000',
text: '#000',
},
};
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<View style={{ width: '100%', height: 50, backgroundColor: 'steelblue' }}>
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Image source={hamburgerMenu} style={{ height: 45, width: 45, alignItems: 'center' }}>
</Image>
</TouchableOpacity>
</View>
<ImageBackground source={imgBackground} style={styles.image}>
<View style={styles.box}>
</View>
<ScrollView horizontal={true} >
<View style={styles.bottomBox}>
</View>
<View style={styles.bottomBox}>
</View>
<View style={styles.bottomBox}>
</View>
</ScrollView>
</ImageBackground>
</View >
);
}
When I set the horizontal property to "true" from ScrollView, the component disappears. Only I set horizontal to "false" and the ScrollView workks fine in Vertical.
wrap your scrollview like this
<ScrollView horizontal={true}>
<View style={styles.bottomBox} />
<View style={styles.bottomBox} />
<View style={styles.bottomBox} />
</ScrollView>
bottomBox : {
width: 40,
height: 125,
backgroundColor: 'steelblue',
padding: 5,
marginRight: 10,
}
I'm building an app which uses the Map method to build several different components. I have a scrollview which contains the whole page. Currently, the scrollView won't expand to contain everything despite trying what is seemingly every bit of advice online.
I have tried having the scrollview be inside another view but that still doesn't work as well as a combination of different flex configurations. Does anyone know why this page in particular isn't working. I have compared it to other pages and there is seemingly no reason as to why the flex does not extend.
Thanks
render(){
return (
<ScrollView contentContainerStyle={{flexGrow: 1}} >
<View style={styles.pageContainer}>
<View style={styles.photoShowcase }>
{
this.state.images.map((item, key) => (
<Image key = {key} source={{uri: item}} style = {{width: 200, height: 200}} />
))
}
</View>
<View style = {styles.cameraContainer}>
<TouchableHighlight onPress={this.handleChoosePhoto}>
<Icon type='font-awesome' name='photo' size={60} />
</TouchableHighlight>
<Icon type='font-awesome' name='camera' size={120} />
<Icon type='font-awesome' name='map-o' size={60} />
</View>
<View style= {styles.detailsContainer}>
<View >
<TextInput onChangeText={(text) => {this.setState({title: text})}} style = {styles.title} >New Day Title </TextInput>
</View>
<View style = {styles.description}>
<TextInput onChangeText={(text) => {this.setState({description: text})}} multiline={true}>Description for the text goes here</TextInput>
</View>
</View>
<View style = {styles.friendsContainer}>
<View>
<Text style = {styles.friendsSectionTitle}>I spent today with: </Text>
</View>
<ScrollView horizontal= {true}>
<View style={styles.peopleContainer}>
{
this.state.friends.map((item, key) => (
<View key={key} >
<TouchableHighlight >
<PersonEntryBox name={item.name} backgroundImageToUse={item.image} style = {styles.smallBox} functionToRun = {() => {this.state.selectedFriends.push(item)}} />
</TouchableHighlight>
</View>
))
}
</View>
</ScrollView>
</View>
<View style={{height: '40%', width: '100%'}}>
<MapView
style={{...StyleSheet.absoluteFillObject}}
initialRegion={{
latitude: 45.5209087,
longitude: -122.6705107,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onPress={this.handlePress}
>
{this.state.markers.map((marker) => {
return (
<Marker {...marker} >
<View style={styles.marker}>
<Text style = {styles.markerText}>{marker.cost}</Text>
</View>
</Marker>
)
})}
</MapView>
</View>
<View style = {styles.ratingsButtonContainer}>
<RateTheDayBox style={styles.badDay} dayRating="Bad" onClick={() => {this.state.rating ="red"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.okayDay} dayRating="Okay" onClick={() => {this.state.rating = "yellow"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.greatDay} dayRating="Great" onClick={() => {this.state.rating = "green"; this.storeDay()}}></RateTheDayBox>
</View>
</View>
</ScrollView>
);
}}
const styles = StyleSheet.create({
pageContainer: {
paddingTop: 50,
alignItems: 'center',
flex: 1,
},
mapContainer:{
flex: 1,
},
marker: {
backgroundColor: "#550bbc",
padding: 5,
borderRadius: 5,
},
text: {
color: '#FFF',
fontWeight: "bold",
},
photoShowcase: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'flex-end',
zIndex: 0,
height: 200
},
cameraContainer: {
flexDirection: 'row',
paddingTop:20,
paddingLeft: '5%',
paddingRight: '5%',
width: '100%',
height: '25%',
alignItems: 'center',
justifyContent: 'space-around',
},
iconStyles: {
marginLeft: 10,
color: 'red',
},
detailsContainer: {
width: '100%',
height: '35%',
},
title: {
paddingLeft: 10,
fontSize: 40,
textDecorationLine: 'underline',
},
description: {
paddingLeft: 11,
paddingTop: 10,
},
friendsContainer: {
width: '100%',
height: '20%',
},
boxContainers: {
flexDirection: 'row',
},
friendsSectionTitle: {
paddingLeft: 10,
fontSize: 30,
},
ratingsButtonContainer: {
width: '100%',
height: '20%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
badDay: {
backgroundColor: 'red',
},
okayDay: {
backgroundColor: 'yellow',
},
greatDay: {
backgroundColor: 'green',
},
peopleContainer: {
paddingTop: 10,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'center' ,
width: '100%',
height: '100%',
},
});
EDIT: For anyone suffering from the same issue, REMOVE PERCENTAGES FROM HEIGHTS. This fixed this issue for me.
Maybe just use style instead of contentContainerStyle ? the doc says :
These styles will be applied to the scroll view content container which wraps all of the child views
So maybe here is your problem, you're not applying the flexGrow to the scrollView but to its wrapper
I can't get my app to fill the whole screen. Whatever i do, there is always a white bar on the bottom of the page. It's so strange because it works on some devices but not others. i'm going crazy over this!
Ive tried const { height, width } = Dimensions.get('window'); and setting the app height with that, and it actually worked once, but now i can't get it to work again. ive tried rewrapping everything in different ways, with different views and scrollviews.
ps.: i removed all functions and useless code so it's not too much code, but
here is my code
import React, { Component } from 'react';
import {
View,
Switch,
Text,
TextInput,
TouchableOpacity,
ImageBackground,
Image,
Linking,
StatusBar,
Dimensions,
} from 'react-native';
import { ScaledSheet } from 'react-native-size-matters';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
export default class App extends Component {
constructor() {
super();
};
}
render() {
return (
<View style={styles.container}>
<KeyboardAwareScrollView
keyboardShouldPersistTaps={'always'}
style={styles.teste}
showsVerticalScrollIndicator={false}>
<StatusBar backgroundColor="#50a9f3" />
<ImageBackground source={require('./background.png')} style={styles.imagemBackground}>
<View style={styles.campos}>
<Image
style={{ width: 110, height: 110, alignSelf: 'center' }}
source={require('./logo.png')}
/>
<View style={styles.item}>
<Text style={styles.texto}>M²s do ambiente</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={mQuadrado => this.setState({ mQuadrado })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de pessoas</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={pessoas => this.setState({ pessoas })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de eletrodomésticos</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={eqps => this.setState({ eqps })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de janelas </Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={jnls => this.setState({ jnls })}
/>
</View>
<View style={styles.switch}>
<Text style={styles.texto}>Recebe luz solar </Text>
<Switch
style={{ transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }] }}
thumbColor="#ffffff"
trackColor={{ true: '#c0c0c0' }}
value={this.state.switch}
onValueChange={value => this.setState({ switch: value })}
/>
</View>
<View style={styles.input}>
<TouchableOpacity style={styles.opacity} onPress={this.calcular}>
<Text style={styles.textoCalcular}>CALCULAR</Text>
</TouchableOpacity>
</View>
<View style={styles.resultadoBox}>
<Text style={styles.textoResultado}>Você precisará de</Text>
<Text style={styles.resultado}>{btu == '0' ? null : btu + '.000 BTUS'}</Text>
</View>
</View>
<View style={styles.banner}>
<TouchableOpacity
style={styles.bannerContainer}
onPress={() => Linking.openURL('https://matum.com.br/produtos-sisum/')}>
<Text style={styles.bannerTexto}>Gerencie suas manutenções preventivas e corretivas</Text>
<Text style={styles.bannerTexto}>Relatório PMOC simples</Text>
<Text style={styles.bannerTextoX}>Saiba mais</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</KeyboardAwareScrollView>
</View>
);
}
}
const { height, width } = Dimensions.get('window');
const heightCerto = height - StatusBar.currentHeight;
const styles = ScaledSheet.create({
container: {
flex: 1,
},
teste: {
flex: 1,
},
imagemBackground: {
flex: 1,
},
campos: {
flex: 95,
justifyContent: 'flex-start',
alignItems: 'stretch',
padding: '20#s',
paddingTop: '12#s',
},
item: {
flex: 1,
},
switch: {
paddingTop: '15#s',
flexDirection: 'row',
justifyContent: 'flex-start',
flex: 1,
},
textoCalcular: {
fontSize: '15#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 2,
},
input: {
padding: '20#s',
alignItems: 'center',
flex: 1,
},
opacity: {
backgroundColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
borderColor: '#000000',
width: '190#s',
height: '39#s',
justifyContent: 'center',
alignItems: 'center',
},
resultadoBox: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(100,100,100,0.5)',
margin: 0,
borderColor: 'rgba(100,100,100,0.5)',
borderRadius: '10#s',
},
resultado: {
fontSize: '28#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
banner: {
flex: 10,
backgroundColor: 'rgba(140,140,140,0.5)',
margin: 0,
borderColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
alignSelf: 'stretch',
},
bannerContainer: {
alignItems: 'center',
},
bannerTexto: {
color: '#ffffff',
fontSize: '12#s',
},
bannerTextoX: {
color: '#50a9f3',
fontSize: '10#s',
textShadowColor: 'black',
textShadowRadius: 4,
},
inputText: {
fontSize: '12#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
height: '38#s',
},
texto: {
fontSize: '13#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 5,
},
textoResultado: {
fontSize: '16#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
});
I think you're talking about the image background but not totally sure. I was able to get it to stretch to the full height by adding the following height declaration:
imagemBackground: {
flex: 1,
height: height,
},
link to example: https://snack.expo.io/r1Y-zpwMH
You are using flex:1 many times in style that is the problem.
please give flex:1 in container style and remove all flex:1 in other styles instead of flex:1 you can use width and height in percentage.
like style={{width:'100%',height:'40%'}}.
Thank you!
When I scroll vertically up and down, animation starts lagging in the first two components (CompetitionsList, CampList) after the slider (BannerSwiper). I couldn’t fix it. I tried using Animation.ScrollView with "UseNativeDriver: true", but it didn’t help. Something might be wrong with css.
Here is a gif of screen:
https://i.yapx.ru/DT9CR.gif
This is my code:
export default class HomeComponent extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView >
<BannerSwiper/>
<CompetitionsList home={true} {...this.props}/>
<CustomDivider/>
<CampList home={true} {...this.props}/>
<CustomDivider/>
<NewsComponent home={true} {...this.props}/>
<CustomDivider/>
<AthletesBirthdayList {...this.props}/>
<CustomDivider/>
<RatingsBlock/>
<CustomDivider/>
<SocialBlock/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f2f2f2',
}
});
export default class CompetitionsList extends React.Component {
...
render() {
const {
compListForHome
} = this.props.competitions;
return (
<View style={styles.homeContainer}>
<View style={styles.headerContainer}>
<Text style={[styles.header, {marginRight: 'auto'}]}>СОРЕВНОВАНИЯ</Text>
<Text
style={[styles.header, {marginLeft: 'auto', color: '#2f95dc'}]}
onPress={() => this.props.routing('navigate', 'Competitions')}
>ВСЕ</Text>
</View>
<View style={{alignItems: 'center'}}>
<View style={styles.contentContainer}>
<ScrollView
style={{flex: 1}}
horizontal={true}
showsHorizontalScrollIndicator={false}>
<AnimatedComponent>
<View style={styles.cardContainer}>
<View style={styles.cardWrapper}>
{
compListForHome.map(event =>
<TouchableWithoutFeedback key={event.id} onPress={() => console.log(event.id)}>
<Card
containerStyle={styles.cardWidth}
title={
<View style={styles.cardTitleStyleContainer}>
<Text numberOfLines={1} style={styles.cardTitleStyleText}>{event.name}</Text>
</View>
}
imageStyle={styles.image}
image={event.URL_logo? {uri: event.URL_logo} : SP_IMAGE}>
<View style={styles.cardLabeledContainer}>
<Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.start_date)}</Text>
<Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.end_date)}</Text>
</View>
<Text style={styles.cardText} numberOfLines={1}>{getFullCourseNameByCode(event.course)}</Text>
<Text style={styles.cardText} numberOfLines={1}>{getFullCompetitionStatusByCode(event.status)}</Text>
{
event.reg_status
? <Text style={styles.cardText} numberOfLines={1}>Регистрация: {getFullRegistrationStatusByCode(event.reg_status)}</Text>
: null
}
</Card>
</TouchableWithoutFeedback>
)
}
</View>
</View>
</AnimatedComponent>
</ScrollView>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
spinContainer: {
height: 50
},
overlay: {
flex: 1,
position: 'absolute',
bottom: 10,
width: SCREEN_WIDTH,
justifyContent: 'center',
alignItems: 'center'
},
filterBtn: {
backgroundColor: '#2f95dc',
alignSelf: 'center'
},
homeContainer: {
flex: 1,
marginHorizontal: 50
},
fullListContainer: {
flex:1
},
headerContainer: {
flex: 1,
flexDirection: 'row',
width: SCREEN_WIDTH-80
},
header: {
fontSize: 17,
color: 'rgba(96,100,109, 1)',
lineHeight: 24,
marginTop: 15
},
contentContainer: {
flex: 1,
marginTop: 10,
width: SCREEN_WIDTH
},
cardContainer: {
flex: 1,
flexDirection: 'column',
marginRight: 10
},
cardWrapper: {
flex: 1,
flexDirection: 'row'
},
cardTitleStyleContainer: {
padding: 20,
marginBottom: 15,
borderTopStartRadius: 5,
borderTopEndRadius: 5,
backgroundColor: "#2f95dc",
alignItems: 'center'
},
cardTitleStyleText: {
fontSize: 16,
lineHeight: 24,
color: '#fff',
fontWeight: 'bold'
},
cardWidth: {
width: 250,
height: 360,
borderWidth: 1,
borderRadius: 6,
borderColor: '#ddd',
shadowColor: '#000',
shadowOffset: { width: 5, height: 5 },
shadowOpacity: 0.8,
shadowRadius: 5,
elevation: 4,
marginBottom: 7
},
image: {
width: 100,
height: 100,
borderRadius: 100,
overflow: 'hidden',
alignSelf: 'center'
},
cardText: {
color: 'rgba(96,100,109, 0.8)',
fontSize: 14,
lineHeight: 14,
alignSelf: 'center',
marginBottom: 10
},
cardLabeledContainer: {
backgroundColor: 'rgba(0,0,0,0.05)',
borderRadius: 3,
marginTop: 10,
marginBottom: 20,
marginHorizontal: 30,
padding: 5
},
cardTextLabeled: {
alignSelf: 'center',
fontSize: 15,
color: 'rgba(96,100,109, 0.8)'
}
});
Thank you for your help!