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.
Related
im using Stack.Navigator to provides screen, on main screen using Flatlist render data
getting that error on Android only, difference weird view each time focus , it working fine on iOS
im was trying with other solutions but no luck
const DATA = [
...
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const renderItem = ({ item }) => <Item title={item.title} />;
return (
<KeyboardAvoidingView
style={{ flex: 1, backgroundColor: 'red' }}
behavior='height'
keyboardVerticalOffset={-500}
>
<View style={{ flex: 1 }}>
<FlatList style={{ flex: 1 }} data={DATA} renderItem={renderItem} />
<TextInput placeholder='Input' style={styles.textInput} />
<KeyboardSpacer />
<SafeAreaView />
</View>
</KeyboardAvoidingView>
);
and setting on app.json
"softwareKeyboardLayoutMode": "pan"
Im using
"expo": "^43.0.0",
"react-native": "0.64.3",
thank you!
When I click on the cross icon first time, it lowers the keyboard and on the second tap, it clears the text in the search bar. I wanted to clear the text on the first tap I have tried other solutions as well but nothing worked. How can i clear the text on the first click?
return (
<View style={styles.FlatList_header}>
<View style={styles.header_style}>
<Input
autoFocus={true}
style={styles.textInputStyle}
onChangeText={text => this.search(text)}
value={this.state.text}
/>
<Icon
name="close"
style={styles.crossIcon}
onPress={() => {
this.search('');
}}
/>
</View>
</View>
);
};
render() {
const {data, onPress} = this.props;
return (
<>
<SafeAreaView
style={{flex: 1, backgroundColor: customColor.defaultGreen}}>
<View style={styles.MainContainer}>
<FlatList
data={data}
renderItem={({item}) => (
<View
style={{
flex: 1,
borderWidth: 0.5,
borderColor: customColor.textLightGrey,
}}>
<Text
style={styles.FlatList_Item}
onPress={() => onPress(item)}>
{item?.taskName}
</Text>
</View>
)}
enableEmptySections={true}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
keyExtractor={item => item.id}
/>
</View>
</SafeAreaView>
</>
);
}
}
In your onPress function do this.
onPress={() => {
Keyboard.dismiss()
this.search('');
this.setState(text: '')
}}
Also, you are not setting your state while onChangeText, Do this in your onChangeText
onChangeText={(text)=>this.setState({text})}
Edit: Add this into your FlatList
keyboardShouldPersistTaps='always'
Create a new state for ex: pressed.
If user touch the first time set true. And insert the if condition in the view.
<TouchableOpacity onPress={() => this.setState({ pressed: !this.state.pressed})}>
{this.state.pressed ? (
<Icon
name="close"
style={styles.crossIcon}
onPress={() => {
this.search('');
}}
/>
) : (
<Text>Clear</Text>
)}
</TouchableOpacity>
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.
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>
)
}
}
I want to achieve a behavior like android's CoordinatorLayout enter always for my ToolBar i tried too many solutions some did work but not fully like https://github.com/maolion/mao-rn-android-kit which is really cool but with one setback as it doesn't work with ListView i also tried Animated but the scroll event throttle on android is just not working most of the times it does not even work.
Using mao-rn-android-kit
<CoordinatorLayoutAndroid ref={(component) => this.coordinatorLayout = component} fitsSystemWindows={false}>
<AppBarLayoutAndroid
layoutParams={{
width: 'match_parent',
height: 112
}}
style={{ backgroundColor:"#528eff" }}>
<View layoutParams={{height: 56, width: this.windowWidth, scrollFlags: (
AppBarLayoutAndroid.SCROLL_FLAG_SCROLL |
AppBarLayoutAndroid.SCROLL_FLAG_ENTRY_ALWAYS)}} style={{height: 56}}>
<ToolbarAndroid
titleColor={'#FFF'}
title={this.props.title}
navIcon={images.arrowBack}
onIconClicked={() => this._goBack()}
onActionSelected={() => {}}
actions={[{title: 'Search', icon: images.search, show: 'always'}]}
style={[{backgroundColor: '#528eff', width: this.windowWidth, height: 56}]}/>
</View>
<View layoutParams={{height: 56, width: this.windowWidth}}
style={{flex: 0, flexDirection: 'row', justifyContent: 'center', width: this.windowWidth, backgroundColor: '#528eff'}}>
<TouchableOpacity onPress={() => this.getDocuments('high')}
style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}>
<Text
style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}>HIGH</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.getDocuments('normal')}
style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}>
<Text
style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.getDocuments('low')}
style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}>
<Text
style={[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text>
</TouchableOpacity>
</View>
</AppBarLayoutAndroid>
<View
ref={(component) => this.contentLayout = component}
style={{flex: 1, backgroundColor: 'transparent', height: this.windowHeight - 150}}>
<ListView
style={{height: this.windowHeight - 150, overflow: 'hidden'}}
dataSource={this.state.documents}
enableEmptySections={true}
renderRow={(rowData) => this._renderRow(rowData)}
/>
</View>
</CoordinatorLayoutAndroid>
The key to reacting to the scroll position fluidly is using Animated.event along with the onScroll to update an Animated.value
getInitialState: function() {
return {
scrollY: new Animated.Value(0)
}
},
render() {
return (
<ScrollView
scrollEventThrottle={16}
onScroll={Animated.event(
[{nativeEvent:
{contentOffset:
{y: this.state.scrollY}
}
}]
)}>
// etc ...
}
I could then call interpolate on this.state.scrollY and feed this value into a transform style on another component that I wanted to update as the ScrollView scrolled.