Why components gets shrinked when not wrapped in ScrollView in ReactNative?

Question

I am creating a project following Stephen Grider tutorial but i really got stuck when my view shrinked when i didn't wrap with ScrollView.

Here is the code in github: https://github.com/jasonkoirala/Swipe

When I wrap my following code:

  render() {
  return (
  <ScrollView>
  <View>
      <Deck
        data={DATA}
        renderCard={this.renderCard.bind(this)}
      />
     </View>
  </ScrollView>
   );
 }
}

Here is the output I get when I wrap with ScrollView:

And, here is the output I get when I don't wrap with ScrollView:

I dont want to use ScrollView to wrap my content, instead I want with View , and I tried giving following style to the view but it didn't work.

`flex: 1,
backgroundColor: '#fffdff',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0`

I have just started learning ReactNative can anyone help me with this and explain why it behaves this way. Thank You. PS: Please use react-native run-android or react-native run-ios in project folder whose download link is mentioned above.

Answer 1

I tried on your source code and found a solution.

I have removed flex:1 from image style (in App.js ) and from buttonStyle and it worked as expected.

Hope this will help.