Layout Style Props

Note

The props listed as Supported on Roku in the following table work with the following RN components: Button, Image, FlatList, ScrollView, Text, TextInput, View, and VirtualizedList.

Properties

Property	Supported	Supported on Roku	Dynamic on Roku	Notes
alignContent	Partial	~x	~x	`space-around` and `space-between` modes are not supported.
alignItems	~v	~v	~v
alignSelf	~v	Partial	~v
aspectRatio	~v	~v	~v
borderBottomWidth	~x	Not Possible	Not Possible
borderEndWidth	~x	Not Possible	Not Possible
borderLeftWidth	~x	Not Possible	Not Possible
borderRightWidth	~x	Not Possible	Not Possible
borderStartWidth	~x	Not Possible	Not Possible
borderTopWidth	~x	Not Possible	Not Possible
borderWidth	~x	Not Possible	Not Possible
bottom	~v	~v	~x
direction	~v	~v	~v	RTL text is not supported on Roku.
display	~v	N/A	Not Possible
end	~v	~x	~x
flex	~v	~v	~v
flexBasis	~v	~v	~v
flexDirection	~v	~v	~v
flexGrow	~v	~v	~v
flexShrink	~v	~x	~x
flexWrap	~v	~v	~v
height	~v	~v	~v
justifyContent	~v	~v	~v
left	~v	~v	~x
margin	~v	~v	~x
marginBottom	~v	~v	~x
marginEnd	~v	~v	~v
marginHorizontal	~v	~v	~v
marginLeft	~v	~v	~x
marginRight	~v	~v	~x
marginStart	~v	~v	~v
marginTop	~v	~v	~x
marginVertical	~v	~v	~v
maxHeight	~v	~v	~v
maxWidth	~v	~v	~x
minHeight	~v	~v	~x
minWidth	~v	~v	~v
overflow	~v	~v	~v
padding	~v	~v	~v
paddingBottom	~v	~v	~x
paddingEnd	~v	~v	~v
paddingHorizontal	~v	~v	~x
paddingLeft	~v	~v	~x
paddingRight	~v	~v	~x
paddingStart	~v	~v	~v
paddingTop	~v	~v	~x
paddingVertical	~v	~v	~x
position	~v	~v	~x
right	~v	~v	~x
start	~v	~v	~x
top	~v	~v	~x
width	~v	~v	~v
zIndex	~v	~v	~x	See the note below

Important

Due to a known issue with how Facebook RN wraps the list items in an extra view, you must add the CellRendererComponent prop to the FlatList component for the zIndex prop to correctly lay out the items within a FlatList. The following code snippet removes the extra view by setting it to the View component’s children instead.

CellRendererComponent={({children}) =>
  children
}