Hi, I want the date shown above to be on the right side of the view, however am unable to do it, could anyone suggest anything?
My code:
<View style={{padding: 10}}>
{props.data.data.content != undefined &&
props.data.data.content != null &&
props.data.data.content.map((item) => {
return (
<View
style={{
flexDirection: 'row',
padding: 10,
backgroundColor: '#fff',
elevation: 3,
margin: '2%',
borderRadius: 5,
}}>
<View>
<Image
source={require('../assets/atbirth.jpg')}
style={{height: 40, width: 50}}
resizeMode="contain"
/>
</View>
<View>
<View style={{flexDirection: 'row'}}>
<Text
key={item.id}
style={{
fontFamily: 'Roboto',
fontSize: 18,
fontWeight: 'bold',
}}>
{item.name}
</Text>
<View >
<Text style={{color: 'grey', fontSize: 12,}}>
{item.display_date}
</Text>
</View>
</View>
<View style={{flexDirection: 'row'}}>
{item.vaccine_list.map((i) => {
return (
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily: 'Roboto', fontSize: 15}}>
{i.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
);
})}
</View>
Let me know, where am going wrong and how do I implement the above shown behavior, any suggestions would be great.
You can align your elements by using Flex.
<View style={{padding: 10}}>
{props.data.data.content != undefined &&
props.data.data.content != null &&
props.data.data.content.map((item) => {
return (
<View
style={{
flexDirection: 'row',
padding: 10,
backgroundColor: '#fff',
elevation: 3,
margin: '2%',
borderRadius: 5,
}}>
<View>
<Image
source={require('../assets/atbirth.jpg')}
style={{height: 40, width: 50}}
resizeMode="contain"
/>
</View>
<View style={{flex:1}}>
<View style={{flexDirection: 'row', flex: 1}}>
<Text
key={item.id}
style={{
fontFamily: 'Roboto',
fontSize: 18,
fontWeight: 'bold',
}}>
{item.name}
</Text>
<View style={{alignItems: 'flex-end'}}>
<Text style={{color: 'grey', fontSize: 12,}}>
{item.display_date}
</Text>
</View>
</View>
<View style={{flexDirection: 'row'}}>
{item.vaccine_list.map((i) => {
return (
<View style={{flexDirection: 'row'}}>
<Text style={{fontFamily: 'Roboto', fontSize: 15}}>
{i.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
);
})}
</View>
Using Flex you are going to take all the available space and then you will be able to align the date to the right
Related
next to Entertain text, there is an icon, called Button,
When I click on that icon, I want those parts(netflix to twitch) to come that place.
How can I do that? I mean, i want those part to be hide at first, but after i click on that icon, it should come to that place.
Here are my code,
ThirdScreen.js
import React from "react";
import { Text, SafeAreaView, View, StyleSheet, ScrollView } from "react-native";
import Transfer from "../icons/transfer.svg";
import Entertain from "../icons/entertain.svg";
import Netflix from "../icons/netflix.svg";
import Button from "../icons/button.svg";
import Dribble from "../icons/dribble.svg";
import Spotify from "../icons/spotify.svg";
import Twitch from "../icons/twitch.svg";
import Bill from "../icons/bill.svg";
import Time from "../icons/time.svg";
import Home from "../icons/home.svg";
import User from "../icons/user.svg";
import Ratio from "../icons/ratio.svg";
const ThirdScreen = () => {
return (
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff"}}>
<View style={{ alignItems: "center", padding: 20 }}>
<Text style={styles.transaction}>Transaction History</Text>
</View>
<View style={{ padding: 10, }}>
<View style={styles.rows}>
<Text style={styles.bigBold}>Category</Text>
<Text style={{ color: "#7cb3d9" }}>This week</Text>
</View>
<View style={{ padding: 20 }}>
{/* Transfer */}
<View style={[styles.elevation, {marginBottom:10,}]}>
<View style={[styles.rows, {padding:5}]}>
<View style={styles.iconText}>
<Transfer height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Transfer</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
{/* Entertain */}
<View style={styles.elevation}>
<View style={[styles.rows,{padding:5,}]}>
<View style={styles.iconText}>
<Entertain height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Entertain</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
<ScrollView style={{padding:10}}>
{/* Netflix */}
<View style={styles.rows}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#ffd4d5"}]}>
<Netflix height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Netflix</Text>
<Text style={styles.grayText}>4 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$8.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Dribble */}
<View style={styles.rows}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#fdd7e6" }]}>
<Dribble height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Dribble</Text>
<Text style={styles.grayText}>12 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$120.00</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Spotify */}
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between" }}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#d5ffd9" }]}>
<Spotify height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Spotify</Text>
<Text style={styles.grayText}>25 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$9.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
{/* Twitch */}
<View style={{ marginVertical: 10, flexDirection: "row", justifyContent: "space-between" }}>
<View style={styles.iconText}>
<View style={[styles.iconBackground, { backgroundColor: "#efd6ff" }]}>
<Twitch height={30} width={22} fill={"#1E2439"} />
</View>
<View style={styles.entertainItems}>
<Text style={styles.entertainItemsText}>Twitch</Text>
<Text style={styles.grayText}>25 March</Text>
</View>
</View>
<View style={{ flexDirection: "column", alignItems: "flex-end" }}>
<Text style={styles.redText}>-$24.99</Text>
<Text style={styles.grayText}>Subscription</Text>
</View>
</View>
</ScrollView>
{/* Bill */}
<View style={styles.elevation}>
<View style={[styles.rows, { padding: 5, }]}>
<View style={styles.iconText}>
<Bill height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Bill</Text>
</View>
<View>
<Button height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</View>
</View>
{/* Footer */}
<View style={{flexDirection:"row", alignItems:"center", justifyContent:"space-between",marginHorizontal:35,}}>
<Home height={30} width={22} fill={"#1E2439"} />
<Ratio height={30} width={22} fill={"#1E2439"} />
<Time height={30} width={22} fill={"#1E2439"} />
<User height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
transaction: {
fontSize: 17,
fontWeight: "bold",
letterSpacing: .5,
},
elevation: {
backgroundColor: "#fdfdfd",
elevation: 3,
height: 60,
borderRadius: 10,
},
rows: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginVertical:10,
},
iconText: {
flexDirection: "row",
alignItems: "center",
},
iconBackground: {
height: 40,
width: 40,
borderRadius: 13,
alignItems: "center",
justifyContent: "center"
},
entertainItems: {
flexDirection: "column",
marginLeft:20,
},
bigBold: {
fontSize: 17,
fontWeight: "bold",
marginLeft:15,
},
entertainItemsText: {
fontSize:15,
fontWeight:"bold",
},
redText : {
color:"#e46e6a",
fontWeight: "bold",
fontSize:15,
},
grayText: {
color: "#b2b4c3",
},
})
export default ThirdScreen;
Here is the screenshot:
A simple approach is to store a boolean isShown that is toggled when interacting with the button. Use the useState hook to store and update that boolean:
const ThirdScreen = () => {
// Default to `false` so the section is initially hidden
const [isShown, setIsShown] = React.useState(false);
return (
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff"}}>
<View style={{ alignItems: "center", padding: 20 }}>
<Text style={styles.transaction}>Transaction History</Text>
</View>
<View style={{ padding: 10, }}>
{/* ... */}
<View style={{ padding: 20 }}>
{/* Transfer */}
{/* ... */}
{/* Entertain */}
<View style={styles.elevation}>
<View style={[styles.rows,{padding:5,}]}>
<View style={styles.iconText}>
<Entertain height={30} width={22} fill={"#1E2439"} />
<Text style={styles.bigBold}>Entertain</Text>
</View>
<View>
<Button
height={30}
width={22}
onClick={() => { setIsShown((currIsShown) => !currIsShown); }}
fill={"#1E2439"}
/>
</View>
</View>
</View>
{/* Render the inner <ScrollView> only if `isShown` is true */}
{isShown && (
<ScrollView style={{padding:10}}>
{/* Netflix */}
{/* ... */}
</ScrollView>
)}
{/* Bill */}
{/* ... */}
</View>
{/* Footer */}
{/* ... */}
</View>
</SafeAreaView>
)
}
You can use the onClick event to change your required dom
For this first, make a state and set the initial value to false. Then use the onClick event and change the state using useEffect of setState.
At Last, change the CSS of the section to display: "none" on false and display: "block"( or other value ) on true
I am new to react naive and am trying to place two views one under the other but when I try doing this there is a big gap between the views as shown below.
This anyway to be able to fix this or do I need to use flatlist?
Here is my code.
render() {
return (
<>
<View style={{ flex: 1, flexDirection: "row", height: 130 }}>
<View style={styles.IconImage}>
<TouchableOpacity
onPress={() =>
Linking.openURL("http://facebook.com/")
}
>
<FontAwesome
name="location-arrow"
size={40}
color={"#E8AA65"}
/>
</TouchableOpacity>
</View>
<View style={{ paddingTop: 50, paddingLeft: 40 }}>
<Text style={{ fontSize: 20 }}>Find Us</Text>
</View>
</View>
<View style={{ flexDirection: "row", height: 130 }}>
<View style={styles.IconImage}>
<TouchableOpacity
onPress={() =>
Linking.openURL("http://facebook.com/")
}
>
<Icon
name={Platform.OS === "ios" ? "ios-settings" : "md-settings"}
size={40}
color={"#E8AA65"}
/>
</TouchableOpacity>
</View>
<View style={{ paddingTop: 50, paddingLeft: 40 }}>
<Text style={{ fontSize: 20 }}>Settings</Text>
</View>
</View>
</>
);
}
const styles = StyleSheet.create({
IconImage: {
paddingTop: 40,
paddingLeft: 40,
},
});
The issue is caused by providing flex:1 in your main view.
Output without flex:1:
The remaining offset is caused by your height together with your padding values.
Demo:
I've created a snack where you can play around with it:
https://snack.expo.io/rkUKpLUUU
I'm trying to get below output but flexDirection: 'row' is not working properly. Please can anyone explain me how to get below output. Any help is appreciated.
**Required output: **
My output:
My code is:
_renderItem(rowData) {
return(
<View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
<View style={{margin: 2, width: '24%', backgroundColor: '#fff', borderWidth: 1, borderColor: '#aaa'}}>
<TouchableOpacity activeOpacity={0.9} style={{height: 190}}>
<Image source={{uri: rowData.item.images[0].src}} style={{height: '100%', width: '100%'}}/>
</TouchableOpacity>
<View style={{padding: 5}}>
<TouchableOpacity activeOpacity={0.9} style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View>
<CapitalizedText style={{color: '#666', fontSize: 14}}>{rowData.item.title}</CapitalizedText>
<Text style={{fontSize: 15, color: '#666', justifyContent: 'center', alignItems: 'center'}}>{'₹' + rowData.item.variants[0].price}</Text>
</View>
<Icon size={24} color="#aaa" name="turned-in-not" />
</TouchableOpacity>
<CapitalizedText style={{fontSize: 14, color: '#bbb'}}>Printed Top</CapitalizedText>
</View>
</View>
</View>
);
}
render() {
return(
<View>
{
this.state.product_detail.length <= 0 ?
<ActivityIndicator color = '#bc2b78' size = "large" style={{alignItems: 'center', justifyContent: 'center'}} />
:
<FlatList
keyExtractor = {( item, index ) => index }
data = { this.state.product_detail }
renderItem = {(rowData) => this._renderItem(rowData)}
ListFooterComponent = { this._render_Footer }
/>
}
</View>
);}
Thank you.
Use numColumns property in flatList to align text items of flatList in a row like
let numColumns=5;
<FlatList numColumns={numColumns}/>
Please see this one if is work for you https://snack.expo.io/SywBhpMgW
You only have one child element (another View element) of the view which sets flexDirection to row. FlexDirection only has influence on its direct children.
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.
I am trying to put a background color for an app I am making but it doesn't fit to all the screen and the bottom of it doesn't take the style.
This is my code:
<ScrollView>
<View style={styles.main}>
<View style={{ marginTop: 10 }}>
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
source={require('./../src/img/profile.png')} />
</View>
<View style={styles.fourblock}>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.personal()}>
<Text style={styles.redboxText}>
Personal Detail
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.savedschools()}>
<Text style={styles.redboxText}>
Saved Schools
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.languages()}>
<Text style={styles.redboxText}>
Your Reviews
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
And this is the style I want to put:
main: {
//marginTop: 52,
backgroundColor: '#F8F8FF',
flex: 1,
},
<ScrollView> must be inside <View style={styles.main}>
so
<View style={styles.main}>
<ScrollView>
<View>
// .........
</View>
</ScrollView>
</View>
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
resizeMode: 'stretch', // or 'cover' . <<------------------
source={require('./../src/img/profile.png')} />
One more way you can fit view on all screen is using positioning absolute and make all left, top, right and bottom 0.
Here is an example.
<View style={{ position : 'absolute', top : 0, left : 0, right : 0,bottom : 0,}}</View>