React Native Styling

Overview

Resources

Go to https://github.com/danielstern/styling-react-native. Really like Daniel.

Stylesheet.create()

Camel Case is used and an object created. There are no px suffixes for pixel values. Should work on all devices. The names do not necessary align with Android or IoS name. Only works on React components and not standard tags like div

const styles = Stylesheet.create({
   container: {
      backgroundColor: "white",
      height: 470.
   }
})

The snippet for this is rnss

Fixed Dimension

A brief example of fixed dimensions shows how to build a POC for a specified device. Whilst no good for release it is a lot quicker to build for one offs.

Images

Images need either a width of a height to show in react native. Without no image is shown. In the course they used this. I do like the hairlineWidth

...
export const Logo = () => (
    <Image source={img} style={styles.logo} />
)

const styles = StyleSheet.create({
    logo: {
        height: 110,
        borderBottomColor: 'darksteelblue',
        borderBottomWidth: StyleSheet.hairlineWidth
    }
});

Flex Box

Introduction

flex: 0 auto;

This is the same as flex: initial; and the shorthand for the default value: flex: 0 1 auto. It sizes the item based on its width/height properties (or its content if not set).

It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or auto margins can be used to align flex items along the main axis.

flex: auto;

This is equivalent to flex: 1 1 auto. Beware, this is not the default value. It sizes the item based on its width/height properties, but makes it fully flexible so that they absorb any extra space along the main axis.

If all items are either flex: auto, flex: initial, or flex: none, any remaining space after the items have been sized will be distributed evenly to the items with flex: auto.

flex: none;

This is equivalent to flex: 0 0 auto. It sizes the item according to its width/height properties, but makes it fully inflexible.

This is similar to flex: initial except it is not allowed to shrink, even in an overflow situation.

flex: <positive-number>

Equivalent to flex: 1 0px. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.

If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Approach

First approach was to create style for the app and surround the existing approach with views and adding flex 1 to each component to make sure it takes up the remaining space. For the padding values, they were not changed.
Adding flex values of 1 and 15 means the component with 15 will be 15 times bigger than the 1, so a footer and body might use this approach So

• Replace the specified dimensions
• Replace the font size with vh
• Images see below

Images

• Do not use pixels values
• Generally you give it a height or a width using viewport e.g. vh for height
• Use alignItems stretch to fit 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.

You can then change the height to fit the image

    image: {
        // height: 200,
        //width: 200,
        height:'32vh',
        display: 'flex',
        alignItems: 'stretch'
    },

There is also a property on the image (not a style) call resizeMode.

ResizeMode

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).

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.

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 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.

  const flexWidthAnimation = useRef(new Animated.Value(2)).current;

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