<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<Text>{'hello1234567890texthello1234567890texthello1234567890texthello1234567890texthello1234567890text'}</Text>
<Icon iconStyle={{ width: 15, height: 15 }} type={Icon.Type.copy} />
</View>
I have a multiline textbox, and I would like to display an image at the end of the textbox prompt, so when the user starts typing it stays on the end of the textbox value.
Text is multi-line.
I want make the icon follow text, as last word of text.
Related
I am trying to understand why the below layouts work differently.
Can someone explain how the internal layout process happen, in terms of rules? And why below examples behave differently. Except just saying that this is how it is.
Example1:
return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
)
This renders the red box around the black box around the Text. Which means that View resizes based on its content. inner view resizes to consider the text, outer view considers inner view(which already has considered inner text to determine its dimensions), hence everything is as expected.
Example2:
return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
)
The text now comes outside both the Views. The inner view still rests inside the outer view though.
Now i tried a little different variation:
Example3:
return <View style = {{borderWidth:1, borderColor:'red', height:10}}>
<View style = {{flex:1, borderWidth:1, borderColor:'black'}}>
<Text>HelloWorld</Text>
</View>
</View>
This one renders a little better, i.e the text atleast seems to start inside both the views. But still not as expected.
Questions i have:
1) in case #2 above, Why does the text flow outside both the views? Whereas inner View still stays inside outer?
Can some content ever go beyond the bounds of its parent View? Shouldn't the parent View expand to contain it, as long as we haven't provided specific dimensions to it?
2)In case #3, things behave a little bit as expected..Text is inside the views somewhat, but still overflows..
3)How does this rendering happen in ReactNative internally & how does it determine the effective heights of these views above?
Example with flex
flex: 1, obligates child to follow parent's height, "Black view" will fill all the space available of the "Red view", which is height:60.
<View style={{ borderColor: "red", height: 60 }}>
<View style={{ borderColor: "black", flex: 1 }}>
<Text>HelloWorld</Text>
...
</View>
</View>
Example without flex:1
Here without flex, "Black view" will occupy all space of its children, it won't matter height of the parent ("Red view").
<View style={{ borderColor: "red", height: 60 }}>
<View style={{ borderColor: "black" }}>
<Text>HelloWorld</Text>
...
</View>
</View>
The thing is in simple terms the outline misbehaves in case of 2nd one , i.e :
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
Is because the parent View component doesnt have a flex property so it doesnt take up whole the space and since you have added flex:1 in the child View it tries to take up as whole space as its alloted , hence black border Dominates and TestText is below it.
But if you provide flex:1 , to parent View you will see the same structure as it was with no flex given at all. Try :
<View style = {{flex:1,borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
Hope it helps . feel free for doubts
I'm making an React Native App in which i have 2 buttons/ TouchableOpacity's. When styling these buttons, they both get double border even when explicitly stating 'solid' borderstyle in the respective stylesheets. ( On the attached screenshot the middle button is all white, but when I make the border a different color it is a double one as well ). No where in the whole file have I defined a double borderstyle.
bottom left button stylesheet:
roomsbutton: {
alignItems: 'center',
backgroundColor: '#009DDC',
padding: 5,
borderRadius: 2,
borderWidth: 1,
borderStyle: "solid",
borderColor: 'white',
color: 'white',
}
and its parent view:
<View style={styles.bottom}>
<TouchableOpacity
style={styles.roomsbutton}
onPress={() => Alert.alert('more rooms')}
>
<Text style={styles.roomsbutton} >FIND MORE FREE ROOMS</Text>
</TouchableOpacity>
</View>
You are passing the styles to the <TouchableOpacity> and the <Text> components. So they are both surrounded by the border
You pass style={styles.roomsbutton} to both the TouchableOpacity and the Text components. Each have a solid white border
this is happining because you apply className .roomsbutton two times in a button. once in TouchableOpacity and once in Text.
just remove style={styles.roomsbutton} form Text like below..
<Text>FIND MORE FREE ROOMS</Text>
Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style
textInput: {
flex:1,
height: 50,
marginBottom: 20
}
You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.
How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?
Printscreen if you don't want to wait to load the app:
This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.
The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as
TextInput.js
<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>
Form.js
<UserInput
containerStyle={styles.textInputContainer}
style={styles.textInput}
source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
placeholder="e-mail"
autoCapitalize={'none'}
returnKeyType={'done'}
autoCorrect={false}
/>
and the styles
textInputContainer : {
marginBottom: 20
},
Here's the snack for the same
I have text and image in one row. and now I want to put button over the row with exact size of row.
used flexDirection: 'row'
Any help?
You can wrap your text and image inside the TouchableOpacity component
<TouchableOpacity onPress={() => doYourThing()}>
<Text>{yourText}</Text>
<Image source={{}} />
</TouchableOpacity>
If the text and image are already wrapped in a View, you can just replace the View component with the TouchableOpacity component. It takes all the props which View takes.
I'm working on a eCommerce React Native project. I have a cart component which contains a Listview of all current items within the Cart. The main issue is the styling. I display each product according to quantiy - product name - price and delete button.
So something like this
As you can see the price text is not aligned equally and varies depending on product name. How can I edit the style so all text and buttons within the list view are equal length?
Each Text field can be assigned a flex value like this:
<Text style={{flex: 0.1}}>{product.quantity}x</Text>
<Text style={{padding: 10, flex:0.5}}>{product.name.toString()}</Text>
<Text style={{flex: 0.2}}>£{(product.quantity * product.price).toFixed(2)}</Text>
<TouchableOpacity style={{flex: 0.2}} onPress={() => { this.removeItem(product) }}>
The total of the 0.* should equal to 1.