DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Flex-shrink, has a bug, when canvas is small than all items, Item gets default, not small size. #931

New Issue
Open
opened 2019-10-03 05:18:26 -07:00 by wesleyolis · 0 comments
wesleyolis commented 2019-10-03 05:18:26 -07:00 (Migrated from github.com)
Copy Link

Report

Issues and Steps to Reproduce

Run the following example url, with 400, 425, 450 and you will see at 425,450 perfect.
however, at 400 outer canvas size, jumps to rendering as if the canvas size was set to 450, should still be the most compact 425 form.

http://tinyurl.com/y52sszqq

Possible also related to the following issues and maybe simpler to reproduce.

https://github.com/facebook/yoga/issues/674

Yoga logo
Documentation
Playground
GitHub
http://tinyurl.com/y52sszqq
FlexAlignmentLayout
WIDTH × HEIGHT
500
400
MAX-WIDTH × MAX-HEIGHT
none
none
MIN-WIDTH × MIN-HEIGHT
0
0
ASPECT RATIO
auto
0
0
PADDING
0
0
0
0
BORDER
0
0
0
0
MARGIN
0
0
POSITION TYPE

relative

absolute
POSITION

React Native
copy to clipboard
import React, {Component} from 'react';
import {View} from 'react-native';

export default class MyLayout extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        width: 500,
        height: 400,
      }}>
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          minHeight: 25,
          maxHeight: 300,
          justifyContent: 'center',
          flexBasis: 150,
          flexGrow: '0.33',
          flexShrink: '0.25',
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 50,
            minHeight: 25,
            maxHeight: 150,
            alignItems: 'center',
            flexBasis: 75,
            flexGrow: '0.3',
            flexShrink: '0.5',
          }} />
        </View>
        <View style={{
          flex: 1,
          width: 100,
          height: 200,
          maxWidth: 200,
          maxHeight: 200,
          flexGrow: 1,
          flexShrink: 0,
        }} />
        <View style={{
          flex: 1,
          width: 100,
          minHeight: 200,
          justifyContent: 'space-evenly',
          alignSelf: 'stretch',
          flexBasis: 200,
          flexGrow: 0,
          flexShrink: 0,
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
        </View>
      </View>
    );
  }
};
import React, {Component} from 'react';
import {View} from 'react-native';

export default class MyLayout extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        width: 500,
        height: 400,
      }}>
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          minHeight: 25,
          maxHeight: 300,
          justifyContent: 'center',
          flexBasis: 150,
          flexGrow: '0.33',
          flexShrink: '0.25',
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 50,
            minHeight: 25,
            maxHeight: 150,
            alignItems: 'center',
            flexBasis: 75,
            flexGrow: '0.3',
            flexShrink: '0.5',
          }} />
        </View>
        <View style={{
          flex: 1,
          width: 100,
          height: 200,
          maxWidth: 200,
          maxHeight: 200,
          flexGrow: 1,
          flexShrink: 0,
        }} />
        <View style={{
          flex: 1,
          width: 100,
          minHeight: 200,
          justifyContent: 'space-evenly',
          alignSelf: 'stretch',
          flexBasis: 200,
          flexGrow: 0,
          flexShrink: 0,
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
        </View>
      </View>
    );
  }
};
# Report - [ X] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate # Issues and Steps to Reproduce Run the following example url, with 400, 425, 450 and you will see at 425,450 perfect. however, at 400 outer canvas size, jumps to rendering as if the canvas size was set to 450, should still be the most compact 425 form. http://tinyurl.com/y52sszqq Possible also related to the following issues and maybe simpler to reproduce. https://github.com/facebook/yoga/issues/674 ``` Yoga logo Documentation Playground GitHub http://tinyurl.com/y52sszqq FlexAlignmentLayout WIDTH × HEIGHT 500 400 MAX-WIDTH × MAX-HEIGHT none none MIN-WIDTH × MIN-HEIGHT 0 0 ASPECT RATIO auto 0 0 PADDING 0 0 0 0 BORDER 0 0 0 0 MARGIN 0 0 POSITION TYPE relative absolute POSITION React Native copy to clipboard import React, {Component} from 'react'; import {View} from 'react-native'; export default class MyLayout extends Component { render() { return ( <View style={{ flex: 1, width: 500, height: 400, }}> <View style={{ flex: 1, width: 100, height: 100, minHeight: 25, maxHeight: 300, justifyContent: 'center', flexBasis: 150, flexGrow: '0.33', flexShrink: '0.25', }}> <View style={{ flex: 1, width: 100, height: 50, minHeight: 25, maxHeight: 150, alignItems: 'center', flexBasis: 75, flexGrow: '0.3', flexShrink: '0.5', }} /> </View> <View style={{ flex: 1, width: 100, height: 200, maxWidth: 200, maxHeight: 200, flexGrow: 1, flexShrink: 0, }} /> <View style={{ flex: 1, width: 100, minHeight: 200, justifyContent: 'space-evenly', alignSelf: 'stretch', flexBasis: 200, flexGrow: 0, flexShrink: 0, }}> <View style={{ flex: 1, width: 100, height: 100, }} /> <View style={{ flex: 1, width: 100, height: 100, }} /> </View> </View> ); } }; import React, {Component} from 'react'; import {View} from 'react-native'; export default class MyLayout extends Component { render() { return ( <View style={{ flex: 1, width: 500, height: 400, }}> <View style={{ flex: 1, width: 100, height: 100, minHeight: 25, maxHeight: 300, justifyContent: 'center', flexBasis: 150, flexGrow: '0.33', flexShrink: '0.25', }}> <View style={{ flex: 1, width: 100, height: 50, minHeight: 25, maxHeight: 150, alignItems: 'center', flexBasis: 75, flexGrow: '0.3', flexShrink: '0.5', }} /> </View> <View style={{ flex: 1, width: 100, height: 200, maxWidth: 200, maxHeight: 200, flexGrow: 1, flexShrink: 0, }} /> <View style={{ flex: 1, width: 100, minHeight: 200, justifyContent: 'space-evenly', alignSelf: 'stretch', flexBasis: 200, flexGrow: 0, flexShrink: 0, }}> <View style={{ flex: 1, width: 100, height: 100, }} /> <View style={{ flex: 1, width: 100, height: 100, }} /> </View> </View> ); } }; ```
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Algorithm
Build and Infrastructure
C#
C++ Enhancement
CLA Signed
Discussion
Documentation
Feature Request
Java
JavaScript
Merged
Question
Reverted
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
YogaKit
YogaLayout ViewGroup
bug
dependencies
Pull requests that update a dependency file
duplicate
enhancement
fb-exported
fh:direct-merge-enabled
invalid
ruby
Pull requests that update Ruby code
wontfix
No Label
Algorithm
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
DaddyFrosty
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#931
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?