Skip to content

[react-native] Add missing style props to View #25735

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.

Sign up for GitHub

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

Merged
alloy merged 7 commits into from
May 16, 2018
Merged

[react-native] Add missing style props to View #25735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
96f741e
[react-native] Add missing fields on ViewStyle
brunolemos May 12, 2018
8cc6c8d
[react-native] Make ViewProps extends ViewStyle
brunolemos May 12, 2018
27646c6
[react-native] Remove references of ScrollViewStyle
brunolemos May 12, 2018
3d7e710
[react-native] Make View overflow support scroll value
brunolemos May 12, 2018
d12e4ba
[react-native] Image props should extend ImageStyle intead of ViewStyle
brunolemos May 16, 2018
ddac6e2
[react-native] Add tests for ImageStyle and ViewStyle as props
brunolemos May 16, 2018
cf5dd19
[react-native] [Image] Disable broken props: width, height and tintColor
brunolemos May 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions types/react-native-snap-carousel/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
NativeScrollEvent,
StyleProp,
ScrollViewProps,
ScrollViewStyle,
ViewStyle,
ImageProps,
FlatListProps
Expand Down Expand Up @@ -180,11 +179,11 @@ export interface CarouselProps<T> extends React.Props<ScrollViewProps> {
/**
* Optional styles for Scrollview's global wrapper
*/
containerCustomStyle?: StyleProp<ScrollViewStyle>;
containerCustomStyle?: StyleProp<ViewStyle>;
Copy link
Copy Markdown
Collaborator

@alloy alloy May 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m a little confused, isn’t this limiting the available styles to a superset of the available scrollview styles?

Copy link
Copy Markdown
Contributor

@iRoachie iRoachie May 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's supposed to be a ViewStyle according to the source https://github.com/archriss/react-native-snap-carousel/blob/59b1d90f7e5ad23d4c4ced241ec15379e5d2fb6d/src/carousel/Carousel.js#L46

Copy link
Copy Markdown
Collaborator

@alloy alloy May 14, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah gotcha 👍

/**
* Optional styles for Scrollview's items container
*/
contentContainerCustomStyle?: StyleProp<ScrollViewStyle>;
contentContainerCustomStyle?: StyleProp<ViewStyle>;
/**
* Value of the opacity effect applied to inactive slides
*/
Expand Down
101 changes: 45 additions & 56 deletions types/react-native/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,7 @@ type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baselin
* Flex Prop Types
* @see https://facebook.github.io/react-native/docs/flexbox.html#proptypes
* @see https://facebook.github.io/react-native/docs/layout-props.html
* @see LayoutPropTypes.js
* @see https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/LayoutPropTypes.js
*/
export interface FlexStyle {
alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
Expand Down Expand Up @@ -604,14 +604,6 @@ export interface FlexStyle {
direction?: "inherit" | "ltr" | "rtl";
}


/**
* Layout Prop Types
* @see https://facebook.github.io/react-native/docs/layout-props.html
* @see LayoutPropTypes.js
*/
export interface LayoutProps extends FlexStyle {}

/**
* @see ShadowPropTypesIOS.js
*/
Expand Down Expand Up @@ -1577,33 +1569,46 @@ export interface GestureResponderHandlers {
onMoveShouldSetResponderCapture?: (event: GestureResponderEvent) => boolean;
}

// @see https://facebook.github.io/react-native/docs/view.html#style
export interface ViewStyle extends FlexStyle, TransformsStyle {
/**
* @see https://facebook.github.io/react-native/docs/view.html#style
* @see https://github.com/facebook/react-native/blob/master/Libraries/Components/View/ViewStylePropTypes.js
*/
export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
backfaceVisibility?: "visible" | "hidden";
backgroundColor?: string;
borderBottomColor?: string;
borderBottomEndRadius?: number;
borderBottomLeftRadius?: number;
borderBottomRightRadius?: number;
borderBottomStartRadius?: number;
borderBottomWidth?: number;
borderColor?: string;
borderEndColor?: string;
borderLeftColor?: string;
borderLeftWidth?: number;
borderRadius?: number;
borderRightColor?: string;
borderRightWidth?: number;
borderStartColor?: string;
borderStyle?: "solid" | "dotted" | "dashed";
borderTopColor?: string;
borderTopEndRadius?: number;
borderTopLeftRadius?: number;
borderTopRightRadius?: number;
borderTopStartRadius?: number;
borderTopWidth?: number;
display?: "none" | "flex";
borderWidth?: number;
opacity?: number;
overflow?: "visible" | "hidden";
shadowColor?: string;
shadowOffset?: { width: number; height: number };
shadowOpacity?: number;
shadowRadius?: number;
elevation?: number;
testID?: string;
/**
* Sets the elevation of a view, using Android's underlying
* [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).
* This adds a drop shadow to the item and affects z-order for overlapping views.
* Only supported on Android 5.0+, has no effect on earlier versions.
*
* @platform android
*/
elevation?: number;
}

export interface ViewPropsIOS {
Expand Down Expand Up @@ -1673,6 +1678,7 @@ export interface ViewPropsAndroid {
renderToHardwareTextureAndroid?: boolean;
}


type Falsy = undefined | null | false;
interface RecursiveArray<T> extends Array<T | RecursiveArray<T>> {}
/** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */
Expand Down Expand Up @@ -1772,7 +1778,7 @@ type AccessibilityTraits =
* @see https://facebook.github.io/react-native/docs/view.html#props
*/
export interface ViewProps
extends ViewPropsAndroid, ViewPropsIOS, GestureResponderHandlers, Touchable, AccessibilityProps, LayoutProps {
extends ViewPropsAndroid, ViewPropsIOS, GestureResponderHandlers, Touchable, AccessibilityProps, ViewStyle {
/**
* This defines how far a touch event can start away from the view.
* Typical interface guidelines recommend touch targets that are at least
Expand Down Expand Up @@ -3230,8 +3236,9 @@ export interface ShadowStyleIOS {
/**
* Image style
* @see https://facebook.github.io/react-native/docs/image.html#style
* @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageStylePropTypes.js
*/
export interface ImageStyle extends FlexStyle, TransformsStyle, ShadowStyleIOS {
export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
resizeMode?: ImageResizeMode;
backfaceVisibility?: "visible" | "hidden";
borderBottomLeftRadius?: number;
Expand Down Expand Up @@ -3378,7 +3385,7 @@ export type ImageSourcePropType = ImageURISource | ImageURISource[] | ImageRequi
/**
* @see https://facebook.github.io/react-native/docs/image.html
*/
export interface ImageProps extends ImagePropsIOS, ImagePropsAndroid, AccessibilityProps, LayoutProps {
export interface ImagePropsBase extends ImagePropsIOS, ImagePropsAndroid, AccessibilityProps, ImageStyle {
/**
* onLayout function
*
Expand Down Expand Up @@ -3484,15 +3491,25 @@ export interface ImageProps extends ImagePropsIOS, ImagePropsAndroid, Accessibil
loadingIndicatorSource?: ImageURISource;

/**
*
* Style
* A unique identifier for this element to be used in UI Automation testing scripts.
*/
style?: StyleProp<ImageStyle>;
testID?: string;

/**
* A unique identifier for this element to be used in UI Automation testing scripts.
* Currently broken
* @see https://github.com/facebook/react-native/pull/19281
*/
testID?: string;
width?: never,
height?: never,
tintColor?: never,
}

export interface ImageProps extends ImagePropsBase {
/**
*
* Style
*/
style?: StyleProp<ImageStyle>;
}

declare class ImageComponent extends React.Component<ImageProps> {}
Expand All @@ -3505,7 +3522,7 @@ export class Image extends ImageBase {
queryCache?(urls: string[]): Promise<Map<string, "memory" | "disk">>;
}

export interface ImageBackgroundProps extends ImageProps {
export interface ImageBackgroundProps extends ImagePropsBase {
style?: StyleProp<ViewStyle>;
imageStyle?: StyleProp<ImageStyle>;
}
Expand Down Expand Up @@ -5462,34 +5479,6 @@ export interface InteractionManagerStatic extends EventEmitterListener {
setDeadline(deadline: number): void;
}

export interface ScrollViewStyle extends FlexStyle, TransformsStyle {
backfaceVisibility?: "visible" | "hidden";
backgroundColor?: string;
borderColor?: string;
borderTopColor?: string;
borderRightColor?: string;
borderBottomColor?: string;
borderLeftColor?: string;
borderRadius?: number;
borderTopLeftRadius?: number;
borderTopRightRadius?: number;
borderBottomLeftRadius?: number;
borderBottomRightRadius?: number;
borderStyle?: "solid" | "dotted" | "dashed";
borderWidth?: number;
borderTopWidth?: number;
borderRightWidth?: number;
borderBottomWidth?: number;
borderLeftWidth?: number;
opacity?: number;
overflow?: "visible" | "hidden";
shadowColor?: string;
shadowOffset?: { width: number; height: number };
shadowOpacity?: number;
shadowRadius?: number;
elevation?: number;
}

export interface ScrollResponderEvent extends NativeSyntheticEvent<NativeTouchEvent> {}

interface ScrollResponderMixin extends SubscribableMixin {
Expand Down Expand Up @@ -6058,7 +6047,7 @@ export interface ScrollViewProps
/**
* Style
*/
style?: StyleProp<ScrollViewStyle>;
style?: StyleProp<ViewStyle>;

/**
* A RefreshControl component, used to provide pull-to-refresh
Expand Down
22 changes: 22 additions & 0 deletions types/react-native/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
DataSourceAssetCallback,
DeviceEventEmitterStatic,
Dimensions,
Image,
ImageStyle,
InteractionManager,
ListView,
Expand Down Expand Up @@ -462,4 +463,25 @@ class StatusBarTest extends React.Component {
}
}

class StylePropsTest extends React.PureComponent {
render() {
const uri = 'https://seeklogo.com/images/T/typescript-logo-B29A3F462D-seeklogo.com.png'

return (
<View backgroundColor="lightgray" flex={1} overflow="scroll">
<Image
borderRadius={100}
// height={200}
margin={20}
overflow="visible" // ps: must fail if "scroll"
source={{ uri }}
style={{ width: 200, height: 200, tintColor: 'green' }}
// tintColor="green"
// width={200}
/>
</View>
);
}
}

const listViewDataSourceTest = new ListView.DataSource({rowHasChanged: () => true})