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>
Related
Is it possible to make StatusBar semi-transparent with an opacity of 0.8?
if I pass backgroundColor={"transparent"} like in the docs it becomes fully transparent without color. Docs https://reactnative.dev/docs/statusbar
<StatusBar style="light" backgroundColor={"red"} translucent />
You can give backgroundColor as #FF000080, and you can change color transparency by changing the last 2 digits of #FF000080
<StatusBar style="light" backgroundColor={"#FF000080"} translucent />
This is how i did it. Under StatusBar added a View with height: insets.top and style for StatusBar. This works for both OS platforms.
return (
<View>
<StatusBar style="light" translucent />
<View style={[styles.statusBar, { height: insets.top }]}></View>
<View
style={[
styles.contentContainer,
{
paddingLeft: insets.left,
paddingRight: insets.right,
},
]} >
</View>
</View>
);
}
const styles = StyleSheet.create({
statusBar: {
opacity: 0.8,
backgroundColor: "red",
},
});
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.
Should get a gradient bluer like the design, but I can't do it, any ideas?
what it should look like
This is how my code look
<ImageBackground
source={{uri: uri}}
style={styles.imageBackground}
imageStyle={styles.imageStyleBackground}
>
<BlurView
style={{width: width * 0.78}}
>
<Text style={styles.date}>{date}</Text>
<Text style={styles.title}>{title}</Text>
</BlurView>
</ImageBackground>
I try to use BlurView component, but it doesn't work the way it's supposed to .
Try with position: 'absolute'
<>
<Image
source={{uri: uri}}
style={styles.imageStyleBackground}
/>
<BlurView style={{width: width * 0.78, position: 'absolute'}}>
<Text style={styles.date}>{date}</Text>
<Text style={styles.title}>{title}</Text>
</BlurView>
</>
You could add an element on top of the image with backdrop-filter:blur(5px) that is masked with a gradient (eg. mask linear-gradient(black, black, transparent))
See https://codepen.io/QuiteQuinn/pen/jOBxGjr.
I am new to React Native so this might be a silly question.
What I am trying to get is something like this :
Where I have a parent view with 2 children, Image and Text, aligned vertically to the left. What I want is the parent view to cover only the width of its children. But instead what I get is this :
The parent view stretches to the complete width of the mobile screen.
Here is my code :
render () (<View style={{backgroundColor: '#333333'}}>
<Image source={btnImageSource} />
<Text>Some label</Text>
</View>);
Something similar to Android's 'wrap-content' width value.
You will be able to do this using flex. I found this guide to be very helpful when working with flex.
A good starting point would be to create a parent View that is flexDirection: row, justifyContent: flex-start
render () (
<View style={{justifyContent: 'flex-start', flexDirection: 'row'}}>
<View style={{backgroundColor: '#333333'}}>
<Image source={btnImageSource} />
<Text>Some label</Text>
</View>
</View>
);
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.