loading...
Cover image for React Native App use TypeScript, custom component - React Native Flawless UI

React Native App use TypeScript, custom component - React Native Flawless UI

tuantvk profile image tuantvk ・3 min read

Web React Native Flawless UI - react-native-flawless-ui.netlify.com for πŸ”° beginner use React Native πŸ”°

This post uses Microsoft's TypeScript-React-Native-Starter repo as a guide.

Create react native app

Once you've tried scaffolding out an ordinary React Native project,
you'll be ready to start adding TypeScript. Let's go ahead and do that.

react-native init MyAwesomeProject
cd MyAwesomeProject

Adding TypeScript

The next step is to add TypeScript to your project. The following commands will:

  • add TypeScript to your project
  • add React Native TypeScript Transformer to your project
  • initialize an empty TypeScript config file, which we'll configure next
  • add an empty React Native TypeScript Transformer config file, which we'll configure next
  • Adds typings for React and React Native
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react-native
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

The tsconfig.json file contains all the settings for the TypeScript compile.
The defaults created by the command above are mostly fine, but open the file and uncomment the following line:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": [
      "es6"
    ],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

The rn-cli.config.js contains the settings for the React Native TypeScript Transformer.
Open it and add the following:

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

Button

Example Button component use Typescript:

import React from 'react';
import {
  TouchableOpacity,
} from 'react-native';

interface BProps {
  activeOpacity?: number,
  children: React.ReactNode,
}

const Button = ({
  children,
  activeOpacity,
  ...rest
}: BProps) => (
    <TouchableOpacity activeOpacity={activeOpacity} {...rest}>
      {children}
    </TouchableOpacity>
  );

Button.defaultProps = {
  activeOpacity: 0.8,
}

export default Button;

Text

Example Text component use Typescript:

import React from 'react';
import {
  Text as RNText,
  TextStyle,
} from 'react-native';
import {
  Consts, // size of text
  Colors, // color if text
} from '../../constants';

export interface TextProps {
  size?: 'S' | 'M' | 'L' | 'XL' | 'XXL'; // size name
  style?: TextStyle;
  bold?: boolean,
  color?: string,
  children: React.ReactNode;
}

const getSize: { [key: string]: number } = Consts;

const checkSize = (size: string): number => {
  return getSize[size] || 0;
}

const Text = ({
  size = 'M',
  children,
  style,
  bold,
  color,
  ...rest
}: TextProps) => (
    <RNText {...rest}
      style={{
        ...style,
        fontSize: checkSize(size),
        fontWeight: bold ? '700' : '400',
        color: color || Colors.black,
      }}
    >
      {children}
    </RNText>
  );

export default Text;

Example use Text component

import React, { Component } from 'react';
import { View } from 'react-native';
import Text from './Text';

const Home = () => (
  <View>
    {/* prop size 'S'  | 'M'  | 'L'  | 'XL' | 'XXL' */}
    {/* same      '11' | '14' | '16' | '22' | '28' */}
    <Text size="XL">Text component 1</Text>

    {/* use fontWeight bold */}
    <Text bold={true}>Text component 2</Text>

    {/* custom color text */}
    <Text color="#ff0">Text component 3</Text>

    {/* add more style  */}
    <Text style={{ textAlign: 'right' }}>Text component 4</Text>

    {/* use onPress of Text react native */}
    <Text onPress={() => alert("Hello from Text")}>Text component 5</Text>
  </View>
);

export default Home;

View repo on 🏁 Github

What are we unit testing exactly ? 🚨

We're using "unit testing" to refer to tests of functions and plain JavaScript objects, independent of the React Native framework. This means that we aren't testing any components that rely on React Native.
View more

Happy hacking πŸ’“ !

Posted on by:

tuantvk profile

tuantvk

@tuantvk

js, python. C0de h4v3 fun

Discussion

markdown guide
 

The title sais the project is madw without ts, u might want to change that

Some comments have been hidden by the post's author - find out more

Code of Conduct Report abuse