Skip to content

problem on SpatialNavigationVirtualizedlist #222

@vishu002

Description

@vishu002

Problem is when i use multiple or single SpatialNavigationVirtualizedlist then this element height size consume full screen

Screenhot

Image

Code :
{/* Main Content */}
<SpatialNavigationRoot
isActive={!isMenuOpen}

    onDirectionHandledWithoutMovement={(dir) => {
      if (dir === 'left') setIsMenuOpen(true);
    }}
  >
    <SpatialNavigationNode direction='vertical'>

  {/* --- FIRST ROW --- */}
  <SpatialNavigationView
   >
    <SpatialNavigationVirtualizedList
      data={[1, 2, 3, 4, 5, 6]}
      orientation="horizontal"
      itemSize={420}
      
      style={{
       
        backgroundColor: 'green',
      }}
      renderItem={(item, index) => (
        <SpatialNavigationFocusableView
          style={{
            marginHorizontal: 10,
            backgroundColor: 'red',
            borderRadius: 10,
          }}>
            {({isFocused})=>(

          <SpatialNavigationView
            style={{
              borderWidth:isFocused? 1:0,
              borderColor: 'white',
              height: 200,
              width: 400,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Image
              source={{
                uri: 'https://img.uxcel.com/cdn-cgi/image/format=auto/tags/thumbnail-1706285994493-2x.jpg',
              }}
              style={{ height: 100, width: 100 }}
            />
          </SpatialNavigationView>
            )}
        </SpatialNavigationFocusableView>
      )}
    />
  </SpatialNavigationView>
  <SpatialNavigationView
    >
    <SpatialNavigationVirtualizedList
      data={[1, 2, 3, 4, 5, 6]}
      orientation="horizontal"
      itemSize={420}
      
      style={{
       
        backgroundColor: 'white',
      }}
      renderItem={(item, index) => (
        <SpatialNavigationFocusableView
          style={{
            marginHorizontal: 10,
            backgroundColor: 'gray',
            borderRadius: 10,
          }}>
            {({isFocused})=>(

          <SpatialNavigationView
            style={{
              borderWidth:isFocused? 1:0,
              borderColor: 'white',
              height: 200,
              width: 400,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Image
              source={{
                uri: 'https://img.uxcel.com/cdn-cgi/image/format=auto/tags/thumbnail-1706285994493-2x.jpg',
              }}
              style={{ height: 100, width: 100 }}
            />
          </SpatialNavigationView>
            )}
        </SpatialNavigationFocusableView>
      )}
    />
  </SpatialNavigationView>

    </SpatialNavigationNode>



  </SpatialNavigationRoot>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions