Menu
Why is flexDirection not working when view is placed in a ScrollView for react native?
When my view is not placed in a scrollview, the parameter flexDirection: 'row' works fine.
export default class ProfileScreen extends Component {
render() {
return (
<View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
<View style={{flex:0.2, backgroundColor: 'red'}} />
<View style={{flex:0.8, backgroundColor: 'skyblue'}} />
<View style={{flex:0.2, backgroundColor: 'steelblue'}} />
</View>
);
}
When it's placed in a scroll view, the parameter flexDirection no longer works.
export default class ProfileScreen extends Component {
render() {
return (
<ScrollView stickyHeaderIndices={[0]} >
<View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
<View style={{flex:0.2, backgroundColor: 'red'}} />
<View style={{flex:0.8, backgroundColor: 'skyblue'}} />
<View style={{flex:0.2, backgroundColor: 'steelblue'}} />
</View>
<View style={{flex: 1, flexDirection: 'row', height: 10}} />
<View style={{flex: 1, flexDirection: 'row', height: 200, backgroundColor: 'skyblue'}} />
<View style={{flex: 1, flexDirection: 'row', height: 10}} />
</ScrollView>
);
}
}
673
So when you apply flex: 1 to contentContainer it takes full height of ScrollView whose height is also flex: 1 as its parent View . Show activity on this post. The best thing to do is to wrap your ScrollView in a View and control that view with flex, your scroll view will follow.
In the ScrollView, we can scroll the components in both direction vertically and horizontally. By default, the ScrollView container scrolls its components and views in vertical. To scroll its components in horizontal, it uses the props horizontal: true (default, horizontal: false).
Using ScrollView ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPager component. On iOS a ScrollView with a single item can be used to allow the user to zoom content.
I came across this issue.
Think what happens is, the stickyHeaderIndices overwrites some of the styles in the affected View.
Simply wrapping the View you want to stick with another will solve the problem i.e
...
<ScrollView stickyHeaderIndices={[0]} >
<View>
<View style={{flex: 0.1, flexDirection: 'row', ... }}>
<View style={{flex:0.2, backgroundColor: 'red'}} />
<View style={{flex:0.8, backgroundColor: 'skyblue'}} />
<View style={{flex:0.2, backgroundColor: 'steelblue'}} />
</View>
</View>
...
</ScrollView>Put flexDirection in contentContainerStyle, Try this way:
<ScrollView style={{Your Style}} contentContainerStyle={{flexDirection:'row'}}>
<View>
</View>
<View>
</View>
</ScrollView>
This code works:
export default class ProfileScreen extends Component {
render() {
return (
<ScrollView stickyHeaderIndices={[0]} style={{flex:1}}>
<View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
<View style={{flex:0.2, backgroundColor: 'red'}} />
<View style={{flex:0.8, backgroundColor: 'skyblue'}} />
<View style={{flex:0.2, backgroundColor: 'steelblue'}} />
</View>
</View>
<View style={{flex: 1, flexDirection: 'row', height: 10}} />
<View style={{flex: 1, flexDirection: 'row', height: 200, backgroundColor: 'skyblue'}} />
<View style={{flex: 1, flexDirection: 'row', height: 10}} />
</ScrollView>
);
}
}
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With