I have added a dropdown and when I open it, the dropdown menu is hidden behind the views that have been added afterwards. How can I bring the dropdown view to front in react-native. I have now used an overlay and it brings the view to front but the view is not set in its normal location, instead it is displaying as the top most element.
In main render I have a listView:
<ListView ref='listView'
style = {{ backgroundColor: '#EAEAEC'}}
dataSource={this.state.dataSource}
automaticallyAdjustContentInsets={false}
renderRow={this.renderRow}/>
In render row of listView:
return (
<View style={{backgroundColor: '#FFF', marginBottom:5, shadowColor : '#BCBCBC', shadowOffset: {width: 0, height: 0}, shadowOpacity: 0.7, height:150}} >
<View style={{flex:1, flexDirection:'row',justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow', height:100}}>
<Overlay isVisible={true}><List /></Overlay>
</View>
<View style={{flex:5, flexDirection:'row',justifyContent: 'flex-end', alignItems: 'center', paddingTop:17, marginBottom:10}}>
<View style={{flex:1}}/>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_new_u.imageset/audit_new_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_inProcess_u.imageset/audit_inProcess_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_complete_s.imageset/audit_complete_s.png')} /></View>
<View style={{flex:1}}/>
</View>
</View>
);
Now the dropdown which is actually the List tag in render row which I have placed in overlay tags is now placed on top of the screen.
Add {zIndex: 999}
<View style={{zIndex: 999}}>
{...anything}
</View>
You have to make sure all the sub views inside your main view have a zIndex style property.
Like so:
const [myIndex, setMyIndex] = useState(1)
<View>
<View style={{zIndex: 3}}></View>
<View style={{zIndex: myIndex}}>
<Button onPress={() => setMyIndex(4)} title='Press to show above the other' />
</View>
<View style={{zIndex: 2}}></View>
</View>
Just add zIndex: -1 in the style of the view, you want to go behind in the hierarchy.
appActivityIndicatorOverlay: {
height: '100%',
width: '100%',
opacity: 0.8,
position: 'absolute',
elevation: (Platform.OS === 'android') ? 50 : 0,
backgroundColor: 'white',
color: theme.colors.brand.primary,
zIndex: 100
},
Related
In my react native app i have view with centered text and edit icon i need to enable click functionality in this view. for that i used TouchableOpacity's onPress. and in my style i need absolute position . then my onPress is not working.
I have code like this:
<TouchableOpacity
style={styles.topBand}
onPress={this._editPatientInfo}
>
<View style={styles.topView}>
<View style={{ flex: 1 }}>
<Text style={styles.topTitle}>{topTitle}</Text>
</View>
<View style={{ alignSelf: "flex-end" }}></View>
<Icon
pencil
name="pencil"
type="font-awesome"
size={20}
onPress={ this._editPatientInfo}
/>
</View>
</TouchableOpacity>
styles:
topBand: {
width: "100%",
position: "absolute",
top: 0,
alignItems: "center",
padding: 5,
backgroundColor: Colors.topBandColor
}
topView: {
flexDirection: "row",
alignItems: "center"
}
When clicking the function is not getting triggered. If i remove position: "absolute", from the style(topBand) it will work but without that the position is not correct.
What is the problem? How should i resolve it?
You need to wrap your touchableOpacity with a view that has position absolute
then it may work
<View style={styles.wrapper}>
<TouchableOpacity
style={styles.topBand}
onPress={this._editPatientInfo}
>
<View style={styles.topView}>
<View style={{ flex: 1 }}>
<Text style={styles.topTitle}>{topTitle}</Text>
</View>
<View style={{ alignSelf: "flex-end" }}></View>
<Icon
pencil
name="pencil"
type="font-awesome"
size={20}
onPress={ this._editPatientInfo}
/>
</View>
</TouchableOpacity>
</View>
wrapper:{
width: "100%",
position: "absolute",
top: 0,
},
topBand: {
alignItems: "center",
padding: 5,
backgroundColor: Colors.topBandColor
}
topView: {
flexDirection: "row",
alignItems: "center"
}
Import TouchableOpacity from react-native-gesture-handler
import { TouchableOpacity } from 'react-native-gesture-handler'
I am using Webview component in React Native to render HTML content. The problem I am facing is that I cannot make the height variable so it can adapt to any content it has.
return (
<View style={{flex: 1}}>
<Header
containerStyle={{
backgroundColor: 'white',
borderBottomColor: '#dee0e2',
borderBottomWidth: 1
}}
centerComponent={{ text: 'Noticia', style: { color: 'black' } }}
leftComponent={
<TouchableHighlight onPress={() => navigate('homeScreen')}>
<Text style={{color: '#4289f4'}}>Atrás</Text>
</TouchableHighlight>
}
/>
<ScrollView style={{padding: 5}}>
<View style={{flexDirection: 'column'}}>
<Text style={{textAlign: 'center', fontSize: 17, fontWeight: 'bold'}}>{noticia[0].titulo}</Text>
<Image style={{width: '100%', height: 200, alignSelf: 'stretch', marginTop: 10}} source={{uri: noticia[0].imagen}} />
<View style={{height: 200, backgroundColor: 'red'}}>
<WebView
source={{html: noticia[0].articulo}}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
</View>
</View>
</ScrollView>
</View>
);
If I don't give the <View>' that contents ' <Webview>' a height it does show me nothing. Tried already withflex: 1` but nothing changes.
In your parent view (root view directly under return()) style it as
height: '100%',
width: '100%'
It will adopt to any size screen.
Trying to use put space-between and stretch out the buttons that appear in the overlay pop-up screen using flexbox. This is a child view of the main view of the screen. Nothing but alignItems: 'center' seems to be working to align these buttons.
Any help to get the other flexbox properties to work on this child view would be much appreciated
<View style={{ flex: 1 }}>
<ImageBackground
style={{ width: Dimensions.get("window").width, height: 300 }}
source={require("../../resources/img/image.jpeg")}
/>
<View style={{ marginTop: -20, paddingLeft: 20, paddingRight: 20 }}>
<MainButton onPress={this.openOverlay} size={MainButtonSize.medium}>
{this.bookButton}
</MainButton>
</View>
<Overlay
visible={this.state.modalVisible}
onClose={this.onClose}
closeOnTouchOutside
animationType="zoomIn"
containerStyle={{ backgroundColor: "rgba(255, 255, 255, 0.78)" }}
childrenWrapperStyle={{ backgroundColor: "red" }}
animationDuration={350}
>
{(hideModal, overlayState) => (
<View style={{ alignItems: "center" }}>. <== THIS VIEW
<MainButton size={MainButtonSize.large} onPress={this.onStaffPress}>
{this.staffButton}
</MainButton>
<MainButton size={MainButtonSize.large} onPress={this.onServicesPress}>
{this.serviceButton}
</MainButton>
<MainButton size={MainButtonSize.small} onPress={this.onClose}>
{this.closeButton}
</MainButton>
</View>
)}
</Overlay>
</View>
Please try to set flex: 1 in the View tag
I want to add multiple images behind header with a swiper. I tried implementing this using Native-base and react-native-swiper. However, what was resulted is, as following.
Following is my code
<View style={{flex:1, elevation:2}}>
<Swiper style={StyleSheet.flatten( {backgroundColor: '#fff'})}>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
<Header style={{
marginTop: StatusBar.currentHeight,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
}}>
<StatusBar
backgroundColor={Colors.statusBar}
barStyle="light-content"
/>
<Left>
<Button transparent onPress={this.handleBackButtonClick} small={true}>
<Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
</Button>
</Left>
<Body/>
<Right/>
</Header>
</ImageBackground>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
<Header style={{
marginTop: StatusBar.currentHeight,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
borderBottomWidth: 0, shadowOffset: {height: 0, width: 0},
shadowOpacity: 0, elevation: 0
}}>
<StatusBar
backgroundColor={Colors.statusBar}
barStyle="light-content"
/>
<Left>
<Button transparent onPress={this.handleBackButtonClick} small={true}>
<Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
</Button>
</Left>
<Body/>
<Right/>
</Header>
</ImageBackground>
</Swiper>
</View>
I want to fix the header so that it won't also swipe with the images. Can anyone help me with this? Thanks in-advance.
React-Native-Swiper in android will display blank content when swiper height and width aren't shown.
please add fixed height and width to view or to the swiper
Keep your Header outside Swiper and make its position absolute
<Header style={{
marginTop: StatusBar.currentHeight,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
position:'absolute',
top:0,
left:0
}}>
I found the solution using zIndex and position. I guess there is some issue when using native-base header and container with zIndex.
<View style={{flex: 1}}>
<View style={{flex:1, zIndex: 2, position: 'absolute', marginTop: StatusBar.currentHeight, marginLeft:'2%'}}>
<Button iconLeft transparent>
<Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
</Button>
</View>
<View style={{width: '100%', height: '50%', zIndex: 1, position: 'absolute'}}>
<Swiper style={StyleSheet.flatten( {backgroundColor: '#fff',zIndex:1, flex:1})}>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
</ImageBackground>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
</ImageBackground>
</Swiper>
</View>
I am trying to build a Search component with Textfield with both right view and left view(Images at both end). Text Input wraps itself to the length of the content, so component no covering entire parent width. How to stretch the component so that entire component occupies the full width of parent.
<View
style={{
flexDirection: "row",
height: 40,
alignSelf: "stretch",
backgroundColor: "red"
}}
>
<Image
source={require("./image_assets_rn/search_rn.png")}
style={{ alignSelf: "center" }}
/>
<TextInput
placeholder="Search Jet"
style={{ backgroundColor: "white", alignSelf: "stretch" }}
/>
<Image
source={require("./image_assets_rn/search_rn.png")}
style={{ alignSelf: "center" }}
/>
</View>;
Below is the output. I want to stretch the textfield along the main axis(width)
It can be achieved giving the TextInput flex:1, there is no need to use stretch.
<View style={styles.container}>
<View style={{flexDirection:'row', width: 300, height:40,backgroundColor:'lightgray'}}>
<Image
source={require('./image_assets_rn/search_rn.png')}
style={{ height: 30, width: 20,margin: 5}}
/>
<TextInput
placeholder="Search Jet"
style={{backgroundColor:'white', flex:1}}
/>
<Image
source={require('./image_assets_rn/search_rn.png')}
style={{ height: 30, width: 20, margin:5}}
/>
</View>
</View>
Check it on snack
I recommend you this tutorial to have a grasp on how flexbox works.
Hope it helps!
I just add component flexbox in each component that wrapped in component View. I think it will make every component follow the parent width.
<View style={{ flexDirection:'row',
height:40,
alignSelf:'stretch',
backgroundColor:'red' }}>
<Image source={ require('./image_assets_rn/search_rn.png')}
style={{ flex:1, alignSelf:'center' }}/>
<TextInput placeholder="Search Jet"
style={{ flex:1, backgroundColor:'white',
alignSelf:'stretch' }}/>
<Image source={ require('./image_assets_rn/search_rn.png')}
style={{ flex:1, alignSelf:'center' }}/>
</View>
If you want to learn more about Flexbox maybe you can read on the Official Web ReactNative.
I hope this can help you :))