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>
Related
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.
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!
I have updated to Expo SDK 42 in my react-native app, and I am running into one issue one one particular screen that makes use of KeyboardAwareScrollView. On iOS everything is fine. But on Android all I see is a white screen below the header for the code below. Note that if I remove <KeyboardAwareScrollView> altogether, the content again shows up in Android.
Notice I have enableOnAndroid set to true on KeyboardAwareScrollView.
<KeyboardAwareScrollView
enableOnAndroid={true}
enableAutomaticScroll={(Platform.OS === 'ios')}
>
Here is the full code block:
render() {
return (
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
>
<KeyboardAwareScrollView
enableOnAndroid={true}
enableAutomaticScroll={(Platform.OS === 'ios')}
>
<View style={styles.layout.footerPadding}>
<Image source={require('../assets/images/thestaff.jpg')} style={{
width: '100%',
height: winSize.width * 0.5,
}} />
<View style={{
...styles.forms.sectionContainer,
borderTopWidth: 10,
borderTopColor: styles.colors.primary,
}}>
<View style={{
...styles.forms.fieldContainer,
flexDirection: 'column'
}}>
<Text style={{
...styles.forms.fieldLabel,
...styles.layout.fullWidth,
}}>Please reach out with any concerns that you may have.</Text>
<View style={{
...styles.layout.flexRowJustifyEnd,
...styles.layout.fullWidth,
}}>
<Text style={{
...styles.forms.fieldLabel,
marginTop: 10,
width: 190
}}>-The Office Staff</Text>
</View>
<TextInput
style={{
...styles.layout.fullWidth,
marginTop: 30,
}}
multiline={true}
editable={true}
maxLength={1500}
placeholder="Enter a message"
onChangeText={(value) => {
this.setState({ message: value })
}}
value={this.state.message}
/>
</View>
</View>
<View style={styles.forms.submitButton}>
<GradientButton
indicatorColor={styles.colors.textInverse}
onPress={this.handleSendMessage}
isLoading={false}
value="SEND"
/>
</View>
</View>
</KeyboardAwareScrollView>
</TouchableWithoutFeedback>
);
}
Any ideas on what I need to change would be helpful.
Add styling to the touchable component and keyboardAwareScrollview component.
<TouchableWithoutFeedback
style={{ flex: 1 }}
onPress={Keyboard.dismiss}
>
<KeyboardAwareScrollView
style={{ flex: 1 }}
enableOnAndroid={true}
enableAutomaticScroll={(Platform.OS === 'ios')}
>
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>
}
/>
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.