android - Problem with ScrollView and SearchBar on Android / Expo-web

Question

I am making an website using react-native-web and i am having a problem with the mobile version of the app, especially with in android.

When i start scrolling the website, the searchBar and toolbar hide, and the app does not respond very well, leaving a white bar on the bottom, or ajusting in a strange way, videos below:

Before and after scrolling, when the bars hide

Here is my app.tsx file:

const App: React.FC = () => {
  const { width, height } = useDimensions().window;

  return (
    <>
      <Provider store={store}>
        <Router>
          <View
            style={{
              height: height < width ? height : Dimensions.get('window').height,
              width: height < width ? width : Dimensions.get('window').width,
              backgroundColor: '#0d0d0d',
            }}
          >
            <StatusBar barStyle="light-content" backgroundColor="#0d0d0d" />
            {height < width ? <WebRoutes /> : <MobileRoutes />}
          </View>
        </Router>
      </Provider>
    </>
  );
};

and here my home page, with the ScrollView:

return (
    <>
      <LandingPage screenYAnimated={screenYAnimated} />
      <Animated.ScrollView
        ref={scrollViewRef}
        scrollEventThrottle={16}
        onScroll={Animated.event([
          { nativeEvent: { contentOffset: { y: screenYAnimated } } },
        ])}
        style={{
          flex: 1,
          transform: [
            { scale: scaleScrollView },
            { translateY: translateScrollView },
          ],
        }}
        contentContainerStyle={{
          flex: 1,
        }}
      >
        <View
          style={{
            height: '100%',
            width: '100%',
            backgroundColor: 'transparent',
          }}
        />

        <ServiceSlide screenYAnimated={screenYAnimated} />
        <Process screenYAnimated={screenYAnimated} />
        <View style={{ height: 300, backgroundColor: 'transparent' }} />
        <Works screenYAnimated={screenYAnimated} />
        <Blog screenYAnimated={screenYAnimated} />
        <Footer color="#595959" />
      </Animated.ScrollView>
      <Contact />
      <Header animateHeader={animateHeader} />
    </>
  );
};

the transform part of the ScrollView is for an animation when i click the button, but they start at 1 and 0.

I wanted to know if is it possible for the searchbar and toolbar to remain static, or a way to fix the responsiveness of the app itself.

标签： androidreact-nativeexporeact-native-web