Develop Reference

How to scroll all flatlists nested in a section list?

I have a FlatList nested in a SectionList as shown below.
There is always 3 sections (rows) and each section has a FlatList with a horizontal scroll.
Expected
On button click, invoking the scrollToEnd() function, to scroll all 3 flatlists from each section to end.
Problem
Only the bottom or last flatlist scrolls to the end.
I cannot figure out why this is - I thought the ref in the flatlist may only be referencing the last Flatlist rendered and not the other two, maybe? If so, any tips or suggestions are welcome. Thank you.
...
const flatlistRef = useRef();
const scrollToEnd = () => {
flatlistRef.current.scrollToEnd({ animating: true });
};
...
<SectionList
contentContainerStyle={styles.sectionListContainer}
stickySectionHeadersEnabled={false}
sections={myData}
renderSectionHeader={({ section }) => (
<>
<FlatList
horizontal
data={section.data}
contentContainerStyle={
styles.flatlistContainer
}
renderItem={({ item }) => (
<Button
onPress={() => updateData(item.id)}
>
<ListItem item={item} />
</Button>
)}
showsHorizontalScrollIndicator={false}
ref={flatlistRef}
/>
</>
)}
renderItem={({}) => {
return null;
}}
/>

I have also working on this but I found a solution where I can create a Section.List by using react-native-paper.
But you can also use the map function, Here is the code of that
import React from "react";
import {View,Text} from "react-native";
const App = () =>{
return(
<View style={{flex: 1}}>
{data.map((item, index) => (
<View key={index} style={{borderBottomColor: 'black', borderBottomWidth: 2}}>
<Text style={{fontSize: 30, fontWeight: 'bold'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: '#7fc', borderBottomColor: 'blue', borderBottomWidth: 2}}>
<Text style={{fontSize: 20, marginLeft: 40, color: 'blue'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: 'yellow', borderBottomColor: 'red', borderBottomWidth: 2}}>
<Text style={{fontSize: 16, marginLeft: 80,}}>{item.title}</Text>
</View>
))}
</>}
</View>
))}
</>}
</View>
))}
</View>
)
}
export default App;
I hope It will help.

Only running software in Android simulator, Scrollview nested flatlist, unable to scroll

I use srcollview to nest flatlist to render data. After the rendering is successful, however, when running on Android, the view cannot be scrolled, but running on IOS does not.
<View >
<FlatList
data={categoryState}
renderItem={item => <ItemCombination data={item} click={loading} detail={detail} />}
listKey={(item, index) => index.toString()}
numColumns={3}
ListFooterComponent={
<View style={{ width: 794, backgroundColor: '#fff', alignItems: 'center', maxHeight: 300 }} >
{
show ?
showLoading ?
<ActivityIndicator color='#21b6a8' size='large' style={{ marginVertical: 20 }} />
:
{/* unable to scroll */}
<ScrollView style={{ width: Platform.OS === 'web' ? 780 : 794, height: 300 }} showsVerticalScrollIndicator={true} contentContainerStyle={{ alignItems: 'center' }}>
{/* unable to scroll */}
<FlatList
data={menuItems}
renderItem={item => <Item data={item} click={menuItemClick} categoryId={categoryId} />}
keyExtractor={(item, index) => item.id + index.toString()}
numColumns={3}
showsVerticalScrollIndicator={false}
/>
</ScrollView>
:
<View></View>
}
</View>
}
/>
</View>

you can use the built-in nestedscrollenabled prop for the children FlatList component.
<FlatList nestedScrollEnabled />
Nested scrolling is supported by default on iOS. so for android you need to add this.

