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.
Related
I've created a custom dropdown using TouchOpacity component of react native as follows.
<View style={dropDownStyle}>
<TouchableOpacity onPress={() => _switchTimeSpan('Day')}>
<Text style={dropDownItemStyle}>Day</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => _switchTimeSpan('Week')}>
<Text style={dropDownItemStyle}>Week</Text>
</TouchableOpacity>
</View>
The style is as follows.
dropDownStyle: {
position: 'absolute',
marginTop: 20,
width: 80,
},
dropDownItemStyle: {
marginTop: 5,
flex: 1,
textAlign: 'right',
},
When pressed the TouchOpacity component doesn't trigger the onpress function. This issue only exists in android and not IOS.
Edit 1 : There is a areachart created use react-native-svg-charts which is being overlapped by the mentioned dropdown. However upon inspecting if the reason for the onPress not working could be because of zIndex issues i noticed that the mentioned dropdown is the top most component.
The code for the chart is the following.
I am using react-native-svg-charts
<View style={containerStyle}>
<YAxis
data={data}
style={yAxisStyle}
formatLabel={value => yAxisFormat(value)}
contentInset={verticalContentInset}
numberOfTicks={5}
svg={axesSvg}
/>
<View style={chartWrapperStyle}>
<AreaChart
style={chartStyle}
data={data}
contentInset={verticalContentInset}
curve={shape.curveCatmullRom}
svg={{ fill: '#FF4D4D' }}
animate
/>
<View style={xAxisStyle}>
{
timeSpan !== 'Month' && (
<XAxis
data={data}
// formatLabel={(value, index) => months[value]}
formatLabel={(value, index) => xAxisPoints[index]}
contentInset={{ left: 10, right: 10 }}
// numberOfTicks={5}
svg={axesSvg}
/>
)
}
</View>
</View>
</View>
The style for the chart is as follows.
containerStyle: {
height: 200,
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'row',
},
yAxisStyle: {
// marginBottom: 20,
position: 'absolute',
height: 180,
left: 20,
zIndex: 2,
},
chartStyle: {
flex: 1,
},
chartWrapperStyle: {
flex: 1,
},
xAxisStyle: {
marginHorizontal: -5,
height: 20,
},
When I'm testing this as isolated and only component on screen everything seems to work properly on Android (Samsung Galaxy Tab 2). Try to isolate this component and see if it will work for you on Android, maybe other components affect it. Also you could try to check if container component (with dropDownStyle) has some height or try to set 100%.
I'm having an issue with KeyboardAvoidingView on android. It works just fine with iOS. My screen has a view components on the top half of the screen that may or may not be impacting it. I've tried deleting each of those components but KeyboardAvoidingView only works when I delete the the component that takes up 60% of the screen. This component is a YouTube player from 'react-native-youtube' which has a flex: 1 style.
My code kind of looks like this..
<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={200}
>
<View style={styles.first}>
<View style={styles.second}>
<TouchableHighlight />
<View style={styles.third}>
<TextInput
style={styles.textInput}
maxLength={80}
autoGrow={true}
maxHeight={130}
multiline={true}
editable={true}
onChangeText={onChange}
value={descriptionText}
autoFocus={true}
keyboardType={'default'}
autoCorrect={false}
placeholder={'Send a word'}
underlineColorAndroid={white}
selectionColor={purple}
returnKeyType={'send'}
onSubmitEditing={handleSubmit}
/>
</View>
</View>
</View>
<KeyboardAvoidingView/>
first: {
flexDirection: 'column',
justifyContent: 'flex-start',
position: 'relative',
marginTop: 0,
},
second: {
width: screenWidth,
flexDirection: 'row',
alignItems: 'center',
paddingTop: 5,
paddingBottom: 9,
},
third: {
flexDirection: 'row',
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
paddingBottom: 5,
paddingLeft: 10,
paddingRight: 10,
width: screenWidth - 102,
minHeight: 36,
alignItems: 'center',
},
textInput: {
textAlign: 'left',
fontSize: 14,
fontWeight: '400',
flex: 1,
padding: 0,
margin: 0,
}
Is there anything here that may impact KeyboardAvoidingView's functionality? I've tried removing behavior="padding" already due to React Native docs that mention that it works better on android when that prop is removed.
Thanks!
Try to add flex to all style might help, and maybe in the KeyboardAvoidingView also.
<KeyboardAvoidingView
style={{flex: 1}}
keyboardVerticalOffset={0}
behavior={'padding'}
>
Snack Expo: https://snack.expo.io/BJT-4Fphz
Working with the keyboard can be difficult.
However, Android (for once) does make it simpler.
import { Platform } from 'react-native';
const isAndroid = Platform.OS === 'android';
componentDidMount() {
if (isAndroid) {
SoftInputMode.set(SoftInputMode.ADJUST_PAN);
}
}
Hi I am trying move logo out of borders for IOS it works fine but Android have a problem the logo is covered by view on background. I am tried to set up background color to transparent but doesn't work.
Any idea how to solvate it?
and here is my code:
const styles = StyleSheet.create({
wallWrapper: {
backgroundColor: '#00000000',
borderWidth: 1,
borderColor: 'green',
paddingTop: 40,
},
wallImageBorderEffect: {
borderWidth: 1,
borderColor: 'red',
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 30,
backgroundColor: 'gray',
},
});
...
render() {
return (
<View style={styles.wallWrapper}>
<View style={styles.wallImageBorderEffect}>
<Image
style={{
height: 45,
width: 105,
position: 'absolute',
bottom: 6,
overflow: 'hidden',
}}
resizeMode="cover"
source={require('./images/mock-logo.png')}
/>
</View>
<View style={{
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 400,
}}>
</View>
</View>
);
}
}
This is a known issue on Android. The overflow attribute is not supported on Android yet (only on iOS).
But you can support the feature request here.
You could maybe try to move your <Image /> component outside of the <View /> and fix the position by adjusting top props.
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.
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