Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is flexDirection not working when view is placed in a ScrollView for react native?

Why is flexDirection not working when view is placed in a ScrollView for react native?

enter image description here

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>
    );
}
}

enter image description here

like image 673
Ng Zhong Qin Avatar asked Mar 07 '18 10:03

Ng Zhong Qin


People also ask

Does Flex work with ScrollView?

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.

How use ScrollView horizontal in react native?

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).

What is the use of ScrollView in react native?

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.


3 Answers

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>
like image 193
jmkitavi Avatar answered Oct 21 '22 05:10

jmkitavi


Put flexDirection in contentContainerStyle, Try this way:

 <ScrollView style={{Your Style}} contentContainerStyle={{flexDirection:'row'}}>

   <View> 

  </View>

  <View> 

  </View>

</ScrollView>
like image 36
Ryan Saleh Avatar answered Oct 21 '22 04:10

Ryan Saleh


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>
    );
  }
}

enter image description here

like image 23
Ng Zhong Qin Avatar answered Oct 21 '22 05:10

Ng Zhong Qin