Flatlist in ListFooterComponent won't work in Android because It has Flatlist's scroll property which scrolls the container of the list with a footer also. Some workaround is like
<FlatList
......
ListFooterComponent={
<View style={{ width: 794, backgroundColor: '#fff', alignItems: 'center', maxHeight: 300 }} >
{
show ?
showLoading ?
<ActivityIndicator color='#21b6a8' size='large' style={{ marginVertical: 20 }} />
:
{/* remove scroll and have map on items to render data footer */}
menuItems.map(item => { render <View> ...</View> }
:
}
</View>
}
/>

react native paper list accordion

I am having a problem with react-native paper list accordion it is not working on android! I mean the list is showing but not when you click the accordion :(. on ios everything is working fine! any idea on how I can solve that :( thx
I am using the latest android version on sumsung
<List.Accordion
key={id}
theme={{ colors: { primary: '#4169e1' } }}
style={{ backgroundColor: 'white', marginBottom: 1 }}
onPress={() => { LayoutAnimation.easeInEaseOut(); }}
title={title}>
<Divider />
<List.Item
titleStyle={styles.textContainer}
title={
<View>
<Text style={styles.text}>{text}</Text>
</View>
} key={index} />
</List.Accordion>

You need to put your <List.Accordion> item inside the <List.AccordionGroup> or <List.Section>
<List.AccordionGroup title={title} key={id}>
<List.Accordion
key={id}
theme={{ colors: { primary: '#4169e1' } }}
style={{ backgroundColor: 'white', marginBottom: 1 }}
onPress={() => { LayoutAnimation.easeInEaseOut(); }}
title={title}>
<Divider />
<List.Item
titleStyle={styles.textContainer}
title={
<View>
<Text style={styles.text}>{text}</Text>
</View>
} key={index} />
</List.Accordion>
</List.AccordionGroup>

DrawerLayoutAndroid don't show menu with openDrawer method

I would like use DrawerLayoutAndroid module on React-Native app. For use openDrawer programmaticaly, i use useRef hook.
On run this method, my Drawer show only black "overflow", but not the navigation.
If i swip to the right, my Drawler menu will be show :/
My code :
const Layout = ({ children }) => {
let drawler = useRef(null);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
ref={drawler}
renderNavigationView={() => (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>
I'm in the Drawer!
</Text>
</View>
)}>
<View style={{ flex: 1 }}>
<ScrollView>
<View style={styles.container}>
<Button onPress={() => drawler.current.openDrawer()}> // Show only overflow, not the menu
Open drawler
</Button>
{children}
</View>
</ScrollView>
</View>
</DrawerLayoutAndroid>
);
};
Anyone can help me ?

I solved the issue with useCallback
const [drawer, setDrawer] = useState();
const refDrawer = useCallback(element => {
setDrawer(element);
}, []);
Don't forget set ref={refDrawer} attribute to the DrawerLayoutAndroid component.

How to use Radio button in Flatlist - React native

I want to create list with radio button using flatlist, but problem is i am able to click on radio button, its not geeting unchecked inside flatlist.
HERE IS MY CODE
<FlatList
data={this.state.addressData}
horizontal={false}
extraData={this.state}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => (
<Card containerStyle={{ backgroundColor: GlobalColors.white, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 10, elevation: 2, padding: 0, borderColor: GlobalColors.white }}>
<View style={{ backgroundColor: GlobalColors.white, padding: 15 }}>
<View style={SelectAddressStyle.horizontalChangeAddress}>
<Radio style={{marginRight : 10}} selected = {true}></Radio>
<Text style={SelectAddressStyle.txtAddressUserName}>{""}</Text>
<Text style={SelectAddressStyle.addressType}>{"HOME"}</Text>
</View>
<Text style={SelectAddressStyle.txtAddress}>
{""}
</Text>
</View>
</Card>
)} />

You have:
<Radio style={{marginRight : 10}} selected = {true}></Radio>
So it can't become unchecked. Maybe try passing in a selected property.

Idk what package you are using for Radio (React native does not have radio by itself) but the problem is that according to this part of your code <Radio style={{marginRight : 10}} selected = {true}></Radio>, you're always passing true to your selected prop, so it won't change in any cases, until you declare a toggle function for it and store its current status in component state. example:
class Example extends component{
state = {
radioStatus: false
}
toggleRadio = () => {
const {radioStatus} = this.state;
this.setState({ radioStatus: !radioStatus})
};
render(){
const {radioStatus} = this.state;
return(
<View>
<Radio selected={radioStatus} onChange={this.toggleRadio} />
</View>
)
}
}