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>
Related
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.
I want parent Screen to be fixed and Child Screen to be scrollable. using scroll doesn't provide me that functionality so what should I do ?
The ScrollView component does exactly what you want. The order of your components is the only important factor here.
In general, everything that is nested inside a ScrollView is scrollable, and everything outside is not. Hence,
<View>
<View>
// not scrollable
</View>
<ScrollView>
// scrollable
</ScrollView>
<View>
// not scrollable
</View>
</View>
Here is an example of a scrollable container using ScrollView that is nested inside a parent View which is fixed, meaning not scrollable.
<SafeAreaView style={{ margin: 5 }}>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Not scrollable</Text>
</View>
)
})}
</View>
<ScrollView>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Scrollable</Text>
</View>
)
})}
</ScrollView>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Also not scrollable</Text>
</View>
)
})}
</View>
</SafeAreaView>
which yields five text components at that top which are not scrollable, followed by five text components that are scrollable, followed by five text components that aren't scrollable.
Good day,
I'm working on a small react native project, I'm getting data from an API, but I noticed that every time I populate the state with data from the API, the mobile app becomes slow, and when I press the Touchable Opacity inside a child element of that Flatlist it takes around 5 seconds to respond.
//Don't worry it's all wrapped in a parent container
<View style={globalStyles.searchContainer}>
<TextInput style={globalStyles.textInput} placeholder="Who are you looking for? (e.g. Plumber)" onChangeText={setJob}/>
<TouchableOpacity style={globalStyles.searchButton} onPress={handleSearch}>
<Text style={globalStyles.text}>Search</Text></TouchableOpacity>
</View>
<FlatList
data={workers}
keyboardShouldPersistTaps="handled"
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<View style={globalStyles.workerCard}>
<Image
style={globalStyles.thumbnail}
source={{uri: globalConfig.api_url + item.profile_picture}}
/>
<View style={globalStyles.workerDetails}>
<Text style={globalStyles.textDetails}>Name: {`${item.first_name} ${item.surname}`}</Text>
<Text style={globalStyles.textDetails}>Gender: {item.gender}</Text>
<Text style={globalStyles.textDetails}>Job: {item.job}</Text>
<Text style={globalStyles.textDetails}>Price: {`R${item.price}`}</Text>
<Text style={globalStyles.textDetails}>Transport fee: {`R${item.transport}`}</Text>
<Text style={globalStyles.textDetails}>Other Job: {(item.service1) ? item.service1 : ""} </Text>
<Text style={globalStyles.textDetails}>Other Job: {(item.service2) ? item.service2 : ""} </Text>
<Text style={globalStyles.textDetails}>Online: {(item.available) ? "Yes" : "No"} </Text>
<TouchableOpacity style={globalStyles.searchButton} onPress={() => bookWorker(item)}>
<Text style={globalStyles.text}>Book</Text>
</TouchableOpacity>
</View>
</View>
)}
/>
Add an "extraData" property to your flatList. This will tell your flatList to re-render on data changes. (https://reactnative.dev/docs/flatlist#extradata)
<FlatList
data={workers}
keyboardShouldPersistTaps="handled"
keyExtractor={(item, index) => index.toString()}
extraData = {this.state.refreshing}
renderItem={({ item }) => ...
Here "this.state.refreshing" could be a boolean or an incremented integer that is updated each time you call the api.
Alternatively, and most recommended, you could add a onRefresh property and move your api calls there. (https://reactnative.dev/docs/flatlist#onrefresh). This would handle all the flatList changes for you once you update your "workers" array.
I figured it out, there was a function that was being called somewhere in the component, I removed it and now it's working just fine.
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>
I have this code:
<View style={{flex:1}}>
<ScrollView>
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>
</ScrollView>
</View>
The problem is, my FlatList's data appears but my child component MoviesChild disappears. Maybe Flatlist overlaps the child component. Could someone figure out where I'm doing a mistake please?
You should give style to ScrollView with flexGrow:1
I suggest you not to use FlatList inside a ScrollView, 'cause FlatList scroll itself. So, in order to achieve your objective, wrap your first View in a function and pass it to the ListHeaderComponent property of your FlatList, like this:
<View style={{flex:1}}>
<View style={{flex:0.75}}>
<FlatList
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
ListHeaderContainer={this.renderHeader}
/>
</View>
</View>
where
private renderHeader = () => {
return(
<View style={{flex:0.25,elevation:2,marginVertical:5}}>
<MoviesChild/>
</View>
)
}
I hope this can fix your issue!
You can find what I'm talking about on the official doc
Try this,
<View style={{flex:1}}>
<View style={{ flex:0.25,elevation:2,marginVertical:5 }}>
<MoviesChild/>
</View>
<FlatList
style={{flex:0.75}}
data={ListOfMovies}
renderItem={this.renderData.bind(this)}
keyExtractor={(x, i) => x.id}
extraData={this.state}
/>
</View>