I am trying to set a scroll view inside a view and setting a auto height to this view to full fit the parent content. Everything is wrapped inside a ImageBackground.
<ImageBackground source={{uri : 'url'}} style={{height: 350, width: null, flex: 1}}>
<View style={{flex: 1, height: 310}}>
<ScrollView contentContainerStyle={{flexGrow: 1}}>
<View style={{flex : 1}}>
<Text>
Simple text
</Text>
</View>
</ScrollView>
</View>
<ImageBackground/>
Actually, the height of the view is : height: 310 but it's supposed to be something like : height:'auto' to fill the whole parent content which is in my case the ImageBackground.
try this
width: '100%'
you can read the doc here
https://facebook.github.io/react-native/docs/dimensions
Related
I have a text component which is contained within a parent of a set width alongside a small black box to its right. My question is why does the text elipsise only when it reaches the end of the parent container when the black box (its sibling) is pushed out? How can I make the text respect the space of its sibling and elipsise earlier?
<View style={{height: 30, width: 200, flexDirection: "row", borderWidth: 1}}>
<Text numberOfLines={1}>
{"This is a very very very long sentence that is meant to elipsize"}
</Text>
<View style={{width: 20, height: 20, backgroundColor: "black"}} />
</View>
This is what this result looks like
In React Native, a Text component does not behave according to the box model. So it shrinks and expands according to its need, given the dimensions of the parent component (and sometimes overflowing it depending on the styling).
An easy fix in such case is to wrap the Text component in its own view.
Setting the Text component width will also work.
Just you need to wrap the Text component into a View with { flex: 1 } style. It should help:
<View style={{height: 30, width: 200, flexDirection: "row", borderWidth: 1}}>
<View style={{flex: 1}}>
<Text numberOfLines={1}>
{"This is a very very very long sentence that is meant to elipsize"}
</Text>
</View>
<View style={{width: 20, height: 20, backgroundColor: "black"}} />
Simple issue: Whenever I use flex on an image it simply doesn't show up when I preview my app on expo.
This is the way I'm doing it:
<Image
style = {{flex: 1, height: undefined, width: undefined}}
source = {require('./img/anyImage.png')}
/>
If I just define the height and width, no flex, they show up. Is there any particular reason as to why my images aren't showing up?
Note: I've tried giving set values to both height and width.
Thanks a lot!
passing null instead of undefined should do the trick for you.
<Image
style = {{flex: 1, height: null, width: null}}
source = {require('./img/anyImage.png')}
/>
According to your code you can use one of these two options if you want to use flex.
1.giving the flex:1 to the image with null width for taking the whole view
2.use flex with resizeMode for taking the whole view
{/* THIS IS THE FIRST OPTION YOU CAN USE */}
<View>
<View style={{ width: 100, height: 100 }}>
<Image
style={{ flex: 1, width: null }}
source={require("./img/cervecerias.png")}
/>
</View>
</View>
{/* THIS IS THE SECOND OPTION YOU CAN USE */}
<View style={{ width: 200, height: 100 }}>
<Image
style={{ flex: 1 }}
source={require("./img/Cocktails.png")}
resizeMode="contain"
/>
<Text style={styles.categoriesText}> Cocktails</Text>
</View>
i am trying to create a modal in react native application, and there is a button or touchable opacity on a screen which toggles the modal, i am trying to populate a list of items on modal by the use of mapping. But it is not working as expected because elements i create are hidden behind other elements.
I have tried using Modal from react native but i was unable to set custom size of the modal as i needed some portion of it to be transparent. That is why i moved to react-native-modal library but i am facing above mentioned error in that.
<Modal isVisible={this.state.modalVisible} >
<View style={{backgroundColor:'white', alignItems:'center', borderRadius:5}}>
<Image source={require('../../assets/Group3Copy.png')} style={{marginTop:responsiveFontSize, marginBottom:responsiveFontSize-2}}/>
<Text style={{color:'#92c848', alignSelf:'center', fontWeight:'bold', fontSize:responsiveFontSize+10}}>Well Done!</Text>
<Text style={{color:blueColor, fontWeight:'bold'}}>{this.state.plantCount} plants have been planted</Text>
<Text style={{color:blueColor, fontWeight:'bold'}}> {this.state.plantCount} پودے لگاۓ گۓ ہيں </Text>
{/* Mapping=========================================== */}
<View style={AppStyles.mainNoRow}>
<View style={AppStyles.colNoIco}>
<Image source={require('../../assets/plant.png')}/>
</View>
<View style={AppStyles.colOrderNoDetail}>
<Text style={{color:"#006f91", alignSelf:'flex-start', fontWeight:'bold',marginTop:10}}>Plant</Text>
<Text style={{color:"#747474", alignSelf:'flex-start', fontWeight:'bold',}}>Id</Text>
</View>
<View style={AppStyles.colOrderPickupYesDetail}>
<Text style={{color:greenColor ,fontWeight:'bold',}}>1 Jan 19</Text>
<Image source={require('../../assets/address.png')}/>
</View>
</View>
<TouchableOpacity onPress={this._toggleModal}
style={{
width: "90%",
height: 60,
justifyContent: "center",
alignSelf: "center",
borderWidth: 1,
borderRadius: 8,
borderColor: blueColor,
shadowColor: blueColor,
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.9,
shadowRadius: 1,
backgroundColor: blueColor,
marginBottom:responsiveFontSize}} >
<Text style={AppStyles.textStylePlant}>OK</Text>
</TouchableOpacity>
</View>
</Modal>
I expect it's height to be set according to the number of elements mapped on it. and adjust it automatically if that is possible.
But right now elements are overlapping like shown here in this picture. https://i.imgur.com/jH9sBxV.png
Elements are hidden behind 'OK' button.
Adding marginBottom to the styling of main row seems to resolve the issue. And it also resize the height of modal accordingly.
I created a custom dropdown component which has a transparent Scrollview with ToucableOpacity elements. However the onPress on them are not working, even though, zIndex is making them appear on top of everything else.
In the main screen, I created two elements, 1 header containing the Dropdown and 2nd one is the body which contains the rest. Its code is given below:
<View style={styles.body, {zIndex:0}}>
<View style={[styles.header,{zIndex:1}]}>
<Text style={styles.header_text}>Search In </Text>
<Dropdown items={CATEGORIES}/>
</View>
<View style={[styles.main,{zIndex:-1}]}>
<Text style={{backgroundColor:'blue'}}>I am the body</Text>
</View>
<View>
I have included the render event markup of the Dropdown element. Its code is given below:
<View style={styles.container}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Text>-V-</Text>
</TouchableOpacity>
<View style={{zIndex:3}}>
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
<ScrollView style={{height:60,zIndex:4}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{zIndex:5}}
disabled={this.state.disabled}
key={i}
onPress={()=>this.selectItem(i)}>
<Text >{item} {i}</Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
Styles for Dropdown are:
container:{
zIndex:2
},
main_container:{
flexDirection: 'row',zIndex:2
},
text:{
fontFamily: fontStyles.PoppinsRegular,
fontSize: moderateScale(14)
},
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%',
zIndex:3
}
Screenshot is given as. zIndex makes the elements appear on top but i cannot trigger onPress on Toucable opacities.
I am trying to a background in my react native app and this is my code.
render() {
return (
<View
style={{
alignItems: 'center',
flex:1}}>
<Image
source={darkwallpaper}
style={{
flex: 1,
width: '100%'}}/>
<View
style={{
position: 'absolute',
justifyContent: 'center',
alignItems: 'center'}}>
<ScrollView>
<Text>This is the random Top page</Text>
<Image
source={homemoviespic}
style={{width: '100%'}}/>
<TopMovies />
</ScrollView>
</View>
)
}
Right now, the background shows but the scrollview is not working. I cant scroll and I can see only a few parts of the stuff inside scrollview. Please help.
Found something called ImageBackground that can put image in background and you can just put children in the tag.
<Image> with nested content is no longer supported. Use <ImageBackground> instead.
<ImageBackground style={styles} source={source} resizeMode={resizeMode} >
{children}
</ImageBackground>