I have a screen, there he is:
// Home.jsx
import {View, Text, StatusBar} from 'react-native';
import Head from '../components/header/Head';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Greeting from '../components/block/Greeting';
import MiniMenu from '../components/block/MiniMenu';
import ArticleMiniList from '../components/block/ArticleMiniList';
import InternetCheck from '../components/utils/InternetCheck';
import {createContext, useEffect, useState} from 'react';
import {
GestureHandlerRootView,
RefreshControl,
ScrollView,
} from 'react-native-gesture-handler';
import PointPelanggaran from '../components/block/PointPelanggaran';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
export const RefreshContext = createContext();
function HomeScreen() {
const insets = useSafeAreaInsets();
const [refresh, setRefresh] = useState(false);
useEffect(() => {
if (refresh) {
setTimeout(() => {
setRefresh(false);
}, 3000);
}
}, [refresh]);
return (
<View>
<GestureHandlerRootView>
<RefreshContext.Provider value={{refresh, setRefresh}}>
<View
className="justify-center items-center space-y-10"
style={{
paddingTop: insets.top,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
}}>
<StatusBar
backgroundColor="transparent"
barStyle={'dark-content'}
translucent={true}
/>
</View>
<Head name={'StudentHub'} button />
{/* <View style={{flex: 1}}> */}
<ScrollView
// contentContainerStyle={{flexGrow: 1}}
contentInsetAdjustmentBehavior="always"
refreshControl={
<RefreshControl
refreshing={refresh}
onRefresh={() => setRefresh(true)}
/>
}>
<View
style={{
flex: 1,
}}>
<Greeting />
<MiniMenu />
<ArticleMiniList />
<PointPelanggaran />
</View>
</ScrollView>
{/* </View> */}
<InternetCheck />
</RefreshContext.Provider>
</GestureHandlerRootView>
</View>
);
}
export default HomeScreen;
I can't scroll in ScrollView even though the content is already more than the screen height.
I saw some suggestions on the internet to provide a container with the flex-1 style to wrap the ScrollView, but with that I can't see my content at all.
Without flex container : Can't scrolling, but the content is still visible
With flex container : Content is not visible and absolutely can't be scrolled
