We Keep Coding

How to keep button at the bottom of flatlist while scrolling to the end in React Native?

const Screen = () => {
return (
<View style={styles.container}>
<Text style={styles.heading}>Screen Data</Text>
<View>
<FlatList
data={data}
renderItem={({item}) => (
<View>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
</View>
)}
ListFooterComponent={() => <Buttons text={''} onPress={undefined} />}
/>
</View>
</View>
);
};
export default Screen;
I have created a Button component which always come at the end of flatlist which is scrollable but it gets overlap I want it to keep at end of content.

List footer component is made for that it can be any component, check docs https://reactnative.dev/docs/flatlist#listfootercomponent.

How can i auto focus on an item in ScrollView

i have an array of posts , and when i click on one of them i want it to take me to a screen containing all the posts but i want it to auto focus on the one that i clicked on before , then after that i can scroll like i want ! is that possible on ScrollView or maybe Flatlist ?
<ScrollView contentContainerStyle={{}}>
{posts?.map((post, index) => (
<View key={index} style={{ flex: 1 }}>
<Post item={{ ...post, user: item.user }} navigation={navigation} />
</View>
))}
</ScrollView>

react native : swiper, have an issue while display first time

In my code I did swiper with the "react-native-swiper" directory.
There is a problem that when the swiper screen is displayed then the last page jumps to the first page and stop there. (for example if I have 4 points in the swiper view then the leftmost point jumps to the rightmost)
I would love direction in solving my problem.
<Swiper
scrollsToTop={true}
showsVerticalScrollIndicator={true}
bounces={true}
dotStyle={styles.NonActiveDot}
activeDotStyle={styles.activeDot}
>
{Object.keys(groupFacilities).map((key) => (
<SafeAreaView key={key} style={styles.safeArea}>
<View key={key}>
<View style={styles.secondaryTitleView}>
<Text style={styles.secondaryTitleText}>{`${selectedEpicenter[0]?.EpicenterName} - ${key}`}</Text>
</View>
<FlatList
data={groupFacilities[key]}
renderItem={renderItem}
keyExtractor={item => item.ID}
/>
</View>
</SafeAreaView>
))}
</Swiper>

How to scrollable tabbar in ScrollableTabView React Native

I built react native application and use https://github.com/ptomasroos/react-native-scrollable-tab-view to make tab bar menu by products categories, I have problems when categories more than 5 or the width is more than screen width, the layout is broken. How to make it scrollable ? Layout App here
My code to produce tab like this
<ScrollableTabView
initialPage={0}
renderTabBar={() => (
<CustomTabBar
backgroundColor="#EAEBF3"
style={{
width:categories.length*200, // it;s make width depends amount of categories
}}
/>
)}>
{categories.map((cat,index) =>
<View key={'v'+index} tabLabel={cat.PRODUCT_CATEGORY} style={{paddingTop: 1}}>
<ProductList key={'v'+index} dataFilterSet={dataFilterSet[index].PRODUCTS} />
</View>
)}
</ScrollableTabView>

You can try this code
<ScrollView>
<ScrollView horizontal={true}>
// list items
</ScrollView>
</ScrollView>

Display header containing 3 columns in ListView

I am completely new to react native and am creating an application where I need to display items in a ListView.My ListView consists of 3 columns namely, author, title, price i.e. each row in ListView displays these three columns.Currently I am able to display only one column both in header section and the content section as
_renderRow(rowData){
return (
<View>
<Text style={styles.row}> {rowData.title}</Text>
</View>
)
},
_renderHeader(){
return (
<View style={styles.sectionDivider}>
<Text style={styles.headingText}>
Title
</Text>
</View>
)
},
And my render function is as
render() {
return(
<View style={styles.container}>
<ActivityIndicatorIOS
animating={this.state.isLoading}
size="large">
</ActivityIndicatorIOS>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
/>
</View>
)
}
So, I want to render 3 columns both in header as well as in content section.I googled it but could not find any relevant content.

Easily creating columns can be done with the flexbox style properties. For example:
_renderRow(rowData){
return(
<View styles={styles.flexRow}>
<Text>{rowData.title}</Text>
<Text>{rowData.author}</Text>
<Text>{rowData.price}</Text>
</View>
)
_renderHeader() {
return(
<View styles={styles.flexRow}>
<Text>Title</Text>
<Text>Author</Text>
<Text>Price</Text>
</View>
)
}
var styles = StyleSheet.create({
flexRow: {
flex: 1,
flexDirection: 'row' <---- This is the important style property
},
})
I created a snippet at https://rnplay.org/apps/p5hzcg if you want to play around with a working example.

you should try to modify your code with something like
_renderRow(rowData){
return (
<View>
<Text style={styles.column1}> {rowData.text1}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}> {rowData.text2}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}> {rowData.text3}</Text>
</View>
)
},
_renderHeader(){
return (
<View>
<Text style={styles.column1}>textColumm1</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}>textColumm2</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}>textColumm2</Text>
</View>
)
},
in this way each line will have 3 elements with same style, and if you fix the width of them it'll be exactly like columns.
Embedding text could alter the width value, so you have to decide what to do if the text is too long. So mostly deciding if to resize the text or going multiline.