React Native FlexLayout: Alignment item right - reactjs

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.

Related

React native app crash when app more layers of view components

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",
},
});

Text out of view in Touchable opacity React native

I'm new to react native and i'm trying to display some text in a custom touchable opacity. but the text keep exceeding the border even when i'm using flex wrap. my code is the following:
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row' }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View>
<Text style={styles.txt}> k </Text>
<Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
<Text> kk </Text>
</View>
</TouchableOpacity>
</View>
</View>
and here is look of the styles i used:
main_container: {
flex: 1,
height: 300,
flexDirection: 'column',
backgroundColor: "grey",
width: '95%',
margin: 10,
},
ctr1: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
//margin: 2,
},
How can i wrap it
Issue was not in the <Text> element that you have given the style flexWrap:1. Problem was in the parent elements.
Adding flex: 1 to <TouchableOpacity> and <View> which contains your <text> will solve the problem.
This will do the calculation for width depends on the device width.
<View style={styEdit.main_container}>
<View style={styEdit.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styEdit.txt}>k</Text>
<Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
<Text>kk</Text>
</View>
</TouchableOpacity>
</View>
</View>
Tested the code in my machine.
Cheers!

On adding viewpager videos are not getting displayed

I have used a flatlist to list 4 videos getting fetched from an API, however I want them to scroll one at a time, hence added viewpager to render each video as a separate page, however on adding viewpager I do not seem to retrieve the videos on front-end, however they are appearing on my logs.
Code with viewpager:
<ViewPager scrollEnabled={true} orientation={"vertical"} >
<FlatList
data={this.state.data.product}
scrollEventThrottle={1}
onEndThreshold={0}
renderItem={({ item }) => (
<View style = {{alignContent: 'stretch'}} >
<ScrollView scrollEventThrottle={1}>
<ViewportAwareVideo
repeat paused={this.state.videoPaused}
source={{ uri: item.urlVid }}
resizeMode = "cover"
preTriggerRatio={PRE_TRIGGER_RATIO}
retainOnceInViewport={false}
style={{width: width, height:height}}
innerRef={ref => this._videoRef = ref}
onViewportEnter={() => this._videoRef.play()}
onViewportLeave={() => this._videoRef.stop()}
/>
</ScrollView>
<View
style={{
position: 'absolute',
flexDirection: 'column',
alignItems: 'flex-end',
top: '50%',
right: 10,
}}>
<TouchableOpacity
onPress= {() => this.onButtonPress(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon
name="heart"
size={30}
color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.shareProduct(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="share" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="whatsapp" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
onPress= {() => this.download(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="download" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
top: '90%',
left: 10,
}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
{item.title} - {item.price}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
)}
keyExtractor={ item => item._id}
/>
</ViewPager>
Please help me, and let me know why is it so?

React Native align-items: baseline not working

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
}

ReactNative: how to position Text-Elements one under another

I have to create a ListView having Rows which contains an Icon on the left and two text elements like so:
But what i get is this:
How to archieve this?
This is my render method for the row:
return (
<TouchableHighlight underlayColor='#dddddd'>
<View style={styles.container}>
<Icon
name='fontawesome|phone'
size={30}
color='gray'
style={styles.contactIcon}
/>
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
And these are my styles:
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 15,
},
details: {
fontSize: 14,
marginBottom: 8
},
headline: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
flex: 1
},
I tried to play with a width-statement for each text-element making it as wide as possible, nothing helped.
You have to wrap your both text-nodes in a parent-textnode giving style "flex=1" :
check this out:
<View style={{ flex: 1 }} >
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
</View>
As an alternate solution, you could surround the two text elements with a view and then set its flex direction to column
<View style={{flex: 1, flexDirection: 'column'}}>
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
</View>

Resources