I need to disable a button when scrolling using Animated.ScrollView in react-native.
I am trying to apply something like:
disabled={this.state.scrollY._value <= 30 ? false : true}
in the props of the TouchableHighlight.
From what I have learned, it is not possible to apply the value: this.state.scrollY._value directly into the 'disabled' prop of the TouchableHighlight. However I really dont know how to proceed -.-
I am really grateful for any help.
my button is in the following format:
<Animated.View>
<TouchableHighlight>
<Icon />
</TouchableHighlight>
</Animated.View>
here is the complete code:
<Animated.View style={{
position: 'absolute',
elevation: 5,
justifyContent: 'center',
flex: 1,
height: 100,
width: 100,
opacity: 1,
left: SCREEN_WIDTH / 2 - SIZE / 2,
top: 120,
opacity: buttonTopDisappearance,
}}>
<TouchableHighlight
onPress={() => {
this.toggleView(playBack);
if (!playBack) {
this.setState({ playBack: true })
} else {
this.setState({ playBack: false })
}
}}
underlayColor="#2882D8"
disabled={this.state.scrollY._value <= 30 ? false : true}
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: null,
height: null,
borderRadius: SIZE / 2,
backgroundColor: '#48A2F8',
position: 'relative',
elevation: 6,
}}
>
<IconFontAwesome name="plus" size={24} color="#F8F8F8" />
</TouchableHighlight>
</Animated.View>
Related
related to : https://github.com/Flair-Dev/react-native-awesome-gallery
I tried many things, but nothing is working.
I made the gesture and reanimation installation as wanted.
what I have :
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Gallery from 'react-native-awesome-gallery';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const ModalInfos = (props) => {
const [showMenu, setShowMenu] = useState(false)
return (
<View style={style.centeredView}>
<View style={style.modalView}>
<Text>{props.infos.name}</Text>
<Text> lots of infos here</Text>
....
....
....
<Text style={{ fontWeight: 'bold' }}> check menu </Text>
<TouchableOpacity
onPress={() => setShowMenu(true)}
>
<MaterialCommunityIcons name="book-open-variant" size={20} color={'#fff'} />
</TouchableOpacity>
</View>
{
showMenu &&
<View style={style.gallery}>
<GestureHandlerRootView style={{ flex: 1 }}>
<Gallery
data={["http://10.0.2.2:8080/images/menu/" + props.infos.barInfos.photomenu1, "http://10.0.2.2:8080/images/menu/" + props.infos.barInfos.photomenu2]}
onIndexChange={(newIndex) => {
console.log(newIndex);
}}
/>
</GestureHandlerRootView>
</View>
}
</View>
)
}
const style = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
modalView: {
width: '95%',
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
gallery: {
flex: 1,
width: "100%",
height: "100%",
position: 'absolute',
zIndex: 10,
backgroundColor: '#202124e6',
}
});
export default ModalInfos;
With or without the GestureHandlerRootViewits the same result, i can see only the first image, and I can't do anything, no swipe, no zoom, not gesture.
I switched to react-native-image-viewing
works more than perfectly
I'm implementing a custom header for #react-navigation/native-stack. Using React Navigation v6.
One of the elements within the custom header has a native shadow on iOS added (via the style prop). The shadow is a tad bigger than the header and unfortunately, I can't get it to display beyond the boundaries of the header. Of course, I've tried using overflow: visible on basically every component in the tree, but no success. The shadow is clipped off:
Here's my custom header:
function CustomHeader(props: NativeStackHeaderProps) {
const { options, route, navigation } = props;
const insets = useSafeAreaInsets();
const headerHeight = Helpers.getHeaderHeight(insets);
return (
<View style={{
height: headerHeight,
paddingTop: insets.top,
width: '100%',
backgroundColor: Colors.white,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingLeft: 20,
paddingRight: 20,
overflow: 'visible',
}}
>
<View style={{
flex: 1, display: 'flex', alignItems: 'flex-start',
}}
>
{ options.headerLeft ? options.headerLeft({ canGoBack: false }) : (
<TouchableOpacity
onPress={() => route.name === 'Home'
? null
: navigation.reset({ index: 0, routes: [{ name: 'Home' }] })}
>
<Image
style={{ width: Sizing.logo, height: Sizing.logo }}
source={Logo}
/>
</TouchableOpacity>
)}
</View>
<Text style={{
textAlign: 'center', color: Colors.purple,
}}
>
{(options.title || route.name).toUpperCase()}
</Text>
<View style={{
flex: 1, display: 'flex', alignItems: 'flex-end', overflow: 'visible',
}}
>
{ options.headerRight ? options.headerRight({ canGoBack: false }) : null}
</View>
</View>
);
}
The button on the right with the shadow is passed in through the headerRight option and contains this shadow style:
nativeShadow: {
shadowColor: Colors.gray,
shadowOffset: { width: 0, height: 8 },
shadowRadius: Colors.shadows.gray.distance,
shadowOpacity: 0.5,
},
Any idea what I could try next? I don't want to increase the headers' height since this would break the layout elsewhere.
I had a similar problem with the menu. I think i was taking another way and maybe you should try it.
Be sure that all the parent elements has at least the same height than the navmenu's height.
import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, Image, View, Text } from 'react-native';
const styles = StyleSheet.create({
menuParent: {
marginLeft: 30,
justifyContent: "flex-start",
alignItems: "flex-end",
flex: 1,
height: 250
},
btnContainer: {
width: 40,
height: 40,
elevation: 50,
zIndex: 50,
marginTop: 5
},
image: {
width: 40,
height: 40,
},
menuContainer: {
position: "absolute",
top: 5,
left: -5,
right: -5,
padding: 20,
borderRadius: 10,
elevation: 10,
zIndex: 10,
flex: 1,
height: 230,
backgroundColor: "#fff",
}
});
export default class DefaultHeaderMenu extends Component {
state = {
menuVisible: false
};
constructor(props) {
super(props);
}
render() {
return (
<View style={ styles.menuParent }>
{this.state.menuVisible ? <View style={ styles.menuContainer }></View> : null }
<TouchableOpacity
style={ styles.btnContainer }
onPress={ () => this.setState({ menuVisible: !this.state.menuVisible }) }
>
<Image
source={ require('#/assets/img/menu.png') }
style={ styles.image }
/>
</TouchableOpacity>
</View>
);
}
}
This is the component i used and the passed it to nav as headerRight element.
In my case, the problem was that height: 250 was missing in menuParent.
I hope it helps you and good luck
I had a problem like this once and fixed it by using 'zIndex'. Try setting it as the* max index in your project. Hope it helps
I'm trying to make these two Card components appear next to each other in a row as shown
here which seems to work when I wrap the component in a View, but appears like this with a bunch of unnecessary space in between when I try it with a TouchableOpacity.
Here is my code for the Card component (currently with TouchableOpacity on and the View wrapper commented out):
export const NavCard = ({
title,
height = 200,
onPress = null,
background = null,
}) => {
return (
<TouchableOpacity
onPress={onPress}
style={[
{ height: height },
background ? styles.cardImage : styles.noImage,
]}
>
{/* <View
style={[
{ height: height },
background ? styles.cardImage : styles.noImage,
]}
> */}
<Image
source={background}
resizeMode="cover"
style={{
height: height,
width: "100%",
borderRadius: 15,
position: "absolute",
top: 0,
right: 0,
}}
/>
<View style={{ padding: 15 }}>
<Text style={styles.title}>{title}</Text>
<Image
style={styles.arrow}
source={require("../assets/arrow-right.png")}
/>
</View>
{/* </View> */}
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
cardImage: {
flexGrow: 1,
margin: "2%",
borderRadius: 15,
},
noImage: {
flexGrow: 1,
margin: "2%",
borderRadius: 15,
backgroundColor: "#333436",
},
title: {
fontSize: 24,
color: "#E4E5EA",
fontWeight: "bold",
shadowColor: "#000000",
shadowOffset: { width: 2, height: 2 },
shadowOpacity: 1,
shadowRadius: 4,
},
arrow: {
width: 15,
height: 15,
resizeMode: "contain",
position: "absolute",
top: 22,
right: 20,
},
});
Here is the code for the screen:
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<View style={styles.rowContainer}>
<NavCard
title="Map"
height={180}
onPress={() => navigation.navigate("Map")}
background={require("../assets/pvdx1.png")}
></NavCard>
<NavCard
title="CAD"
height={180}
background={require("../assets/pvdx1.png")}
onPress={() => navigation.navigate("CADScreen")}
></NavCard>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingTop: 10,
padding: 4,
flex: 1,
},
rowContainer: {
flexDirection: "row",
justifyContent: "space-between",
},
body: {
paddingTop: 10,
fontSize: 16,
color: "#E4E5EA",
},
});
export default HomeScreen
Does anyone know why it's messing up the width of both components if the styles of the View and TouchableOpacity are exactly the same? I'm using React Native.
Edit: Have updated to use Image instead of ImageBackground (code now reflects this), but the result is the same.
I figured out the issue: I was importing TouchableOpacity from react-native-gesture-handler instead of react-native. Changed it and it works just fine.
Probably the problem is in your <ImageBackground /> , Because I replaced that with native <Image /> and it's working. here is how my Image looks, you can compare with your code:
<Image
style={{
height: height,
borderRadius: 15,
position: "absolute",
top: 0,
right: 0,
width: "100%"
}}
resizeMode="cover"
source={{ uri: "https://via.placeholder.com/250x150" }}
/>
Here you can check the working code
for me i had to also set the width on the TouchableOpacity (and the view within)
<TouchableOpacity
style={{flex: 1, width: '100%'}}
iOS:: Cant't find automation id for floating button position: 'absolute' in app when floating button is in top of FlatList. When I removed the flatList, I can able to find the automation id in Appium tool.
render() {
return (
<View style={AppStyles.secondaryContainer}>
<NavigationEvents
onDidFocus={() => this.onScreenFocused()}
onDidBlur={() => {
clearInterval(this.backgroundTimer);
}}
/>
{this.renderStaffSelection()}
{this.renderStaffList()}
{this.renderAddButton()}
{this.state.showAddEmployeeModal && this.renderAddEditEmployeeModal(EMPLOYEE_TYPE.ADD)}
{this.state.showEditEmployeeModal && this.renderAddEditEmployeeModal(EMPLOYEE_TYPE.EDIT)}
{this.state.showDeleteModal && this.renderDeleteStaffModal()}
</View>
);
}
renderAddButton() {
return (
<View style={styles.addItemAbsoluteViewStyle} accessible={false}>
<T2STouchableOpacity
activeOpacity={1}
onPress={() => {
this.setState({ showAddEmployeeModal: true });
}}
screenName={SCREEN_NAME.STAFF_LIST}
id={VIEW_ID.ADD_STAFF_BUTTON}
accessible={true}
>
<T2SCustomIcon name={ICO_MOON.ADD} size={30} style={styles.plusIconStyle} />
</T2STouchableOpacity>
</View>
);
}
addItemAbsoluteViewStyle: {
position: 'absolute',
right: 20,
bottom: 40,
backgroundColor: Palette.carrotOrange,
borderRadius: 28,
height: 56,
width: 56,
alignItems: 'center',
justifyContent: 'center',
shadowColor: Palette.darkBlack,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
elevation: 10
}
I am trying to make my own tab navigation like Instagram has instagram example. I noticed that the items within the footer view I made does not stay within the bounds and moves to the top left of the screen. Images shown - What I am trying to achieve What happens frequently
Here is the most important part of my code. I have done inline styles temporarily to try and figure out the issue. Here is the part where the issue lays <View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} <TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity> </View>-
render() {
return (
<MapView style = {[style.container, style.map]}
region = {this.state.initialPosition}>
<MapView.Marker coordinate = {this.state.markerPosition}>
<View style = {style.radius}>
<View style = {style.marker}/>
</View>
</MapView.Marker>
<View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} >
<TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity>
</View>
</MapView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
//alignItems: 'center',
},
text: {
color: '#fff'
},
map: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute'
},
radius:{
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(1,213,106,0.3)',
borderWidth: 1,
borderColor: 'rgba(1,213,106,0.3)',
alignItems:'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderWidth: 3,
borderColor: '#fff',
borderRadius: 20 / 2,
borderWidth: 3,
overflow: 'hidden',
backgroundColor: '#01D56A'
},
menuSection: {
backgroundColor: 'rgba(255, 255, 255, 0.7)',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height/3,
justifyContent: 'flex-end',
alignItems: 'center'
},
icon:{
width: 50,
height: 50,
backgroundColor: 'black'
}
})