Insta3, Reusable component

 For developing mobile application like Instagram with react native and typescript, this writing explains how to use Reusable component. This article is continued one from previous article.

1. Reusable component

• Reusable component can be used for various case and code several times again and again. When it is used again, change style a little bit depending on case.
• It is very useful for similar style but same pattern usage and also for code maintenance.
• The basic structure is as below.

import type {FC, ReactNode} from 'react';

type SomeComponentProps = {
  children?: ReactNode
}

export const SomeComponent: FC<SomeComponentProps> = ({children}) => {
  return <View>{children}</View>
}

• ReactNode is any type which can be rendered in React. For example it can be string, JSX, array, number, null etc.
• children is child element in component tag. This component can be used again and again by changing this children when it is needed. There is optional property (children?: ReactNode) so it will have no error even if there is no children.

2. Making TouchableView component

• Make the sub directory in src directory as components and make following files.

$ cd src
$ mkdir components
$ cd components
$ touch TouchableView.tsx Avatar.tsx
$ cd ../..

• Make TouchableView.tsx as below.

src/components/TouchableView.tsx

import React from 'react';
import type {FC, ComponentProps} from 'react';
import {TouchableOpacity, View} from 'react-native';
import type {StyleProp, ViewStyle} from 'react-native';

type TouchableOpacityProps = ComponentProps<typeof TouchableOpacity>

export type TouchableViewProps = TouchableOpacityProps & {
    viewStyle?: StyleProp<ViewStyle>
}

export const TouchableView: FC<TouchableViewProps> = ({
    children, viewStyle, ...touchableProps}) => {
    return (
        <TouchableOpacity {...touchableProps}>
            <View style={[viewStyle]}>{children}</View>
        </TouchableOpacity>
    )
}

• TouchableOpacityProps takes every basic props of TouchableOpacity, such as onPress etc.
• TouchableViewProps takes TouchableOpacityProps and custom props like viewStyle. It is props of ViewStyle, such as color etc.
• With rest operator (...touchableProps) TouchableView component can take children, viewStyle and other props with a name of touchableProps. 

3. Making Avatar component

• Import TouchableView and use it in Avatar component. Make Avatar.tsx as below.

src/components/Avatar.tsx

import React from 'react';
import type {FC} from 'react';
import {Image} from 'react-native';
import type {StyleProp, ImageStyle} from 'react-native';
import {TouchableView} from './TouchableView';
import type {TouchableViewProps} from './TouchableView';

export type AvatarProps = TouchableViewProps & {
    uri: string
    size: number
    imageStyle?: StyleProp<ImageStyle>
}

export const Avatar: FC<AvatarProps> =({uri, size, imageStyle, ...touchableViewProps}) => {
    return (
        <TouchableView {...touchableViewProps}>
            <Image source={{uri}}
                style={[imageStyle, {width: size, height: size, borderRadius: size/2}]} />
        </TouchableView>
    )
}

• AvatarProps takes TouchableViewProps and custom props like uri, size, imageStyle. In the Image component it should have uri, width and height attribute. In this case width and height is same as size, so just size is included as props.