I need to align 2 svg icons and a view with some text to the baseline, but as you can see from the snapshot it's not working.
This is the result that I want:
This is the code:
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.openDrawer()} style={{marginRight: 20}}>
<MenuIcon />
</TouchableOpacity>
<View>
<Text style={styles.date}>24 ottobre 2019</Text>
<Text style={styles.title}>Compiti</Text>
</View>
<TouchableOpacity onPress={() => navigation.navigate({routeName: 'Calendary'})} style={{position: 'absolute', right:0}}>
<CalendarIcon width={50} height={50} />
</TouchableOpacity>
</View>
and this is the style
const styles = StyleSheet.create({
header: {
flex: 1,
flexDirection: 'row',
alignItems: 'baseline',
},
date: {
color: '#C8C8C8',
fontSize: 15
},
title: {
fontSize: 40,
fontWeight: '400',
color: '#454545',
},
});
Your header style should be as following :
header: {
flex: 1,
flexDirection: 'row',
alignItems: 'center', // add center instead of flex-end
}
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 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 am trying to get an image viewer to work with my gallery, The library I use https://github.com/ascoders/react-native-image-viewer gives option to render a react element in the header. I am using this following element in the place of header
<View styles={modalStyles.header}>
<View onPress={props.closeModal} style={modalStyles.leftHeader}>
<Icon name="close" size={20} color="#fff"></Icon>
</View>
<View onPress={() => props.startDownload(props.getShowingImage())} style={modalStyles.rightHeader}>
<Icon name="download" size={30} color="#fff"></Icon>
</View>
</View>
and here is my styles
const modalStyles = StyleSheet.create({
header: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
backgroundColor: "red",
},
leftHeader: {
marginLeft: 20,
padding: 10,
alignSelf: 'flex-start',
backgroundColor: "red",
},
rightHeader: {
marginRight: 20,
padding: 10,
alignSelf: 'flex-end',
backgroundColor: "red",
},
})
and here is how the modal looks like
This is how i get content inline one at left and one at right. Also you have typo in your code .. rename style with styles
<View style={[{flexDirection:'row', alignItems:'center'}]}>
<View style={[{flex:1,flexDirection:'row'}]}>
//... left content
</View>
<View style={[{justifyContent:'space-evenly', marginVertical:10}]}>
// .... right content
</View>
</View>
I am importing a custom component (RecipeCard) and it isn't appearing on the screen.
I'm fairly certain it is to do with the styling that I am currently using.
The fastimage component works exactly as the RN component does and can be seen here.
Any help is appreciated!
File1
<View style={styles.container}>
<Head
headerText={this.props.type}
navigation={this.props.navigation}
backButton
/>
<FlatList
data={this.state.data}
renderItem={({ item }) => <RecipeCard {...item} />}
/>
</View>
const styles = {
container: {
flex: 1
}};
RecipeCard
<FastImage
style={styles.imageStyle}
source={{ uri: this.props.image }}
>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.title}
</Text>
<Text style={styles.subtitleText}>
{this.props.subtitle}
</Text>
</View>
</FastImage>
const styles = StyleSheet.create({
imageStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'transparent',
},
titleContainer: {
position: 'absolute',
marginTop: 15,
zIndex: 2,
bottom: 13,
flex: 1,
width: '100%',
height: 70,
flexDirection: 'column',
alignItems: 'flex-start',
},
titleText: {
color: 'white',
fontWeight: '800',
paddingLeft: 5,
paddingTop: 10
},
subtitleText: {
color: '#adadad',
fontWeight: '500',
paddingLeft: 5,
paddingTop: 5,
}
});
Try to add the resizeMode to the FastImage:
resizeMode={FastImage.resizeMode.contain}
It's also described in the docs of FastImage:
import FastImage from 'react-native-fast-image'
const YourImage = () =>
<FastImage
style={styles.image}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers:{ Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
I tried the example you have given above, I was able to see the image with a little change in imageStyle, just added height and it was showing the images.
RecipeCard component
const RecipeCard = (props) => {
return (
<FastImage
style={styles.imageStyle}
source={{ uri: 'https://unsplash.it/400/400?image=1' }}
>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{props.title}
</Text>
<Text style={styles.subtitleText}>
{props.subtitle}
</Text>
</View>
</FastImage>
);
}
In imageStyle I have added height
imageStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'transparent',
height: 200
},
Hope this helps!
I have a list of products and want to display the text "ITEM UNIT" at the right end of my infobox. It is however affected by the position of the text above it.
How do I solve this and put "ITEM UNIT" to the right end of the display?
<TouchableOpacity
onPress={() => this.props.onItemClicked(this.props.item)}
style={{ marginRight: 130 }}
>
<View style={styles.itemContent}>
<View>
<FadeIn>
<Image
resizeMode="contain"
style={{
height: 100,
width: 100,
marginTop: 10,
marginLeft: 10
}}
source={{ uri: url }}
/>
</FadeIn>
</View>
<View style={{ justifyContent: "space-around" }}>
<Text style={{ fontSize: 16, fontFamily: "System" }}>
{articleName}
</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-between"
}}
>
<View style={{ flexDirection: "row" }}>
<Text style={styles.itemPrice}>{originalprice} </Text>
<Text style={styles.itemPriceReduced}>{specialprice}€</Text>
</View>
<View>
<Text>ITEMUNIT</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>;
I crated a small demo for you. Please check it here:
https://snack.expo.io/#tarikfojnica/layout (Click Tap To Play on the right side)
Here are the code parts you should check:
<TouchableOpacity style={styles.container} onPress={() => this.props.onItemClicked(this.props.item)}>
<View style={styles.itemContent}>
<View style={styles.iconContainer}>
<Image source={Icon} style={styles.icon} />
</View>
<View style={styles.textContainer}>
<Text>This is the title </Text>
<View style={styles.downText}>
<View style={styles.priceText}>
<Text style={{marginRight: 10}}>$99.9</Text>
<Text>$99.9</Text>
</View>
<View style={styles.label}>
<Text>Label</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
container: {
marginTop: 24,
},
itemContent: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: 'e5e5e5'
},
iconContainer: {
padding: 10,
flex: 1,
},
icon: {
width: 40,
heigth: 40
},
textContainer: {
backgroundColor: 'whitesmoke',
flex: 7,
padding: 5
},
downText: {
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
priceText: {
flexDirection: 'row',
},
label: {
textAlign: 'right',
backgroundColor: 'yellow',
padding: 3
}
});
For a reference, here is how it looks like:
PS: I would avoid writing inline styles.