How to use chains in motion layout compose?

[balvinderg]

I am trying to vertically align items in motion layout compose but couldn't find any example to do this. Is this supported?

[jafu888]

There are several ways to do this : Tie all the widgets to a guideline on the left: and stack them on top of the other

    ConstraintSets: {
           start: {
             g1: { type: 'vGuideline', start: 80 },
             box1: {
               width: 50, height: 50,
               bottom: ['box2', 'top', 10],
               start: ['g1', 'start', 10],
             },
               box2: {
               width: 50, height: 50,
               bottom: ['box3', 'top', 10],
               start: ['g1', 'start', 10],
             },
             box3: {
               width: 50, height: 50,
               bottom: ['box4', 'top', 10],
               start: ['g1', 'start', 10],
             },
             box4: {
               width: 50, height: 50,
               bottom: ['parent', 'bottom', 10],
               start: ['g1', 'start', 10],
             },
         }
      }

Use a chain to stack them:

    ConstraintSets: {
           start: {
             myChain: {   type: 'vChain',    contains: ['box1','box2','box3','box4']  },
             g1: { type: 'vGuideline', start: 80 },
             box1: {
               width: 50, height: 50,
               start: ['g1', 'start', 10],
             },
               box2: {
               width: 50, height: 50,
               start: ['g1', 'start', 10],
             },
             box3: {
               width: 50, height: 50,
               start: ['g1', 'start', 10],
             },
             box4: {
               width: 50, height: 50,
               start: ['g1', 'start', 10],
             },
         }
      }

Skip the guideline and tie them to each other:

    ConstraintSets: {
           start: {
             myChain: {   type: 'vChain',    contains: ['box1','box2','box3','box4']  },

             box1: {
               width: 50, height: 50,
               start: ['parent', 'start', 90],
             },
               box2: {
               width: 50, height: 50,
               start: ['box1', 'start', 0],
             },
             box3: {
               width: 50, height: 50,
               start: ['box1', 'start', 0],
             },
             box4: {
               width: 50, height: 50,
               start: ['box1', 'start', 0],
             },
         }
      }