xref: /expo/docs/public/static/data/unversioned/expo-linear-gradient.json (revision da751fd5)

{"name":"expo-linear-gradient","kind":1,"children":[{"name":"LinearGradient","kind":128,"comment":{"summary":[{"kind":"text","text":"Renders a native view that transitions between multiple colors in a linear direction."}]},"children":[{"name":"constructor","kind":512,"flags":{"isExternal":true},"signatures":[{"name":"new LinearGradient","kind":16384,"flags":{"isExternal":true},"parameters":[{"name":"props","kind":32768,"flags":{"isExternal":true},"type":{"type":"union","types":[{"type":"reference","name":"LinearGradientProps"},{"type":"reference","typeArguments":[{"type":"reference","name":"LinearGradientProps"}],"name":"Readonly","qualifiedName":"Readonly","package":"typescript"}]}}],"type":{"type":"reference","name":"LinearGradient"},"inheritedFrom":{"type":"reference","name":"React.Component<LinearGradientProps>.constructor"}},{"name":"new LinearGradient","kind":16384,"flags":{"isExternal":true},"comment":{"summary":[],"blockTags":[{"tag":"@deprecated","content":[]},{"tag":"@see","content":[{"kind":"text","text":"https://reactjs.org/docs/legacy-context.html"}]}]},"parameters":[{"name":"props","kind":32768,"flags":{"isExternal":true},"type":{"type":"reference","name":"LinearGradientProps"}},{"name":"context","kind":32768,"flags":{"isExternal":true},"type":{"type":"intrinsic","name":"any"}}],"type":{"type":"reference","name":"LinearGradient"},"inheritedFrom":{"type":"reference","name":"React.Component<LinearGradientProps>.constructor"}}],"inheritedFrom":{"type":"reference","name":"React.Component<LinearGradientProps>.constructor"}},{"name":"render","kind":2048,"signatures":[{"name":"render","kind":4096,"type":{"type":"reference","name":"Element","qualifiedName":"global.JSX.Element","package":"@types/react"},"overwrites":{"type":"reference","name":"React.Component.render"}}],"overwrites":{"type":"reference","name":"React.Component.render"}}],"extendedTypes":[{"type":"reference","typeArguments":[{"type":"reference","name":"LinearGradientProps"}],"name":"Component","qualifiedName":"React.Component","package":"@types/react"}]},{"name":"LinearGradientPoint","kind":4194304,"comment":{"summary":[{"kind":"text","text":"An object "},{"kind":"code","text":"`{ x: number; y: number }`"},{"kind":"text","text":" or array "},{"kind":"code","text":"`[x, y]`"},{"kind":"text","text":" that represents the point\nat which the gradient starts or ends, as a fraction of the overall size of the gradient ranging\nfrom "},{"kind":"code","text":"`0`"},{"kind":"text","text":" to "},{"kind":"code","text":"`1`"},{"kind":"text","text":", inclusive."}]},"type":{"type":"union","types":[{"type":"reflection","declaration":{"name":"__type","kind":65536,"children":[{"name":"x","kind":1024,"comment":{"summary":[{"kind":"text","text":"A number ranging from "},{"kind":"code","text":"`0`"},{"kind":"text","text":" to "},{"kind":"code","text":"`1`"},{"kind":"text","text":", representing the position of gradient transformation."}]},"type":{"type":"intrinsic","name":"number"}},{"name":"y","kind":1024,"comment":{"summary":[{"kind":"text","text":"A number ranging from "},{"kind":"code","text":"`0`"},{"kind":"text","text":" to "},{"kind":"code","text":"`1`"},{"kind":"text","text":", representing the position of gradient transformation."}]},"type":{"type":"intrinsic","name":"number"}}]}},{"type":"reference","name":"NativeLinearGradientPoint"}]}},{"name":"LinearGradientProps","kind":4194304,"type":{"type":"intersection","types":[{"type":"reference","name":"ViewProps","qualifiedName":"ViewProps","package":"react-native"},{"type":"reflection","declaration":{"name":"__type","kind":65536,"children":[{"name":"colors","kind":1024,"comment":{"summary":[{"kind":"text","text":"An array of colors that represent stops in the gradient. At least two colors are required\n(for a single-color background, use the "},{"kind":"code","text":"`style.backgroundColor`"},{"kind":"text","text":" prop on a "},{"kind":"code","text":"`View`"},{"kind":"text","text":" component)."}]},"type":{"type":"array","elementType":{"type":"intrinsic","name":"string"}}},{"name":"end","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"For example, "},{"kind":"code","text":"`{ x: 0.1, y: 0.2 }`"},{"kind":"text","text":" means that the gradient will end "},{"kind":"code","text":"`10%`"},{"kind":"text","text":" from the left and "},{"kind":"code","text":"`20%`"},{"kind":"text","text":" from the bottom.\n\n**On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position."}],"blockTags":[{"tag":"@default","content":[]}]},"type":{"type":"union","types":[{"type":"reference","name":"LinearGradientPoint"},{"type":"literal","value":null}]}},{"name":"locations","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"An array that contains "},{"kind":"code","text":"`number`"},{"kind":"text","text":"s ranging from "},{"kind":"code","text":"`0`"},{"kind":"text","text":" to "},{"kind":"code","text":"`1`"},{"kind":"text","text":", inclusive, and is the same length as the "},{"kind":"code","text":"`colors`"},{"kind":"text","text":" property.\nEach number indicates a color-stop location where each respective color should be located.\nIf not specified, the colors will be distributed evenly across the gradient.\n\nFor example, "},{"kind":"code","text":"`[0.5, 0.8]`"},{"kind":"text","text":" would render:\n- the first color, solid, from the beginning of the gradient view to 50% through (the middle);\n- a gradient from the first color to the second from the 50% point to the 80% point; and\n- the second color, solid, from the 80% point to the end of the gradient view.\n\n> The color-stop locations must be ascending from least to greatest."}],"blockTags":[{"tag":"@default","content":[{"kind":"text","text":"[]"}]}]},"type":{"type":"union","types":[{"type":"array","elementType":{"type":"intrinsic","name":"number"}},{"type":"literal","value":null}]}},{"name":"start","kind":1024,"flags":{"isOptional":true},"comment":{"summary":[{"kind":"text","text":"For example, "},{"kind":"code","text":"`{ x: 0.1, y: 0.2 }`"},{"kind":"text","text":" means that the gradient will start "},{"kind":"code","text":"`10%`"},{"kind":"text","text":" from the left and "},{"kind":"code","text":"`20%`"},{"kind":"text","text":" from the top.\n\n**On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position."}],"blockTags":[{"tag":"@default","content":[]}]},"type":{"type":"union","types":[{"type":"reference","name":"LinearGradientPoint"},{"type":"literal","value":null}]}}]}}]}}]}