Setting Up Development Environment

react-native init MyProject
cd MyProject
react-native run-ios

# Download and install Android Studio
# For macOS
brew install --cask android-studio

# For Windows/Linux
# Download from https://developer.android.com/studio

xcode-select -p

module.exports = {
  projectRoot: __dirname,
  resetCache: false,
  maxWorkers: 2,
  watchFolders: [],
  transformer: {
    babelTransformerPath: require.resolve('metro-react-native-babel-transformer'),
  },
};

npm install -g @react-native-community/cli
npx react-native init MyTSApp --template react-native-template-typescript

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

interface Props {
  title: string;
  count: number;
}

const MyComponent: React.FC<Props> = ({ title, count }) => {
  return (
    <View>
      <Text>{title}: {count}</Text>
    </View>
  );
};

export default MyComponent;

{
  "extends": [
    "@react-native-community"
  ],
  "rules": {
    "react-native/no-inline-styles": "warn",
    "no-unused-vars": "error"
  }
}

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

REACT_NATIVE_DEBUG=true
NODE_ENV=development
CI=false

npx react-native init MyProject

# On macOS
brew install watchman

# On Linux
sudo apt update
sudo apt install watchman

# On Windows (via Chocolatey)
choco install watchman

react-native doctor

# Download Flipper from the official website or GitHub
# For macOS:
brew install flipper

# For Windows/Linux:
# Download the installer from https://fbflipper.com/docs/getting-started

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src": ["./src"],
      "components": ["./src/components"],
      "utils": ["./src/utils"],
      "assets": ["./src/assets"]
    }
  }
}

import Button from "components/Button";
import { formatDate } from "utils/dateUtils";
import logo from "assets/images/logo.png";