can't display floating button over webview on android.
ios work fine, on android doesn't show.
render function:
<View style={{ flex: 1}}>
<View style={{position:'absolute',right:0,marginTop:90,marginRight:10,zIndex:1,height:50,width:50}}>
<TouchableHighlight style={styles.addButton}
underlayColor='#ff7043' onPress={()=>{console.log('pressed')}}>
<Text style={{fontSize: 50, color: 'black'}}>+</Text>
</TouchableHighlight>
</View>
<WebView
source={require('./index.html')}
style={{marginTop:0}}
scalesPageToFit={Platform.OS !== 'ios'}
onMessage={this.onMessage}
postMessage={"Hello from RN"}
/>
</View>
css:
const styles = StyleSheet.create({
addButton: {
backgroundColor: '#ff5722',
borderColor: '#ff5722',
borderWidth: 1,
height: 100,
width: 100,
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
bottom: 20,
right:20,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
});
How can I display a button over web view on android ?
The solution is pretty simple, put the Button View code under/after the WebView code
<View style={{ flex: 1}}>
<WebView
source={require('./index.html')}
style={{marginTop:0}}
scalesPageToFit={Platform.OS !== 'ios'}
onMessage={this.onMessage}
postMessage={"Hello from RN"}
/>
<View style={{position:'absolute',right:0,marginTop:90,marginRight:10,zIndex:1,height:50,width:50}}>
<TouchableHighlight style={styles.addButton}
underlayColor='#ff7043' onPress={()=>{console.log('pressed')}}>
<Text style={{fontSize: 50, color: 'black'}}>+</Text>
</TouchableHighlight>
</View>
</View>
If for some reason you can't put it under the WebView, adding a elevation style prop higher than the WebView's, alongside the zIndex style prop will work for you.
That's because the zIndex property is quite broken on Android (see the dedicated issues). To compensate for it, you must invert the rendering order of your container's children.
This can be done either by rendering the button after the WebView:
<View style={{ flex: 1 }}>
<WebView />
<View style={{ styles.button }} />
</View>
Or by reversing the display order in your container, using flexDirection:
<View style={{ flex: 1, flexDirection: 'column-reverse' }}>
<View style={{ styles.button }} />
<WebView />
</View>
Note that you can also use the android-specific elevation API. This will act as a reliable z-index and is the only way to display a shadow on Android.
Related
I was making an app and added text on HomeScreen. I am getting the text in Web but am not able to get it in Android and IOS. This is the Code:
render(){
let pulse = <Image source={require('../pulse.png')} style={styles.pulse} />
return (
<SafeAreaView style={styles.container}>
<View>
<StatusBar barStyle="dark-content" />
<View style={{ flex: 0.4, resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
</View>
</SafeAreaView>
}
These are the styles
container: {
flex: 1,
backgroundColor: 'white',
},
appName: {
alignSelf: 'center',
fontFamily: 'oswald',
fontSize: 50,
color: 'black',
height: '100%'
}
You need to remove the flex prop of the child view. Change
<View style={{ flex: 0.4, resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
to
<View style={{ resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
I am building a react native application and I use scrollview for some contents but it is not scrolling I cannot figure out why.
I try a lot of things, adding flex: 1 everywhere but none of these is working.
Thank you in advance for your help.
<KeyboardAwareScrollView contentContainerStyle={authStyles.container}>
<Layout isBackArrow={true}>
<BottomLayout>
<Header fontSize={20}>
<Text>Nous sommes</Text> {'\n'}
<Text style={authStyles.headerBold}>
Ravis de te revoir!
</Text>
{'\n'}
<Caption>Je me connecte via:</Caption>
</Header>
<View style={authStyles.socialIconView}>
<SocialIcon type="facebook" onPress={onFacebookLogin} />
<SocialIcon type="google" />
<SocialIcon
type="apple"
onPress={onAppleButtonPress}
style={{ backgroundColor: COLORS.BLACK }}
/>
</View>
<View style={authStyles.orView}>
<Header fontSize={15}>
<Text style={authStyles.headerBold}>Ou</Text>
{'\n'}
<Caption>
Je saisis mon email et mot de passe
</Caption>
</Header>
</View>
<View style={authStyles.inputView}>
<CustomInput
label="Email"
icon
iconName="envelope"
iconFamily="font-awesome"
onChange={text => setEmail(text)}
/>
<CustomInput
label="Mot de passe"
icon
iconName="lock"
iconFamily="entypo"
onChange={text => setPassword(text)}
password
/>
<CustomButton
title="Mot de passe oublié ?"
clear
onPress={open}
/>
</View>
</BottomLayout>
</Layout>
</KeyboardAwareScrollView>
Layout component:
<View style={layoutStyles.background}>
{isBackArrow && <BackArrow onPress={onBackArrowPress} />}
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
flex: 1,
}}
>
{children}
</ScrollView>
</View>
layout style:
background: {
backgroundColor: COLORS.BRAND_ORANGE_OPACITY_2,
width: '100%',
height: '100%',
flex: 1,
},
BottomLayout Component:
<View style={layoutStyles.bottomLayout}>{children}</View>;
bottom layout style:
bottomLayout: {
backgroundColor: COLORS.BRAND_ORANGE,
position: 'absolute',
bottom: 0,
height: '75%',
width: '100%',
borderTopLeftRadius: 70,
borderTopRightRadius: 70,
paddingTop: 60,
flex: 1,
},
keyboardAwareScrollView contentContainerStyle:
container: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
Thanks in advance.
KeyboardAwareScrollView gives you a ScrollView already, you don't need to add another one inside of it.
Remove the ScrollView from Layout or remove the KeyboardAwareScrollView.
React Native Nested ScrollView Can`t Scroll on Android Device
Also don't use flex: 1 in contentContainerStyle, instead use minHeight: '100%' (why?) if you want it to be full screen even when there is not enough content in it.
I am new to react-native. I want to achieve a horizontal scrolling of list. When added horizontal the scrolls won't work. But it works well went removed horizontal={true}.
Below is the code.
<View style={styles.headerMargin} >
<ScrollView
horizontal={true}
style={{ marginLeft: 15, marginRight: 15 }}
contentContainerStyle={{
justifyContent:
this.state.typeofCountry.length > 2
? 'flex-start'
: 'center',
width: '100%',}}
>
{this.state.typeofCountry.map((item, i) => {
return (
<View
style={{
flexDirection: 'row',
alignContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<Text
style={[
styles.textBlacRegular,
{ marginLeft: i == 0 ? 0 : 10 },
]}>
{item.label}
</Text>
<View style={{ justifyContent: 'center' }}>
<Image
style={{
width: 30,
height: 18,
marginLeft: 10,
marginRight:20,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
}}
source={item.icon}></Image>
</View>
</View>
);
})}
</ScrollView>
</View>
Styles:
headerMargin:{
flexDirection:"row",
width:'100%',
marginTop:6,
marginBottom:5,
height:30,
borderColor:"#2795FF",
borderBottomWidth:1.5,
alignSelf:"center",
justifyContent:"center",
alignItems:"center",
alignContent:"center",
paddingBottom:5
}
Can anyone let me know what wrong with the code.
The above code works well in iOS but not in android.
Straight from React Native docs, for the scroll view's children to be arranged horizontally in a row instead of vertically in a column the only prop you need to use it's horizontal.
<ScrollView horizontal>
<Child/>
</ScrollView>
Add a horizontal prop to the ScrollView component like so:
<ScrollView horizontal={true}> </ScrollView>
You can also use a FlatList and use the same horizontal prop on it too.
As I want to overlap this icon with two other Views, as shown in the image. this code is working on IOS platform but not on android. please suggest if there is any solution for Android.
var tabs = ['Activity', 'Files', 'People'];
this.state = {
tabs
};
return (
<Container style={{backgroundColor: '#F5F5F5'}}>
<View style={styles.topStrip}>
{
this.state.tabs.map((tab, index) => (
<View key={index} >
<TouchableOpacity>
<Text style={styles.streamName}>{tab}</Text>
</TouchableOpacity>
</View>
))
}
<View style={{position: 'absolute', backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center', zIndex: 5, elevation: 24, marginTop: 15, marginLeft: 300}}>
<EIcon size={40} color='#2196f3' name={'circle-with-plus'} />
</View>
</View>
<View style={{zIndex: -1}}></View>
</Container>
);
}
}
const styles = StyleSheet.create({
topStrip: {
alignItems: 'center',
},
streamName: {
marginTop: 7,
marginBottom: 6,
flexDirection: 'row',
alignSelf: 'center'
}
}
});
<View
style={{
paddingLeft: ITEM_HEIGHT * 3,
flex: 1,
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: -1
}}
>
<Image
style={styles.centerCircle}
resizeMode="contain"
source={Images.ballSmall}
/>
</View>
In android, to use zIndex you need css with position-properties with top,left,right,bottom css
Tested On: Zenfone 3, Android 7, React Native 0.55.4
This issue is not caused by zIndex (although it does cause problem on Android).
Your icon is put inside the upper container view. React Native on Android does not support overflow: visible. That's why you see your icon being clipped outside the container.
You may put the icon on the "page" component level to solve this issue.
You may also refer to https://stackoverflow.com/a/50991892/6025730.
I am currently using React-Native for an Android Project. I have been trying to make a TextInput field with an icon beside the field. However, for some reasons, I notice that the flexDirection: 'row' is not working if the TextInput is one of its child component. The whole view of the one that I apply the style will automatically disappear. This is a snippet of how my code looks like:
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{flexDirection: 'row'}}>
<Image
style={{height: 30, width: 30}}
source={require('./images/email-white.png')}
/>
<TextInput
style={{height: 40}}
underlineColorAndroid={'transparent'}
placeholder={'E-mail'}
placeholderTextColor={'white'}
onChangeText={(data) => this.setState({ username: data })} />
</View>
</View>
I also tried to wrap both component inside each individual view, but the problem still persists. Is there anyone who knows how to solve this? or anyone can confirm that this is a bug?
Your code with a small modification worked fine for me. The only thing I did was adding a width to the TextInput resulting in the icon being beside the text-input.
Working code:
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{flexDirection: 'row'}}>
<Image
style={{height: 30, width: 30}}
source={require('./images/email-white.png')}
/>
<TextInput
style={{height: 40, width: 300}}
underlineColorAndroid={'transparent'}
placeholder={'E-mail'}
placeholderTextColor={'white'}
onChangeText={(data) => this.setState({ username: data })} />
</View>
</View>
I had the same problem when I was building example code from the book Mastering React Native
The code had enclosed a TextInput field in a View with a flexDirection: 'row' and the child TextInput field was not accessible. Only the TextInput border was visible. After playing around with some of the suggestions on this page I found something that worked.
If the container view has a flexDirection: 'row'. Please make sure to add a flex: 1 into your textfield input. The image flex does not seem necessary. As soon as I added the flex: 1 to the styles.input sheet, the TextInput was accessible.
The following code works for me :
<View style={globalStyles.COMMON_STYLES.pageContainer}>
<View style={styles.search}>
<Image
style={{height: 30, width: 30}}
source={require('../../images/email-white.png')}/>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ searchText: text})}
value={this.state.searchText}
placeholder={'Search'}
placeholderTextColor={globalStyles.MUTED_COLOR}/>
</View>
</View>
Local Styles :
const styles = StyleSheet.create({
input: {
flex: 1,
height: 35,
color: globalStyles.TEXT_COLOR,
borderColor: globalStyles.MUTED_COLOR,
backgroundColor: globalStyles.BG_COLOR
},
search: {
borderColor: globalStyles.MUTED_COLOR,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5,
borderWidth: 1,
// marginTop: 10,
// marginBottom: 5
}
})
Global Styles (styles/global)
export const COMMON_STYLES = StyleSheet.create({
pageContainer: {
backgroundColor: BG_COLOR,
flex: 1,
marginTop: 0,
paddingTop: 20,
marginBottom: 48,
marginHorizontal: 10,
paddingHorizontal: 0
},
text: {
color: TEXT_COLOR,
fontFamily: 'Helvetica Neue'
}
});
Hopefully this provides assistance to you guys. It took me a long time get something this simple working.
Try closing your Image tag...
<Image style={{width:30, height: 30}} source={require('./icon.png')} />
Also, add some dimensions to your TextInput...
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
You might also need to set flex: 0 on the image and flex: 1 on the TextInput