ReactNative.Styles
- Package
- purescript-reactnative
- Repository
- doolse/purescript-reactnative
React Native styles, see https://facebook.github.io/react-native/docs/style.html for the full documentation
#staticStyles Source
staticStyles :: Array StyleProp -> Styles
Register an array of static styles, internally using React Native's StyleSheet.create
function
#unsafeStyleProp Source
unsafeStyleProp :: forall a. String -> a -> StyleProp
#position Source
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.
#BorderStyle Source
newtype BorderStyle
#solid Source
solid :: BorderStyle
#borderStyle Source
borderStyle :: BorderStyle -> StyleProp
#backgroundColor Source
backgroundColor :: Color -> StyleProp
#left Source
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 Source
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 Source
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 Source
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 Source
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 Source
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 Source
marginHorizontal :: Int -> StyleProp
Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.
#marginLeft Source
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 Source
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 Source
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 Source
marginVertical :: Int -> StyleProp
Setting marginVertical has the same effect as setting both marginTop and marginBottom.
#width Source
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 Source
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 Source
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 Source
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 Source
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 Source
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.
#overflow Source
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 Source
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 Source
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 Source
paddingHorizontal :: Int -> StyleProp
Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.
#paddingLeft Source
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 Source
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 Source
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 Source
paddingVertical :: Int -> StyleProp
Setting paddingVertical is like setting both of paddingTop and paddingBottom.
#borderBottomWidth Source
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 Source
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 Source
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 Source
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 Source
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 Source
borderBottomColor :: Color -> StyleProp
#borderColor Source
borderColor :: Color -> StyleProp
#borderLeftColor Source
borderLeftColor :: Color -> StyleProp
#borderRadius Source
borderRadius :: Int -> StyleProp
#borderRightColor Source
borderRightColor :: Color -> StyleProp
#borderTopColor Source
borderTopColor :: Color -> StyleProp
#borderTopLeftRadius Source
borderTopLeftRadius :: Int -> StyleProp
#borderTopRightRadius Source
borderTopRightRadius :: Int -> StyleProp
#cover Source
cover :: ResizeMode
#repeat Source
repeat :: ResizeMode
#resizeMode Source
resizeMode :: ResizeMode -> StyleProp
#hairlineWidth Source
hairlineWidth :: Int
- Modules
- ReactNative.
API - ReactNative.
Android. API - ReactNative.
Android. Components - ReactNative.
Android. Components. ProgressBarAndroid - ReactNative.
Components - ReactNative.
Components. ActivityIndicator - ReactNative.
Components. Button - ReactNative.
Components. Image - ReactNative.
Components. ListView - ReactNative.
Components. Modal - ReactNative.
Components. NavigatorIOS - ReactNative.
Components. Picker - ReactNative.
Components. SafeAreaView - ReactNative.
Components. ScrollView - ReactNative.
Components. Slider - ReactNative.
Components. Switch - ReactNative.
Components. Text - ReactNative.
Components. TextInput - ReactNative.
Components. Touchable - ReactNative.
Components. TouchableNativeFeedback - ReactNative.
Components. View - ReactNative.
Events - ReactNative.
Internal. Undefinable - ReactNative.
Optional - ReactNative.
Platform - ReactNative.
PropTypes - ReactNative.
PropTypes. Color - ReactNative.
Styles - ReactNative.
Styles. Flex - ReactNative.
Styles. Image - ReactNative.
Styles. Text - ReactNative.
Unsafe. ApplyProps - ReactNative.
Unsafe. Components