We Keep Coding

How to disable the scrollEnabled of flatlist for the the initial height if snappoint of bottom sheet

I am using BottomSheet inside which I used FlatList by React-native which is showing the list of data, I am having snapPoints of ["60%", "100%"]for which I want flatlist should not be scrollable in the 60% and when get extended 100% it should be scrollable.
<BottomSheet
ref={bottomSheetRef}
visible={bottomSheetVisible}
onChangeCallback={onChangeCallback}
enablePanDownToClose={false}
header={header}
bottomInset={scaleHeight(BOTTOM_BAR_HEIGHT)}}
indicatorStyle={styles.indicatorStyle}
contentContainerStyle={styles.contentContainerStyle}
renderBackdrop={renderBackdrop}>
<View style={styles.container}>
<FlatList data={data} renderItem={renderItem} />
</View>
</BottomSheet>

Using Scroll View in React Native

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.

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>

Scroll area too small with SectionList React Native

I am currently trying to use a <SectionList> inside a classic <View>, all my datas are formatted, the list displays correctly and my item's actions are working.
The issue is that when I am on the top of my SectionList, the area available to trigger the scroll is actually really small ( roughly 100 pixels from the top of the list ). However, once i scroll down a bit from that area, the whole list becomes scrollable and works as intended until I scroll back to the top.
My parent View has flex: 1 as well as my SectionList
Environment
Working environment : MacOS Sierra 10.13.3
Expo version : 23.0
React Native version : 0.50
React : 16.0
Using an IPhone 8 simulation
There's no issue on Android
Steps to Reproduce
Classic creation of a SectionList inside of a View
Expected Behavior
The scroll must be triggered from everywhere in the SectionList
Actual Behavior
When the SectionList is at the top, the scroll only triggers inside a small area ( around 100px from the top of the list )
The code of my SectionList :
<View style={{ flex: 1 }}>
<SectionList
style={styles.openSectionList} // flex: 1
scrollEnabled
stickySectionHeadersEnabled
sections={this.sections}
keyExtractor={item => item["#id"]}
removeClippedSubviews
renderSectionHeader={({ section }) => (
<TouchableHighlight
onPress={() => this.onSectionHeaderPressRef(section.index)}
activeOpacity={0.65}
underlayColor="rgba(0, 0, 0, 0.2)"
style={styles.sectionHeader}
>
<View style={styles.categoryContentContainer}>
<View style={styles.firstPartContent}>
<Text style={styles.categoryHeaderText}>
{section.title === "Autres"
? "Mes produits"
: section.title}{" "}
</Text>
{section.nbItems - section.nbItemsSelected === 0 ? (
<CheckBox
label=""
checked
checkboxStyle={styles.checkbox}
checkboxContainer={styles.checkboxContainer}
/>
) : (
<Text
style={[
styles.categoryHeaderText,
{ color: Colors.contrastColor },
]}
>
({section.nbItems - section.nbItemsSelected})
</Text>
)}
</View>
<Image
source={require("../../../assets/common/chevron.png")}
style={
section.index === this.state.currentCategoryOpen
? styles.categoryChevronOpen
: styles.categoryChevronClosed
}
/>
</View>
</TouchableHighlight>
)}
renderItem={({ item }) =>
this.state.currentCategoryOpen === item.categoryIndex ? (
<ShoppingListProduct
key={item["#id"]}
ingredient={item}
updateIngredient={this.updateIngredientListRef}
onLongPress={this.itemLongPressedRef}
/>
) : null}
/>
</View>
A GIF of the actual behavior ( I'm trying to scroll everytime the cursor is moving ) where we can see that the scroll only triggers when I am above a certain height.
GIF
Any help would be appreciated as I don't know if that's a bug and/or me implementing the component wrong.
Thank you by advance.

someone asked me the solution for this via email so I might as well add it here, from what i remember it was a position/imbrication problem with the components.
I can't remember exactly but I ended up with this code ( my page content changes so that's why it is set as a variable )
// render method
component = ( <SectionList
style={styles.openSectionList} // flex: 1, height: "100%"
scrollEnabled
stickySectionHeadersEnabled
sections={this.sections}
bounces={false}
keyExtractor={item =>
item["#id"] === undefined ? item.userIngredient : item["#id"]
}
getItemLayout={this.getItemLayout}
renderSectionHeader={this.renderSectionListHeaderRef}
renderItem={this.renderSectionListItemRef}
/> )
return (
<View style={{ flex: 1 }}>
{component}
</View>
)
So yeah watch out where your SectionList is defined and how many parents it has, I think it required only one
Hope this helps.

I was able to fix mine by adding this prop to the section list
stickySectionHeadersEnabled={false}

I added a marginBottom to the SectionList of equal amount of space consumed by the View on top to equalise the area.

react-native chat app "split" chat bubble

I`m working on a chat app and I use gifted chat .
I want my bubble to contain both text and an image. That works fine but I'm not satisfied with the way it is split...
I want to have text on the left and the image on the right side.
Currently, my text is above the image:
This is the code for the content of the bubble:
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View>
<Text style = {styles.titleText}> {title}</Text>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</TouchableOpacity>
Any ideas on how I can achieve text on the left and the image on the right?

You need flexDirection on View: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction
The default value is column so children are stacked vertically.

You need to use flex in View https://facebook.github.io/react-native/docs/flexbox.html You can also give desired alignment to text and image. By default direction is column so use flexDirection:'row'
Use the code below.
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View style={{flex:1,flexDirection:'row'}}>
<View style={{flex:0.5}}>
<Text style = {styles.titleText}> {title}</Text>
</View>
<View style={{flex:0.5}}>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</View>
</TouchableOpacity>