ScrollView not working as expected in provided Screen component

[Gondolav]

What's going on?

The ScrollView is not working as expected in the provided Screen component, when running the app with Expo on an iPhone 11 (iOS 14.5). I cannot scroll, I only have the bounce animation. This happens when using the "scroll" preset.

Steps to reproduce

1. Define a function component with Screen that wraps a UI-Kitten TopNavigation, Divider and Layout with multiple children.
2. Try to scroll

---

ignite doctor results:

System
  platform           darwin                                                     
  arch               x64                                                        
  cpu                4 cores           Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz 
  directory          biot-mobile-app   /Users/avenezia/biot-mobile-app          

JavaScript (and globally-installed packages)
  node               12.18.4      /usr/local/bin/node 
  npm                7.7.6        /usr/local/bin/npm  
    exp              57.2.1                           
    expo-cli         4.4.3                            
    expo-codemod     1.0.12                           
    firebase-tools   7.14.0                           
    ignite-cli       6.6.0                            
    n                6.3.1                            
    npm              7.7.6                            
    serve            11.3.2                           
  yarn               -            not installed       

Ignite
  ignite-cli         6.6.0        /usr/local/bin/ignite                        
  ignite src         build        /usr/local/lib/node_modules/ignite-cli/build 

Android
  java               11.0.6       /usr/bin/java                       
  android home       -            /Users/avenezia/Library/Android/sdk 
/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/build/index.js:13
    throw up;
    ^

Error: Command failed: xcodebuild -version
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

    at ChildProcess.exithandler (child_process.js:303:12)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:443:11)
    at Socket.emit (events.js:315:20)
    at Pipe.<anonymous> (net.js:674:12) {
  killed: false,
  code: 1,
  signal: null,
  cmd: 'xcodebuild -version',
  stdout: '',
  stderr: "xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance\n"
}

[Gondolav]

It worked by commenting out the line contentContainerStyle={[preset.inner, style]} in screen.tsx, any ideas why?

[dantereve]

Hi! Had a similar issue.

This is a styling issue with the FULL container flex: 1 conflicting with the ScrollView.

To enable scroll on a screen, you have to remove the FULL styling on your Screen component.

Just do something like this:

<Screen preset="scroll" style={CONTAINER}>

[jamonholmgren]

Can someone give me code that I can just drop into an Ignite app's screen and observe this behavior? That would be super helpful.

[harrisrobin]

What's going on?

The ScrollView is not working as expected in the provided Screen component, when running the app with Expo on an iPhone 11 (iOS 14.5). I cannot scroll, I only have the bounce animation. This happens when using the "scroll" preset.

Steps to reproduce

1. Define a function component with Screen that wraps a UI-Kitten TopNavigation, Divider and Layout with multiple children.
2. Try to scroll

ignite doctor results:

System
  platform           darwin                                                     
  arch               x64                                                        
  cpu                4 cores           Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz 
  directory          biot-mobile-app   /Users/avenezia/biot-mobile-app          

JavaScript (and globally-installed packages)
  node               12.18.4      /usr/local/bin/node 
  npm                7.7.6        /usr/local/bin/npm  
    exp              57.2.1                           
    expo-cli         4.4.3                            
    expo-codemod     1.0.12                           
    firebase-tools   7.14.0                           
    ignite-cli       6.6.0                            
    n                6.3.1                            
    npm              7.7.6                            
    serve            11.3.2                           
  yarn               -            not installed       

Ignite
  ignite-cli         6.6.0        /usr/local/bin/ignite                        
  ignite src         build        /usr/local/lib/node_modules/ignite-cli/build 

Android
  java               11.0.6       /usr/bin/java                       
  android home       -            /Users/avenezia/Library/Android/sdk 
/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/build/index.js:13
    throw up;
    ^

Error: Command failed: xcodebuild -version
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

    at ChildProcess.exithandler (child_process.js:303:12)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:443:11)
    at Socket.emit (events.js:315:20)
    at Pipe.<anonymous> (net.js:674:12) {
  killed: false,
  code: 1,
  signal: null,
  cmd: 'xcodebuild -version',
  stdout: '',
  stderr: "xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance\n"
}

Could you setup a repo where I can reproduce this? Btw, it's typically not advised to nest ScrollViews, so if you are using <Screen preset="scroll"/>, you may want to avoid nesting a ScrollView in there if you can.

[faggionluca]

had the same issue and tried to remove all the styles to the screen component but it was still not working, to fix it i had to comment out the flex:1 propriety of the preset.scroll.inner styles So now the preset look like this:

....
  scroll: {
    outer: {
      backgroundColor: 'transparent',
      flex: 1,
      height: "100%",
      width: "100%",
    } as ViewStyle,
    inner: {
      justifyContent: "flex-start",
      alignItems: "stretch",
      // flex: 1, // Removing this fixes the scrollview
    } as ViewStyle,
....

[yulolimum]

Fixed! will be released in Ignite v8: Maverick