I'm planning to achieve this in mobile. Using Flatlist.
It scrolls as a whole
Im trying to create this in react native and my code looks like this
<Content nestedScrollEnabled
style={{ flex: 1, backgroundColor: COLOR.LIGHT }}
contentContainerStyle={{ flex: 1 }} // important!
>
<List>
{!_.isEmpty(this.state.newNotif) ?
<React.Fragment>
<ListItem itemDivider>
<Text style={{ color: '#333333', fontSize: 16 }}>New</Text>
</ListItem>
<FlatList
ref="infiniteList"
data={this.state.newNotif}
keyExtractor={(x, i) => x.id.toString()}
renderItem={(data) => this.renderNewNotifCard(data.index, data.item)}
// onEndReached={({ distanceFromEnd }) => {
// console.log(distanceFromEnd);
// this.handleEnd()
// }}
// onEndReachedThreshold={0.5}
/>
</React.Fragment>
:
null
}
{!_.isEmpty(this.state.earlierNotif) ?
<React.Fragment>
<ListItem itemDivider>
<Text style={{ color: '#333333', fontSize: 16 }}>Earlier</Text>
</ListItem>
<FlatList
data={this.state.earlierNotif}
// onEndReached={() => this.reachedEndCallBack()}
keyExtractor={(x, i) => x.id.toString()}
onEndReached={({ distanceFromEnd }) => {
console.log(distanceFromEnd);
this.handleEnd()
}}
onEndReachedThreshold={0.5}
renderItem={(data) => this.renderEarlierNotif(data.index, data.item)}
/>
</React.Fragment>
:
null
}
</List>
But seems its not having scroll as a whole, It scroll of each set of flatlist.
I hope some could help me.
You should use SectionList with section header - https://reactnative.dev/docs/sectionlist
Related
I am making an album app with react native and want to make FlatList with images like Instagram. When clicks item of FlatList, it will navigate to the same item in another screen with different FlatList. How to do this?
when click image JS
navigate to it in another screen
My code:
const RenderItemList = ({item, index}) => {
return (
<Pressable onPress={() => navigation.navigate('detail')}>
<View key={index} style={[index%3!==0 ? {paddingLeft:2} : {paddingLeft:0}, {marginBottom: 2}]}>
<Image style={{width: sizeOfImage, height: sizeOfImage}}
source={{uri : item.uri}}
/>
</View>
</Pressable>
)}
You can use initialScrollIndex prop from the Flatlist API. Pass the index as route params to other screen and set initialScrollIndex to that index.
Example below
<FlatList
data={sampleImages}
keyExtractor={(item) => item.id.toString()}
numColumns={3}
renderItem={({ item, index }) => (
<Pressable
style={{ width: EachWidth, height: EachWidth }}
onPress={() => navigation.navigate('Details', { initialScroll: index })}>
<Image
source={{ uri: item.download_url }}
style={{ width: EachWidth, height: EachWidth }}
/>
</Pressable>
)}
/>
On other screen,
<FlatList
data={sampleImages}
keyExtractor={(item) => item.id.toString()}
initialScrollIndex={route.params.initialScroll || 0} // Use here
renderItem={({ item }) => (
<View style={{ width: ScreenWidth, height: ScreenWidth }}>
<Image
source={{ uri: item.download_url }}
style={{ width: ScreenWidth, height: ScreenWidth }}
/>
</View>
)}
/>
Working Example
The listStyle where I set the height of my list it's not working on Autocomplete.
I'm using react-native-autocomplete-input.
Check the Example:
<HideKeyboard>
<SafeAreaView style={mainStyle.container}>
<StatusBar style="light" backgroundColor="#0a3f88" />
<SimpleLineIcons style={mainStyle.menuIconHome} name="menu" size={28} color="black" onPress={() => {Keyboard.dismiss(), navigation.openDrawer()}}/>
<Image style={mainStyle.logo} source={logo}></Image>
<Autocomplete
style={{
backgroundColor:"transparent",
textAlign:"center",
}}
onChangeText={(text) => searchFilterFunction(text)}
data={filteredDataSource}
placeholder="Nome da empresa..."
autoFocus={true}
listStyle={{
maxHeight:20,
}}
containerStyle={{
paddingHorizontal:40,
position:"absolute",
top:"45%",
alignSelf:"center",
}}
inputContainerStyle={{
height:40,
zIndex:999,
}}
flatListProps={{
keyExtractor: (item, index) => index.toString(),
renderItem: ({ item }) =>
<TouchableOpacity
onPress={()=>{
navigation.navigate("Projeto",{
item:item,
});
}}
>
<View style={{
height:50,
borderBottomWidth:0.4,
}}>
<Text style={{
color:"#0a3f88",
fontWeight:"bold",
marginLeft:10,
}}>{item}</Text>
</View>
</TouchableOpacity>
}}
/>
<Image style={mainStyle.cmlagos} source={camaraLagos}></Image>
</SafeAreaView>
</HideKeyboard>
As you can see in the prinscreen below , the listStyle have no effect.
Already tried to use ScrollView outside of the Autocomplete but it's the same.
Any suggestions ?
Solved!
Instead of use the listStyle, we can use style:{height: 150} inside of flatListProps.
I am using FlatList inside SectionList, but my row is repeating Multiple Times.
I have stored Data in TWO States and Fetching its value in SectionList and FlatList with condition.
Please Help me. Thank You.
Output Screen
<SectionList
ItemSeparatorComponent={FlatListItemSeparator}
sections={[
{ title: 'Dishes', data: cates },
{ title: 'Restaurants', data: users },
]}
renderSectionHeader={({ section }) => (
<Text style={{ fontWeight: 'bold', color: '#dc3545', fontSize: 20, paddingVertical: 5 }}>
{section.title}
</Text>
)}
renderItem={({ item }) => (
// Item for the FlatListItems
<View>
{
item.catIcon ?
<FlatList
data={cates}
style={{ backgroundColor: '#fff', paddingTop: 5, borderRadius: 6, paddingBottom: 10 }}
numColumns={4}
renderItem={({ item }) => (
<Text>{item.catName}</Text>
)}
/>
:
<Text>{item.RName}</Text>
}
</View>
)}
keyExtractor={(item, index) => index}
/>
In your flatList you are using the wrong data, you are giving for each section the same array when it should be dependent on the section, try with this:
renderItem={({ item }) => (
// Item for the FlatListItems
<View>
{
item.catIcon ?
<FlatList
data={item.data} // <---- CHANGE THIS ROW
style={{ backgroundColor: '#fff', paddingTop: 5, borderRadius: 6, paddingBottom: 10 }}
numColumns={4}
renderItem={({ item }) => (
<Text>{item.catName}</Text>
)}
/>
:
<Text>{item.RName}</Text>
}
</View>
)}
ListHeaderComponent inside flatlist doesn't work. It won't render nothing in header (above flatlist). If I however put some custom component it does work but it doesn't with my renderHeader function. I tried making a custom component with the same view as in renderHeader but when I used that nothing rendered so I don't know
My flatlist along with whole render:
render() {
const { height } = Dimensions.get("window");
return (
<View style={{flex: 1,
backgroundColor: "#EBECF4"}}>
{/* <Text>
Connection Status :{" "}
{this.state.connection_status ? "Connected" : "Disconnected"}
</Text> */}
{/* <Loader loading={this.state.loading} /> */}
<StatusBar backgroundColor="#63003d" barStyle="light-content" />
<SafeAreaView>
<ModernHeader
backgroundColor="#63003d"
height={50}
text="Eleph"
textStyle={{
color: "white",
fontFamily: "Lobster-Regular",
//fontWeight: "bold",
fontSize: 25,
}}
leftIconComponent={
<TouchableOpacity
style={{ marginRight: 0, margin: 0 }}
onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())
}
>
<FontAwesome5 name="bars" size={22} color="white" />
</TouchableOpacity>
}
rightIconComponent={
<TouchableOpacity
style={{ marginLeft: 0, margin: 0 }}
onPress={() => this.props.navigation.navigate("Profile")}
>
{/* <MaterialCommunityIcons
name="chart-areaspline"
size={24}
color="#639dff"
/> */}
<Foundation name="graph-bar" size={24} color="white" />
{/* <FontAwesome name="bar-chart" size={24} color="white" /> */}
</TouchableOpacity>
}
/>
</SafeAreaView>
<FlatList
//contentInset={{ top: HEADER_HEIGHT }}
//contentOffset={{ y: -HEADER_HEIGHT }}
data={this.state.post}
extraData={this.state.post}
keyExtractor={(item) => item.id.toString()}
style={{
marginHorizontal: 0,
marginVertical: 6,
}}
renderItem={({ item }) => this.renderPost(item)}
ListFooterComponent={this.renderFooter}
ListHeaderComponent={this.renderHeader}
refreshControl={
<RefreshControl
style={{ color: "#639dff" }}
tintColor="#639dff"
titleColor="#fff"
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
/>
}
initialNumToRender={7}
onEndReachedThreshold={0.1}
showsVerticalScrollIndicator={false}
onEndReached={() => {
if (
!this.onEndReachedCalledDuringMomentum &&
!this.state.isMoreLoading
) {
this.getMore();
}
}}
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false;
}}
onScroll={(e) => {
scrollY.setValue(e.nativeEvent.contentOffset.y);
}}
></FlatList>
{/* <View style={styles.footer}>
<TouchableOpacity
activeOpacity={0.9}
onPress={this.getMore}
style={styles.loadMoreBtn}
>
<Text style={styles.btnText}>See more moods</Text>
{this.state.loading ? (
<ActivityIndicator color="white" style={{ marginLeft:8 }} />
) : null}
</TouchableOpacity>
</View> */}
</SafeAreaView>
</View>
My renderHeader function:
renderHeader = () => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
backgroundColor: "#ffffff",
//width: "100%",
padding: 11,
alignItems: "center",
position: "absolute",
justifyContent: "center",
//top: 50,
//bottom: 0,
//left: 0,
//elevation: 4,
//right: 0,
//height: 50,
}}
//flexDirection: "row",
//backgroundColor: "#ffffff",
//width: "100%",
//padding: 11,
//alignItems: "center",
>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Post")}
>
<Text
style={{ alignItems: "center", color: "#C4C6CE" }}
//placeholder={How are you feeling right now ${this.state.user.name}?}
multiline
>{Tell us how are you feeling right now ${this.state.user.name}?}</Text>
</TouchableOpacity>
{/* <View style={styles.divider}></View> */}
</View>
);
}
Why for example renderFooter works??
renderFooter = () => {
if (!this.state.isMoreLoading) return true;
return (
<ActivityIndicator
size="large"
color={"#D83E64"}
style={{ marginBottom: 10 }}
/>
);
};
Use ListHeaderComponentStyle to style the ListHeaderComponent.
I created a simple snack for you, check if this helps. Your code looks okay but not sure about the whole screen design. Here is my snack link.
https://snack.expo.io/#saad-bashar/excited-fudge
It might be related to the other components inside your screen. So first check only with flatlist, remove all other components. Hope you can sort it out :)
The solution is to remove the "absolute" style in the header for flatlist. The question is mine im just answering with different account but this is the solution that worked.
When I load my component onEndReached will be triggered one time before I scroll my <SectionList />, but when I scroll to bottom onEndReached won't be triggered any more.
Here is my code:
render (
return (
<View style={{ flex: 1 }}>
<SectionList
style={{ backgroundColor: 'pink' }}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={() => console.log('refreshControl')}
tintColor='gray'
/>
}
renderSectionHeader={this.sectionHeader}
renderItem={this.renderSectionView}
sections={reservations}
onEndReachedThreshold={0.05}
onEndReached={(data) => {
console.log('data', data); // { distanceFromEnd: -457 }
console.log('onEndReached');
}}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
/>
</View>
);
);
Here is my <SectionList /> screen:
In my <SectionList /> refreshControl is fine but onEndReached is not working, any one knows what happened ? Thanks.
Looks like a lot of people are experiencing the same. There is a suggestion to change the onEndReachedThreshold to value bigger that 0.05, for example: 0.5
Try something like
render (
return (
<SafeAreaView style={{ flex: 1 }}>
<SectionList
style={{ backgroundColor: 'pink' }}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={() => console.log('refreshControl')}
tintColor='gray'
/>
}
renderSectionHeader={this.sectionHeader}
renderItem={this.renderSectionView}
sections={reservations}
onEndReachedThreshold={0.05}
onEndReached={(data) => {
console.log('data', data); // { distanceFromEnd: -457 }
console.log('onEndReached');
}}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <View style={{ backgroundColor: 'gray', height: StyleSheet.hairlineWidth }} />}
/>
</SafeAreaView>
);
);