borderRightWidth and borderBottomWidth to View in react-native - reactjs

I want below image design. I tried borderRightWidth and borderBottomWidth but it can merge at right bottom corner. I also don't want to put extra <View> outside/inside main <View>.
What i want:
What i already achieved:
My code:
<View style={styles.brand_container}>
<View style={{flexDirection: 'row',marginBottom: 10,}}>
<TouchableOpacity style={styles.brand_img_container}>
<Image source={Images.brand_logo.brand_1} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={styles.brand_img_container}>
<Image source={Images.brand_logo.brand_2} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={[styles.brand_img_container, {borderRightWidth: 0}]}>
<Image source={Images.brand_logo.brand_3} style={styles.brand_img} />
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row',}}>
<TouchableOpacity style={[styles.brand_img_container, {borderBottomWidth: 0}]}>
<Image source={Images.brand_logo.brand_4} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={[styles.brand_img_container, {borderBottomWidth: 0}]}>
<Image source={Images.brand_logo.brand_5} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={[styles.brand_img_container, {border: 0}]}>
<Image source={Images.brand_logo.brand_6} style={styles.brand_img} />
</TouchableOpacity>
</View>
</View>
Styling:
const styles = StyleSheet.create({
brand_img_container: {
flex: 1,
height: 150,
margin: 5,
padding: 10,
borderRightWidth: 1,
borderBottomWidth: 1,
alignItems: 'center',
justifyContent: 'center'
},
brand_img: {
height: '100%',
width: '100%',
resizeMode: 'contain'
}
});

You can use blank view to generate the line instead of using right or left border of existing view. It will be tough to make alignment as compare with your VD. Blank view you early push up,down,left or right.
For Example: You can below code to draw vertical and horizontal line respectively. It will comparatively easy to align.
<View style={{
height: 150,
borderColor: "grey",
borderWidth: 1,
alignItems: 'center',
justifyContent: 'center',
}} />
<View style={{
width: 150,
height: 1,
borderColor: "grey",
borderWidth: 1,
alignItems: 'center',
justifyContent: 'center',
}} />

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!

How to get 2 react native <view> in the same line?

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>

React Native FlexLayout: Alignment item right

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.

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