ReactNative.Styles

data Styles :: Type

A type that represents things that can be passed into 'style' properties

data StyleProp :: Type

A type which represents a single style

styles :: Array StyleProp -> Styles

Create styles from an array, if the styles are static, use staticStyles

styles' :: Array Styles -> Styles

Create Styles from an array of them, last style has precedence

staticStyles :: Array StyleProp -> Styles

Register an array of static styles, internally using React Native's StyleSheet.create function

unsafeStyleProp :: forall a. String -> a -> StyleProp

newtype Position

absolute :: Position

relative :: Position

position :: Position -> StyleProp

position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position. If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree. See https://github.com/facebook/css-layout for more details on how position differs between React Native and CSS.

newtype BorderStyle

solid :: BorderStyle

dotted :: BorderStyle

dashed :: BorderStyle

borderStyle :: BorderStyle -> StyleProp

backgroundColor :: Color -> StyleProp

flex :: Int -> StyleProp

flexBasis :: Int -> StyleProp

left :: Int -> StyleProp

left is the number of logical pixels to offset the left edge of this component. It works similarly to left in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how left affects layout.

right :: Int -> StyleProp

right is the number of logical pixels to offset the right edge of this component. It works similarly to right in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how right affects layout.

top :: Int -> StyleProp

top is the number of logical pixels to offset the top edge of this component. It works similarly to top in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how top affects layout.

bottom :: Int -> StyleProp

bottom is the number of logical pixels to offset the bottom edge of this component. It works similarly to bottom in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how bottom affects layout.

margin :: Int -> StyleProp

Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details.

marginBottom :: Int -> StyleProp

marginBottom works like margin-bottom in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details.

marginHorizontal :: Int -> StyleProp

Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.

marginLeft :: Int -> StyleProp

marginLeft works like margin-left in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details.

marginRight :: Int -> StyleProp

marginRight works like margin-right in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details.

marginTop :: Int -> StyleProp

marginTop works like margin-top in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details.

marginVertical :: Int -> StyleProp

Setting marginVertical has the same effect as setting both marginTop and marginBottom.

width :: Int -> StyleProp

width sets the width of this component. It works similarly to width in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.

height :: Int -> StyleProp

height sets the height of this component. It works similarly to height in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.

maxHeight :: Int -> StyleProp

maxHeight is the maximum height for this component, in logical pixels. It works similarly to max-height in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details.

maxWidth :: Int -> StyleProp

maxWidth is the maximum width for this component, in logical pixels. It works similarly to max-width in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details.

minHeight :: Int -> StyleProp

minHeight is the minimum height for this component, in logical pixels. It works similarly to min-height in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details.

minWidth :: Int -> StyleProp

minWidth is the minimum width for this component, in logical pixels. It works similarly to min-width in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details.

newtype Overflow

Instances

• VisibilityEnum Overflow

scroll :: Overflow

overflow :: Overflow -> StyleProp

overflow controls how a children are measured and displayed. overflow: hidden causes views to be clipped while overflow: scroll causes views to be measured independently of their parents main axis.It works likeoverflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details.

padding :: Int -> StyleProp

Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details.

paddingBottom :: Int -> StyleProp

paddingBottom works like padding-bottom in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details.

paddingHorizontal :: Int -> StyleProp

Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.

paddingLeft :: Int -> StyleProp

paddingLeft works like padding-left in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details.

paddingRight :: Int -> StyleProp

paddingRight works like padding-right in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details.

paddingTop :: Int -> StyleProp

paddingTop works like padding-top in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details.

paddingVertical :: Int -> StyleProp

Setting paddingVertical is like setting both of paddingTop and paddingBottom.

newtype BackfaceVisibility

Instances

• VisibilityEnum BackfaceVisibility

backfaceVisibility :: BackfaceVisibility -> StyleProp

borderBottomWidth :: Int -> StyleProp

borderBottomWidth works like border-bottom-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details.

borderLeftWidth :: Int -> StyleProp

borderLeftWidth works like border-left-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details.

borderRightWidth :: Int -> StyleProp

borderRightWidth works like border-right-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details.

borderTopWidth :: Int -> StyleProp

borderTopWidth works like border-top-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details.

borderWidth :: Int -> StyleProp

borderWidth works like border-width in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details.

borderBottomColor :: Color -> StyleProp

borderBottomLeftRadius :: Int -> StyleProp

borderBottomRightRadius :: Int -> StyleProp

borderColor :: Color -> StyleProp

borderLeftColor :: Color -> StyleProp

borderRadius :: Int -> StyleProp

borderRightColor :: Color -> StyleProp

borderTopColor :: Color -> StyleProp

borderTopLeftRadius :: Int -> StyleProp

borderTopRightRadius :: Int -> StyleProp

opacity :: Number -> StyleProp

elevation :: Int -> StyleProp

zIndex :: Int -> StyleProp

newtype ResizeMode

Instances

• CenterEnum ResizeMode

cover :: ResizeMode

contain :: ResizeMode

stretch :: ResizeMode

repeat :: ResizeMode

resizeMode :: ResizeMode -> StyleProp

hairlineWidth :: Int