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.