React Native Styling - Revision history

Iwiseman: /* Animation API */

2020-12-15T02:39:03Z

Animation API

← Older revision		Revision as of 02:39, 15 December 2020
Line 101:		Line 101:
	*Navigating to new view can be a response to callback		*Navigating to new view can be a response to callback
	*Reset of further transition animated values are needed		*Reset of further transition animated values are needed
	Implementation of this provided was the shrinking of an item before moving to a detail screens. To achieve this the View was replaced by an Animation.View which have an additional style which points to the useRef. The handleComponentPress is the function called before the details screen. In there we specify the timing and the value to transition to.		Implementation of this provided was the shrinking of an item before moving to a detail screens. To achieve this the View was replaced by an Animation.View which have an additional style which points to the useRef which has the start value of flex:2. The handleComponentPress is the function called before the details screen. In there we specify the timing and the value to transition to.
	<syntaxhighlight lang="jsx">		<syntaxhighlight lang="jsx">
	const flexWidthAnimation = useRef(new Animated.Value(2)).current;		const flexWidthAnimation = useRef(new Animated.Value(2)).current;

Iwiseman: /* center */

2020-12-15T02:37:33Z

center

← Older revision		Revision as of 02:37, 15 December 2020
Line 92:		Line 92:
	===center===		===center===
	Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.		Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.
			=Animation API and the Layout Animation API=
			==Layout Animation API==
			This is a tool for synchronising animations. You only have to describe the timing before and after values. Support is not supported as much as it could be. For this reason this was not used
			==Animation API==
			Using the Animation API
			*Triggered with JavaScript
			*Transition and number of properties
			*Navigating to new view can be a response to callback
			*Reset of further transition animated values are needed
			Implementation of this provided was the shrinking of an item before moving to a detail screens. To achieve this the View was replaced by an Animation.View which have an additional style which points to the useRef. The handleComponentPress is the function called before the details screen. In there we specify the timing and the value to transition to.
			<syntaxhighlight lang="jsx">
			const flexWidthAnimation = useRef(new Animated.Value(2)).current;

			const handleComponentPress = () => {
			Animated.timing(flexWidthAnimation, {
			toValue: 0,
			duration: 750,
			}).start(() => {
			handleInteraction(item, flexWidthAnimation);
			});
			}
			</syntaxhighlight>

Iwiseman: /* Flex Box */

2020-12-15T01:38:00Z

Flex Box

← Older revision		Revision as of 01:38, 15 December 2020
Line 63:		Line 63:
	*Generally you give it a height or a width using viewport e.g. vh for height		*Generally you give it a height or a width using viewport e.g. vh for height
	*Use alignItems stretch to fit the container		*Use alignItems stretch to fit the container
	~~==Images==~~
	Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.		Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.
	<br>		<br>

Iwiseman: /* ResizeMode */

2020-12-15T01:20:38Z

ResizeMode

← Older revision		Revision as of 01:20, 15 December 2020
Line 83:		Line 83:
	There is also a property on the image (not a style) call resizeMode.		There is also a property on the image (not a style) call resizeMode.
	==ResizeMode==		==ResizeMode==
	===cover===		===cover(default)===
	Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).		Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
	===contain===		===contain===

Iwiseman: /* Images */

2020-12-15T01:19:49Z

Images

← Older revision		Revision as of 01:19, 15 December 2020
Line 81:		Line 81:
	},		},
	</syntaxhighlight>		</syntaxhighlight>
			There is also a property on the image (not a style) call resizeMode.
			==ResizeMode==
			===cover===
			Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
			===contain===
			Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
			===stretch===
			Scale width and height independently, This may change the aspect ratio of the src.
			===repeat===
			Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
			===center===
			Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

Iwiseman: /* Images */

2020-12-15T01:14:03Z

Images

← Older revision		Revision as of 01:14, 15 December 2020
Line 67:		Line 67:
	<br>		<br>
	[[ File:Strech with height.png\|200px]]		[[ File:Strech with height.png\|200px]]
			<br>
	You can then change the height to fit the image<br>		You can then change the height to fit the image<br>
	<br>		<br>

Iwiseman: /* Images */

2020-12-15T01:13:42Z

Images

← Older revision		Revision as of 01:13, 15 December 2020
Line 65:		Line 65:
	==Images==		==Images==
	Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.		Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.
			<br>
			[[ File:Strech with height.png\|200px]]
			You can then change the height to fit the image<br>
			<br>
			[[File:Stretch with correct height.png\|200px]]
			<br>
	<syntaxhighlight lang="jsx">		<syntaxhighlight lang="jsx">
	image: {		image: {
Line 74:		Line 79:
	alignItems: 'stretch'		alignItems: 'stretch'
	},		},
	</syntaxhighlight		</syntaxhighlight>


	~~<br>~~
	~~[[ File:Strech with height.png\|200px]]~~
	~~You can then change the height to fit the image~~
	~~<br>~~
	~~[[File:Stretch with correct height.png\|200px]]~~
	~~<br~~>

Iwiseman: /* Images */

2020-12-15T01:13:12Z

Images

@@ Line 65: / Line 65: @@
 ==Images==
 Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.
-<br />
 <syntaxhighlight lang="jsx">
      image: {
@@ Line 80: / Line 75: @@
      },
 </syntaxhighlight

Iwiseman: /* Images */

2020-12-15T01:12:15Z

Images

← Older revision		Revision as of 01:12, 15 December 2020
Line 66:		Line 66:
	Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.		Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.
	<br />		<br />
	[[File:Strech with height.png\|200px]]		[[ File:Strech with height.png\|200px]]
	You can then change the height to fit the image		You can then change the height to fit the image
	<br />		<br />

Iwiseman: /* Images */

2020-12-15T01:11:18Z

Images

← Older revision		Revision as of 01:11, 15 December 2020
Line 64:		Line 64:
	*Use alignItems stretch to fit the container		*Use alignItems stretch to fit the container
	==Images==		==Images==
	Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.<br>		Specifying the height or the width means that the other axis will stretch the image in proportion to fill the width. In this case the height is too small but the with is stretch to fill the container.
			<br />
	[[File:Strech with height.png\|200px]]		[[File:Strech with height.png\|200px]]
	You can then change the height to fit the image<br>		You can then change the height to fit the image
			<br />
	[[File:Stretch with correct height.png\|200px]]		[[File:Stretch with correct height.png\|200px]]
	<br>		<br />
	<syntaxhighlight lang="jsx">		<syntaxhighlight lang="jsx">
	image: {		image: {
Line 77:		Line 79:
	alignItems: 'stretch'		alignItems: 'stretch'
	},		},

	</syntaxhighlight		</syntaxhighlight