I am using Expo with react native and just have a plain view with some things inside of it. When I run the code as an expo app on my iPhone the view does not scroll vertically or horizontally (as I intended), but on web it does (Safari - after publishing with expo web). I want to disable this scrolling in both directions because I have swipeable components inside the view, so if the whole view moves things just don't work as intended.
How can I do that?
Here is my code:
<View style={styles.MainContainer}>
{this.state.Sample_Card_Array.map((item, key) => (
<SwipeableCard
key={key}
item={item}
removeCard={this.removeCard.bind(this, item.id)}
swipedRight={this.swipedRight.bind(this, item)}
swipedLeft={this.swipedLeft.bind(this, item.songID)}
/>
))}
{this.state.No_More_Card ? (
<View style={{flex:1}}>
<FlatList
data={this.state.songNamesApproved}
renderItem={this._renderItem}
/>
</View>
) : null}
</View>
this is maincontainer
MainContainer: {
flex: 1,
justifyContent:'center',
alignItems:'center',
paddingTop: Platform.OS === 'ios' ? 20 : 0,
},
I solved the problem by making the parent view a scrollview, now on Web it doesn't scroll left and right anymore when swiping.
Related
I am using react-native-swiper to show images, and I want to wrap the entire swiper inside a Pressable, and since there's gonna be multiple of these, they're all nested inside a FlatList, this is what it looks like in code:
<FlatList
data={locations}
renderItem={(props) => <Location {...props} />}
style={styles.flatList}
scrollEventThrottle={16}
refreshControl={refreshControl}
ListEmptyComponent={ListEmptyComponent}
contentInset={contentInset}
onScroll={onScroll}
contentContainerStyle={contentContainerStyle}
/>
the FlatList renders the Location component, which returns the following:
<Pressable
style={{
position: "relative",
width: IMAGE_SIZE,
height: IMAGE_SIZE,
}}
onPress={() => console.log(id, " ,pressed")}
>
<Swiper
style={styles.swiper}
loop={false}
renderPagination={renderPagination}
>
{media.map((image) => (
<Image
key={image.id}
source={{ uri: image.url }}
style={{
width: IMAGE_SIZE,
height: IMAGE_SIZE,
}}
/>
))}
</Swiper>
</Pressable>
When I try to swipe on the images, it just keeps firing the Pressables onPress func and doesn't want to swipe to the next image. It works as intended on Android.
When I replace the Pressable with a normal View component, everything works fine.
In the meantime, I also added an title to the component which complicated things a bit, but I managed to get it working by using 2 different Pressable components. This unfortunately removes the ability to click on the component while the image is transitioning, but it works.
I'm using the built-in KeyboardAvoidingView in react native and when I use the code below in a screen where you can't see the tabs (like in a modal) it works perfectly fine and the keyboard doesn't cover any content whatsoever, but when I use the exact same code but in a screen that is used in tab navigation the keyboard covers some content, it's like the KeyboardAvoidingView doesn't take into consideration the height of the bottom tabs
Here's my code:
<KeyboardAvoidingView style={{flex: 1}} behavior="padding">
<ScrollView keyboardShouldPersistTaps="handled">
{content}
</ScrollView>
<TextInput
style={{height: 50, width: "100%", backgroundColor: "red"}}
placeholder="Test input"
/>
</KeyboardAvoidingView>
I have a list of data that I want to place inside a FlatList (i.e. ScrollView) and whenever I try to scroll down to view more of the list, the ScrollView just bounces back up to the top of the list so I cannot ever see the bottom of the list.
I am using Expo and the strange thing is that if I just create a new project or copy/paste some code into Snack then the scrolling works just fine. It is only in my current project that I cannot get the list to scroll. I have even gone into the main.js file and just pasted my example code in there and the issue still persists.
My example code is located here: https://snack.expo.io/ryDPtO5-b
I have pasted this exact code into my project and it is not working as expected.
Versions:
RN 0.44 /
Expo SDK 17.0.0 /
React: 16.0.0-alpha.6
My actual use case for my project involves placing a FlatList component at the bottom-third of the screen to show a list of jobs. This is where I discovered the error and when I started to try and debug the issue. In my project I have a parent View with a style of {flex: 1 with a child of List that contains the FlatList... List comes from react-native-elements
EDIT
Here is the code I am actually trying to use:
<View style={styles.container}>
<View style={containerStyles.headerContainerStyle}>
<Text style={[textStyles.h2, { textAlign: "center" }]}>
Territory: {this.props.currentTerritory}
</Text>
</View>
<View style={styles.mapContainer}>
<MapView
provider="google"
onRegionChangeComplete={this.onRegionChangeComplete}
region={this.state.region}
style={{ flex: 1 }}
>
{this.renderMapMarkers()}
</MapView>
</View>
<Badge containerStyle={styles.badgeStyle}>
<Text>Orders Remaining: {this.props.jobsList.length}</Text>
</Badge>
<List containerStyle={{ flex: 1 }}>
<FlatList
data={this.props.jobsList}
keyExtractor={item => item.id}
renderItem={this.renderJobs}
removeClippedSubviews={false}
/>
</List>
</View>;
And all my styles
const styles = StyleSheet.create({
container: {
flex: 1,
},
mapContainer: {
height: 300,
},
badgeStyle: {
backgroundColor: 'green',
alignSelf: 'center',
marginTop: 15,
width: 300,
height: 35,
},
});
and lastly, my renderItem function:
renderJobs = ({ item }) => {
const { fullAddress, pickupTime } = item;
return (
<ListItem
containerStyle={
item.status === "active" && { backgroundColor: "#7fbf7f" }
}
title={fullAddress}
titleStyle={{ fontSize: 14 }}
subtitle={pickupTime}
subtitleStyle={{ fontSize: 12, color: "black" }}
onPress={() =>
this.props.navigation.navigate("jobActions", { job: item })
}
/>
);
};
I was able to solve this problem.
The Solution is to use flatlist component <View style={{flex:1}}> after renderRow return component <View style={{flex:1}}>
I am confused - are you using a FlatList or a ScrollView - these two elements have completely different lifecycle events (a FlatList requires you to define how individual rows will render and their keys, whereas a ScrollView expects the children to be rendered inline with the component).
Regardless, I think the issue is in your structure, it sounds like the List element requires a height attribute as well ({flex: 1}) as the absolute parent is filling it's space, but the List component is not having a pre-defined height.
So after debugging this a bit more today and I ended up just creating a brand new Expo project and copy/pasting all my source code into the new project, changing my Github project name to the new name, and setting the remote origin to my github repo (the one where I changed the name) on my new local project.
For some reason there appeared to be a problem with the Expo project. It almost seemed like the actual NAME of the project was causing issues as I attempted to change the NEW project's name to that of the original project, but it didn't work. It only worked when doing a brand new project, but using the exact same source code.
New to react native, trying to place text-box above scrollable tab view
export default React.createClass({
render() {
return
<View>
<TextInput
style={{height: 50}}
placeholder="Enter!"
onChangeText={(searchText) => this.setState({searchText})}/>
<ScrollableTabView
style={{marginTop: 10, }}
initialPage={1}
renderTabBar={() => <FacebookTabBar />}
>
<ScrollView tabLabel="ios-search" style={styles.tabView}>
<View style={styles.card}>
<TextInput
style={{height: 50}}
placeholder="Enter!"
onChangeText={(searchText) => this.setState({searchText})}/>
</View>
</ScrollView>
</ScrollableTabView>
</View>
;
},
});
Scrollable tab view doesn't show up with above code, I am unable to understand why, please advice. I am trying to make something like Linkedin app.
<ScrollableTabView> is styled with flex: 1, so you need to explicitly set flex: 1 to its parent like this in order to show it:
return (
<View style={{flex: 1}}>
...
</View>
);
Here is a quote from React Native documentation regarding Flex:
A component can only expand to fill available space if its parent has
dimensions greater than 0. If a parent does not have either a fixed
width and height or flex, the parent will have dimensions of 0 and the
flex children will not be visible.
Here I am trying a simple code but the scroll view is not working if kept inside another view. Code is like this:
return(
<View>
<Toolbar title={this.props.title}>
</Toolbar>
<ScrollView>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
</View>
);
But if scroll view kept as parent view it works perfectly. Code is as below:
return(
<ScrollView>
<Toolbar title={this.props.title}>
</Toolbar>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
);
Now the problem is I don't want my toolbar to scroll up and down, I just want the contents below the toolbar to move. How can I achieve that?
And next question: Is scroll view has to be parent view to be returned to work?
Use the property flexGrow in the style, flex didnt worked for me.
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
...
</ScrollView>
you should wrap toolbar in view like this:
<View><Toolbar/></View>
Wrap those component which you want to scroll inside scrollview as:
<ScrollView>your expected components...</ScrollView>
And provide flex to root view as:
<View style={{flex:1}}>
Finally your code will run as you expected.
Top <View> must has style flex:1, and also <ScrollView> has too
This was driving me crazy because I added <view> and <ScrollView> like everyone suggested but nothing worked. Then I closed the terminal then rebuild the application again using:
npx react-native run-android
Then, it started working. I hope this saves someone's sanity :)
FYI, just hitting r (or refreshing) was not working either. I had to rebuild it.
For me, Scroll View wrapped with TouchableWithoutFeedback was causing scroll view to not function at times.
I set height property for style . then it's work for me .
My code :
<View style={styles.listWrapper}>
<ScrollView >
<XYZ/>
</ScrollView>
</View>
Styles :
listWrapper:{
// flex:1,
// flexGrow:1,
width:'80%',
height:300,
},
Dont use contentContainerStyle on Scroll View Just use simple style prop for styling of scroll View . You will not face any problem.
None of these solution worked for me, after very long I found that height of a View inside the code is causing the problem so instead of
height:'50%'
I change it to
height:300
and it worked, as show below:
<ScrollView>
...
<View
style={{
flexDirection: 'row',
height: 100,
justifyContent: 'space-evenly',
height:300,
backgroundColor: '#fff',
padding: 20,
margin: 5,
}}>
...
</ScrollView>
If you are using <Form> from native base and you want to scroll
then use KeyboardAwareScrollView
<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.
</KeyboardAwareScrollView>
this will work on Android
I have solved in this way:
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;
<View
style={{
overflow: "hidden",
flex: 1,
borderTopStartRadius: 40,
borderTopEndRadius: 40,
flexGrow: windowHeight,
}}
>
<ScrollView
contentContainerStyle={{
flexGrow: windowHeight,
backgroundColor: Colors.primary_color,
padding: 10,
}}
>
</View>
...
</ScrollView>
Update 2020-02: It will work with React.Fragment <> and </> or <React.Fragment> and </React.Fragment>. So Try this.
return(
<>
<Toolbar title={this.props.title}>
</Toolbar>
<ScrollView>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
</>
);
Use react fragments instead of a View to wrap your scroll view it worked for me
<>
<ScrollView>
..........
</ScrollView>
</>
if you are using position: "absolute", delete it and try.
You can try
<SafeAreaView>
<ScrollView>
</ScrollView>
</SafeAreaView>