Is there any way we can set the swipe able area in react-native-swiper? For example, from the mock screen, I would like the screen to be swiped only when the user swipe on the area marked by black border.
PS: The default behaviour is to let the screen swipe from any where in the swiper component.
Mock Screen
Related
Hi I have tooltip buttons in my TextInput when user press open a tooltip and I'm taking TextInput values from an array because of that I'm using ScrollView or FlatList.
My problem is that the tooltip of the TOP TextInput is not all visible. As you see in the below tooltip of StoreKey stays outside of ScrollView(PINK).
Is there any way to show it outside of the ScrollView ?
Note: I can use also FlatList.
i'm using createMaterialTopTabNavigator with a swipeEnabled set to True to navigate between screens, I have a Screen which contains an horizontal scrollView, the problems is that the scrollView isn't working, since whenever i try to scroll it horizontally the screen just changes to the next one.
I'd like to be able to disable the swipeEnabled when i swipe in the scrollView.
PS: i tried doing it dynamically by passing a variable to the Screen and a method that sets it to false using onTouchStart, but it's slower than the swiping event of the screen so it end up swiping to the next screen before onTouchStart event start.
I have a very strange bug in the height or positioning of a scene in a StackNavigator.
I have a BottomTabNavigator with several StackNavigators inside.
The AppNavigator has lazy: true.
I'm using always a custom header component, set in the StackNavigator options header key.
The problem occurs when I switch from one tab to the other and the StackNavigator first scene renders. It seems the height or the positioning of the scene is off at the beginning and then it gets right.
I've logged the StackNavigator options during the re-renders and the only thing that changes when the positioning goes from wrong to right is the layout minHeight and minWidth that are both 0 in the beginning (wrong position) and have normal values like 751 in the last render (right position).
Any idea what could cause this?
I've attached a gif showing the issue
For an app i'm working on the designer wants a background image to a scrollview which would be anchored to the bottom of the content area of the scrollview.
So let's say the screen is 500px tall,the scrollview on content is 1000px, the image to display in the background is 200px.
How can i make it so that the background of the flatlist is empty until the user scroll and reveals the bottom 200px of the content of the scrollview.
I am using the Modal component from react-native to creat a slide up menu for users to select. The issue with this is, if you wish to dim the background and animate with 'slide', it does this ugly thing of sliding a dimmed box up the screen, instead of dimming the whole background THEN sliding the view in.
So I tried to solve for this by using two Modals. One modal for the dark background to fade in and second modal to slide in with the menu with a transparent background.
This actually works, but when this.doneDayPicker changes the state of this.state.showModalDayPicker so both modals are no longer visible, <DarkModal> still appears. I'm left with <DarkModal> permanently on the screen.
What can I change to let <DarkModal> dissapear when this.state.showModalDayPicker is changed?
return (
<DarkModal visible={this.state.showModalDayPicker}>
<GoalModalScreen
visible={this.state.showModalDayPicker}
done={this.doneDayPicker}
title='Health benefits'
height={this.state.goalModalHeight}
>
{this.flatList()}
</GoalModalScreen>
</DarkModal>
);
Initially I would say this is because there is no done property on DarkModal like goalModalScreen?
Or use a Ternary Operator
{this.state.showModalDayPicker ? <DarkModal> : undefined}
You might also setup DarkModal's own toggle in state.
{this.state.toggleDarkModal ? <DarkModal> : undefined}