I am using a view as Floating Action Button. The same page has a scrollview, I am not worried about the position or the styling.
Expected behavior :- The View which is wrapped with a Should response to the click event at every points of the button.
Current Behaviour:- I tried studying the behavior with the touch position marker turned, and randomly the button works if clicked at 3-4 positions. AFAIK, there's no pattern to it.
Here's the code of the Floating Button
const FloatingButton = () => {
return (
<View
style={{
alignItems: "center",
justifyContent: "center",
width: 60,
elevation: 3,
position: "absolute",
bottom: 20,
right: 20,
height: 60,
backgroundColor: "#FFD343",
borderRadius: 100,
}}
>
{/* <Icon name='plus' size={30} color='#01a699' /> */}
<Text
style={{
fontWeight: "bold",
fontSize: 16,
}}
>
{">"}
</Text>
</View>
);
};
Here's how I am using it in one of the screens
<TouchableOpacity onPress={handleFab()}>
<FloatingButton/>
</TouchableOpacity>
what else I have tried:-
Tried using the TouchableOpacity directly inside the FloatingButton and passing the click Handler as a prop
I've searched common problems and how to use stickyHeaderIndices and so on. But stuck with one point, and I didn't even find why this occurs, so couldn't search on the internet.
Everything works fine on web, but not on my phone when I use sticky.
My Scroll View Structure:
<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
<View style={styles.topBar}>
<Text style={styles.title}>Messages</Text>
<View style={styles.notificationIcon}>
<Text style={styles.notificationIconTxt}>{notificationCount}</Text>
</View>
</View>
<ChatItem pairingCategory={'Name'} />
</ScrollView>
View that I want to stick on top:
If I use the structure above, it sticks on top but style of the component changes (as in the picture below), I want that bubble to stay next to text.
Here's my styles:
const styles = StyleSheet.create({
layout: {
flex: 1,
backgroundColor: colors.lightBg
},
topBar: {
backgroundColor: colors.lightBg,
paddingVertical: 15,
paddingLeft: 24,
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'center',
},
title: {
fontSize: 32,
marginRight: 8,
},
notificationIcon: {
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
width: 30,
height: 30,
backgroundColor: colors.mainBg,
padding: 5
},
notificationIconTxt: {
color: 'white',
fontWeight: "700"
}
})
Whenever I delete stickyHeaderIndices, topBar view seems the way I want, but not sticks to top.
Why it happens, and what can I do to solve it?
Solved!
I still don't know, what was the reason for it, but created new component called ChatListTopBar then wrapped my first children View.
function ChatListTopBar({notificationCount}) {
return (
<View style={styles.topBar}>
<Text lineBreakMode='false' style={styles.title}>Mesajlar</Text>
<View style={styles.notificationIcon}>
<Text style={styles.notificationIconTxt}>15</Text>
</View>
</View>
)
}
//ScrollView section seems so
<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
<ChatListTopBar notificationCount={notificationCount} />
<ChatItem pairingCategory={'Name'} />
</ScrollView>
Replacing like so, just fixed the issue!
wrap your View which you are trying to stick with <></>
I am developing a react native app. I am using a fixed footer button which works fine on a page but when it is used inside a modal, it comes on top of soft keyboard when text input gets focussed. I want my footer button to remain fixed at bottom even when the soft keyboard comes up. The structure of my code is:
`<Modal>
<View style={{flex: 1}}>
<ScrollView>main</ScrollView>
<View>footerButton</View>
</View>
</Modal>`
Below is the code for my footerButton:
`<TouchableHighlight
style={commonStyles.footerButton}
onPress={this.action.bind(this)}>
<View style={commonStyles.footerbuttonView}>
<Text style={commonStyles.buttonText}>BUTTON TEXT</Text>
</View>
</TouchableHighlight>`
const commonStyles = StyleSheet.create({
footerButton: {
flexDirection: 'row',
backgroundColor: '#1a485a',
position: 'absolute',
height: height/10,
left: 0,
bottom: 0,
right: 0,
margin:0,
padding:0,
justifyContent: 'center',
alignItems: 'center'
},
footerbuttonView:{
flexDirection: 'row',
padding:15,
},
buttonText : {
color: 'white',
fontFamily: 'Montserrat-Light',
textAlign: 'center',
fontSize: 14*fontScale
},
});
I have set android:windowSoftInputMode to adjustPan:
android:windowSoftInputMode="adjustPan"
This works fine on all the pages. But on modals it does not work. Can anybody suggest how to fix this issue?
Here is my code. I want the product view to take up 90% width of its parent. However, the settings below are not working.
...any idea how to achieve it without using dimensions?
return (
<LazyloadScrollView
style={styles.container}
contentContainerStyle={styles.content}
name="scrollImage" >
{list.map((product, i) => <View key={i} style={styles.product}>
<LazyloadImage
host="scrollImage"
style={styles.image}
source={image}
animation={false}>
<View style={styles.id}>
<Text style={styles.idText}>{product.id}</Text>
</View>
</LazyloadImage>
</View>)
}
</LazyloadScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
content: {
paddingTop: 20,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee'
},
product: {
flex: 0.9,
marginTop: 5,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
Why not use Dimensions? It will enable your app to be responsive.
If you don't want to use dimensions, try some style settings in the container and it's children, for example, make it full width with padding
container: {
backgroundColor: '#ffffff',
alignSelf: 'stretch',
padding: 30
}
I don't know if it works because you would have to post the rest of the code to test it but keep playing with the style and flex properties until you make it work, shouldn't take long.
Btw, always good to revisit the official layout props docs from react native
And css tricks guide to flexbox
I have a Touchablehighlight that I need to position absolute, but it becomes unclickable after I do it.
What could cause this? It functions like it should if I dont have the position set to absolute.
Solution was to change the order of the components.
What i originally had:
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
<View> .... </View>
This was the fix:
<View>...</View>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
Dude just go and add zIndex : 1 to the view containing the buttons and boom you are done in most of the cases. Also note adding elevation adds shadow to android button and sometimes elevation may also be a issue if its added to parent and not added to child then the child button may not work.(Rare Case)
eg:
buttonContainers:
{
zIndex: 1,
alignSelf: 'flex-end',
position: 'absolute',
top:5,
right: 5,
height: 40,
borderWidth: 1,
justifyContent: 'center',
alignContent: 'center',
width: 80
},
SOLVED:
I faced this issue today. I have solved it.
Import TouchableOpacity from react-native-gesture-handler instead of react-native.
Before:
import {TouchableOpacity} from "react-native";
After:
import {TouchableOpacity} from 'react-native-gesture-handler'
use onPressIn instead of onPress
That made the area clickable!
I used TouchableOpacity inside an absolute view. The onPress function was not called after press it. But the opacity changed. I've tried all the above solutions, but none works.
My solutions is use onPressIn instead of onPress.
It seems like the inner action of Touchable* is weird in ReactNative when it's in an absolute view.
After trying everything for two hours, the solution I found was to change my button position.
Before ...
export default class Navbar extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (
<View style={styles.content}>
<TouchableOpacity
onPress={this.props.openModal}
style={styles.containerButton}
>
<Text>New</Text>
</TouchableOpacity>
<Text style={styles.textCenter}>Remember me</Text>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
paddingTop: 30,
paddingBottom: 10,
backgroundColor: '#81C04D',
flexDirection: 'row'
},
containerButton: {
position: 'absolute',
top: 30,
left: 8
},
textCenter: {
flex: 1,
textAlign: 'center',
fontWeight: 'bold'
}
});
After ...
export default class Navbar extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (
<View style={styles.content}>
<Text style={styles.textCenter}>Remember me</Text>
<TouchableOpacity
onPress={this.props.openModal}
style={styles.containerButton}
>
<Text>New</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
paddingTop: 30,
paddingBottom: 10,
backgroundColor: '#81C04D',
flexDirection: 'row'
},
containerButton: {
position: 'absolute',
top: 30,
left: 8
},
textCenter: {
flex: 1,
textAlign: 'center',
fontWeight: 'bold'
}
});
It works!!!
My solutions is:
style:{
zIndex: 1,
position: 'absolute',
}
use
zIndex: 1 in view, it'll work.
<View style={{position : 'absolute', marginTop : 25, zIndex: 1}}>
More details can be found here :
How to use zIndex in react-native
For me, it works like:
import { TouchableOpacity } from 'react-native';
onPress, zIndex: 1, position: 'absolute'
One more solution.....
For me what worked was a combination of things....
import { TouchableOpacity } from 'react-native-gesture-handler'
and I WRAPPED my TouchableOpacity in a View.
before:
<TouchableOpacity onPress={()=> addCallback()}
style={styles.addButtonHolder}
>
<PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
</TouchableOpacity>
after:
<View style={styles.addButtonHolder}>
<TouchableOpacity onPress={()=> addCallback()}>
<PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
</TouchableOpacity>
</View>
StyleSheet:
const styles = StyleSheet.create({
addButtonHolder: {
position: 'absolute',
bottom: 70,
right: 10,
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
},
addButton: {
backgroundColor: '#b4cffa',
borderRadius: 35
}
})
This worked for me
import { TouchableOpacity } from 'react-native-gesture-handler'
and changed onPress to onPressIn
<TouchableOpacity onPressIn={() => console.log('clicked')}></TouchableOpacity>
My solution was to import TouchableHighlight from 'react-native'
It was originally imported from 'react-native-gesture-handler'
This props help to disable ScrollView to catch all touches and let child handles
keyboardShouldPersistTaps='always'
'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
'handled', the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor).
https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps
When the position is absolute, TouchableHighlight or TouchableOpacity goes beneath from the surface. You have to add a higher zIndex value to the Container.
He guy, I took a long time to find out why this happens.
I tested a lot of the solution here. Two things worked for:
The first answer here
The second one is to add elevation and zIndex on the wrapper container
<View style={{ zIndex:0 }>
...
<View style={{ position: 'absulote', zIndex:10 ,elevation: 10 }}>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
</View>
<View> .... </View>
...
</View>
If I am right, the reason for that is even that the button is shown, Android treats differently the layers of the Press events and you need to set a low level for the rest of your components. Defining a lower level for your wrapper component, all its children without this attribute will automatically inherit from the parent.
My problem was quite different, a backgroundColor style property was set on the container of my button. The color didn't work. I missed to remove this useless property. Finally, this backgroundColor was making an invisible sheet above my button. Removing it make it clickable again.
I faced the problem only on Android.
Add a zIndex to the component where you added position absolute. This solved the issue for me.
position: 'absolute',
zIndex: 1,
`
I ran into a similar problem, what I did was, I enclosed the whole thing into a new View and instead of giving 'absolute' position to
the TouchableOpacity, I gave it to the parent View. That made the
Opacity again clickable somehow. Here is the code snippet of before
and after
My Code before
<TouchableOpacity
onPress={() => {
console.log("hah");
}}
style={{
height: 50, width: 50,
backgroundColor: 'rgb(90,135,235)',
borderRadius: 25, alignItems: 'center',
justifyContent: 'center', right: 0,position:'absolute'
}}>
<Image source={require('../assets/images/element-acorn-white.webp')}
style={{ height: 30, width: 30, resizeMode: 'contain' }} />
</TouchableOpacity>
After Wrapping into a View with 'absolute'
<View style={{
alignItems: 'flex-end', position: 'absolute',
bottom: Dimensions.get('screen').height / 5
}}>
<TouchableOpacity
onPress={() => {
console.log("hah");
}}
style={{
height: 50, width: 50,
backgroundColor: 'rgb(90,135,235)',
borderRadius: 25, alignItems: 'center',
justifyContent: 'center', right: 0,
}}>
<Image source={require('../assets/images/element-acorn-white.webp')}
style={{ height: 30, width: 30, resizeMode: 'contain' }} />
</TouchableOpacity>
</View>