Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Catalog API completion of View/Text/Image props #5677

Closed
chrisglein opened this issue Aug 10, 2020 · 4 comments
Closed

Catalog API completion of View/Text/Image props #5677

chrisglein opened this issue Aug 10, 2020 · 4 comments

Comments

@chrisglein
Copy link
Member

chrisglein commented Aug 10, 2020

The "props" documentation is separate from the components documentation, and through discovery of issues like #5668 it seems like we maybe missed a scrub of the props for API completion. Specifically, these pages:
https://reactnative.dev/docs/image-style-props
https://reactnative.dev/docs/layout-props
https://reactnative.dev/docs/shadow-props
https://reactnative.dev/docs/text-style-props
https://reactnative.dev/docs/view-style-props

Environment

npx react-native --version
4.10.1
npx react-native run-windows --info

  System:
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 3.66 GB / 15.92 GB
  Binaries:
    Node: 12.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    react: ^16.13.1 => 16.13.1
    react-native: ^0.62.0-0 => 0.62.2
    react-native-windows: ^0.62.0-0 => 0.62.2
  Installed UWP SDKs:
    10.0.14393.0
    10.0.17763.0
    10.0.18362.0

reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock"

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock
    AllowDevelopmentWithoutDevLicense    REG_DWORD    0x1
    AllowAllTrustedApps    REG_DWORD    0x1

Steps To Reproduce

Use any of the style props defined in these pages:
https://reactnative.dev/docs/image-style-props
https://reactnative.dev/docs/layout-props
https://reactnative.dev/docs/shadow-props
https://reactnative.dev/docs/text-style-props
https://reactnative.dev/docs/view-style-props

Expected Results

Any property that doesn't work has a tracking issue on this repo. Some are, some are not. The goal here is to track those that are not.

Image Style props

https://github.com/microsoft/react-native-windows/projects/18
#2111

  • borderTopRightRadius
  • backfaceVisibility
  • borderBottomLeftRadius
  • borderBottomRightRadius
  • borderColor
  • borderRadius
  • borderTopLeftRadius
  • backgroundColor
  • borderWidth
  • opacity
  • overflow
  • resizeMode
  • tintColor
  • overlayColor

Layout props

#2636

  • alignContent
  • alignItems
  • alignSelf
  • aspectRatio
  • borderBottomWidth
  • borderEndWidth
  • borderLeftWidth
  • borderRightWidth
  • borderStartWidth
  • borderTopWidth
  • borderWidth
  • bottom
  • direction
  • display
  • end
  • flex
  • flexBasis
  • flexDirection
  • flexGrow
  • flexShrink
  • flexWrap
  • height
  • justifyContent
  • left
  • margin
  • marginBottom
  • marginEnd
  • marginHorizontal
  • marginLeft
  • marginRight
  • marginStart
  • marginTop
  • marginVertical
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • overflow
  • padding
  • paddingBottom
  • paddingEnd
  • paddingHorizontal
  • paddingLeft
  • paddingRight
  • paddingStart
  • paddingTop
  • paddingVertical
  • position
  • right
  • start
  • top
  • width
  • zIndex

Shadow props

#2800

  • shadowColor
  • shadowOffset
  • shadowOpacity
  • shadowRadius

Text Style props

#4155
#5187
#5668

  • textShadowOffset
  • color
  • fontSize
  • fontStyle
  • fontWeight
  • lineHeight
  • textAlign
  • textDecorationLine
  • textShadowColor
  • fontFamily
  • textShadowRadius
  • includeFontPadding
  • textAlignVertical
  • fontVariant
  • letterSpacing
  • textDecorationColor
  • textDecorationStyle
  • textTransform
  • writingDirection

View Style props

https://github.com/microsoft/react-native-windows/projects/19
#3078
#3077

  • borderRightColor
  • backfaceVisibility
  • borderBottomColor
  • borderBottomEndRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius
  • borderBottomStartRadius
  • borderBottomWidth
  • borderColor
  • borderEndColor
  • borderLeftColor
  • borderLeftWidth
  • borderRadius
  • backgroundColor
  • borderRightWidth
  • borderStartColor
  • borderStyle
  • borderTopColor
  • borderTopEndRadius
  • borderTopLeftRadius
  • borderTopRightRadius
  • borderTopStartRadius
  • borderTopWidth
  • borderWidth
  • opacity
  • elevation

Snack, code example, screenshot, or link to a repository:

TBD
Some of these can be checked via playground, some are not exercised at all (and either need manual repros or new test pages).

@chrisglein chrisglein added this to the Backlog milestone Aug 10, 2020
@chrisglein chrisglein self-assigned this Aug 10, 2020
@ghost ghost added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Aug 10, 2020
@chrisglein chrisglein removed the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Aug 13, 2020
@chrisglein chrisglein assigned chiaramooney and unassigned chrisglein Mar 4, 2021
@chrisglein chrisglein added enhancement and removed bug labels Mar 4, 2021
@chiaramooney
Copy link
Contributor

Reopened View - Style API completion project.

  • Added one existing issue to project which is tracking incomplete/not working functionality for backfaceVisibility prop.
  • Remaining props that are lacking functionality already have issues tracking the work needed and are added to the project. (i.e. borderStyling and border*Color)
  • Sample usage of View style props added to gallery Expand View Examples to View Styling react-native-gallery#142

@chiaramooney
Copy link
Contributor

Reopened Image - API Completion Project.

@chiaramooney
Copy link
Contributor

Opened Text - API Completion Project

@chiaramooney
Copy link
Contributor

chiaramooney commented Jun 15, 2021

All layout style props are implemented and functional.

Shadow style props are not implemented, documentation already up to date.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants