3

How can I make it possible for the user to touch and drag anywhere on the screen to initiate scroll INCLUDING touching on top of this absolute component which is outside and on top of the ScrollView?

A ScrollView containing a lot of text (so the screen is scrollable), with a button on the bottom-center with an approx. width of 60%

I created an example on Snack, here is my code:

import * as React from 'react';
import { StyleSheet, Text, View, ScrollView, Button } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={styles.container} >
      <View style={styles.footer} >
        <LinearGradient
          // Background Linear Gradient
          colors={['rgba(12,8,45,0)','rgba(12,8,45,1)' ]}
          style={styles.gradient}
          start={{ x: .5, y: 0 }}
          end={{ x: .5, y: 1 }}
        />
        <Button title="test"/>
      </View>
      <ScrollView style={styles.scrollview}>
        <Text style={styles.text}> dolor sit amet, consectetur adipiscing elit.  fringilla dui non neque aliquam rutrum.  eu quam lorem.  a fermentum urna, sit amet bibendum sem.  ligula nibh, egestas vel massa sed, lobortis lacinia nisl.  nec enim ac neque venenatis vulputate.  a tellus quis est mollis luctus eget sed risus.  condimentum risus nunc, sed finibus erat tristique suscipit.  convallis risus et magna vestibulum, aliquet aliquet risus ullamcorper.  in mi magna.  at purus vitae lorem pellentesque rutrum sit amet a elit.  feugiat diam eu odio cursus malesuada.  quis massa scelerisque, lobortis purus fermentum, accumsan enim.  tincidunt eget odio a rhoncus.  malesuada, tortor et bibendum auctor, enim sem laoreet neque, vel convallis quam nunc quis leo.  rhoncus, ligula vehicula tincidunt commodo, turpis nunc eleifend lectus, ac tristique est ipsum quis arcu.  quis massa scelerisque, lobortis purus fermentum, accumsan enim.  tincidunt eget odio a rhoncus.  malesuada, tortor et bibendum auctor, enim sem laoreet neque, vel convallis quam nunc quis leo.  rhoncus, ligula vehicula tincidunt commodo, turpis nunc eleifend lectus, ac tristique est ipsum quis arcu.</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(12,8,45,1)',
    height: "100%",
  },
  text: {
    fontSize: 28,
    color: "white",
  },
  footer: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    height: 400,
    width: "100%",
    zIndex: 1,
  },
  gradient: {
    height: 400,
    width: "100%",
  }
});
Rafael Tavares
  • 5,678
  • 4
  • 32
  • 48
Lucas Gruber
  • 31
  • 4
  • You have the footer height to 400. it cover halve the screen. you need to make it as big as the button. – Alen.Toma Sep 16 '21 at 03:50
  • I did that in the snack to make a point. Either way, you can't scroll if you touch the area covered by the footer. I'm looking for a solution where even if you touch the bottom of screen, you can still scroll. It's clunky for a user to touch the area where the scrim has almost tapered off and be unable to scroll. I appreciate any help! – Lucas Gruber Sep 16 '21 at 04:20

1 Answers1

0

I figured out the solution. You can simply set pointerEvents="none" on the View element to make the element ignore your touch.

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Lucas Gruber
  • 31
  • 4