Last active
April 2, 2024 01:18
-
-
Save alexanderblackh/3a77032eb15bcfd353c1b13279be6e43 to your computer and use it in GitHub Desktop.
React Native Setup (custom structure)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/bash | |
Blue='\033[0;34m' # Blue | |
Green='\033[0;32m' # Green | |
Red='\033[0;31m' # Red | |
Color_Off='\033[0m' # Text Reset | |
# Function to validate project name | |
validate_project_name() { | |
local project_name="$1" | |
if [[ "$project_name" =~ [^a-z] ]]; then | |
echo -e "\n${Red}Error: Project name must contain only lowercase letters. Exiting..." | |
exit 1 | |
fi | |
} | |
# Get project name as input or prompt user if not provided | |
if [ $# -eq 0 ]; then | |
read -p "Enter project name: " project_name | |
else | |
project_name="$1" | |
fi | |
# Validate project name | |
validate_project_name "$project_name" | |
echo -e "\n${Blue} Creating React Native project... ${Color_Off}" | |
# Create React Native project | |
npx react-native@latest init "$project_name" <<< "y" | |
# Navigate to project directory | |
cd "$project_name" || exit | |
# Check if --no-expo or -ne flag is present | |
no_expo=false | |
for arg in "$@"; do | |
if [ "$arg" == "--no-expo" ] || [ "$arg" == "-ne" ]; then | |
no_expo=true | |
break | |
fi | |
done | |
# Install Expo modules by default | |
if ! $no_expo; then | |
echo -e "\n${Blue}Installing Expo modules...${Color_Off}" | |
# Install Expo modules | |
npx install-expo-modules@latest <<< "y" | |
fi | |
echo -e "\n${Blue}Installing required dependencies...${Color_Off}" | |
# Install required dependencies | |
yarn add @react-native-async-storage/async-storage @react-native-clipboard/clipboard @react-native-community/netinfo @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack @react-navigation/stack @reduxjs/toolkit @shopify/flash-list @shopify/restyle date-fns lodash react-native-config react-native-device-info react-native-gesture-handler react-native-get-random-values react-native-permissions react-native-reanimated react-native-safe-area-context react-native-screens react-native-share react-native-vector-icons react-native-webview react-redux redux-persist uuid | |
echo -e "\n${Blue}Installing development dependencies...${Color_Off}" | |
# Install development dependencies | |
yarn add --dev @types/lodash @types/uuid babel-plugin-module-resolver babel-plugin-transform-remove-console react-native-svg-transformer | |
echo -e "\n${Blue}Modifying package.json...${Color_Off}" | |
# Modify package.json | |
npx nano package.json | |
echo -e "\n${Blue}Adding postinstall script to package.json...${Color_Off}" | |
# Add postinstall script to package.json | |
node -e ' | |
const packageJson = require("./package.json"); | |
packageJson.scripts.postinstall = "npx pod-install && yarn start"; | |
require("fs").writeFileSync("./package.json", JSON.stringify(packageJson, null, 2)); | |
' | |
echo -e "\n${Blue}Creating project structure...${Color_Off}" | |
# Create project structure | |
mkdir -p src/components src/redux/api src/redux/listeners src/redux/features src/hooks src/styles src/assets/icons src/assets/images src/assets/localization src/assets/svgs src/root src/screen src/static src/utils src/types | |
touch src/redux/hooks.ts src/redux/store.ts src/styles/theme.ts src/utils/utilities.ts src/types/api.d.ts src/types/"$project_name.d.ts" | |
echo -e "\n${Blue}Enabling new architecture for iOS...${Color_Off}" | |
# Enable new architecture for iOS | |
cd ios || exit | |
RCT_NEW_ARCH_ENABLED=1 pod install | |
cd .. | |
echo -e "\n${Blue}Enabling new architecture for Android...${Color_Off}" | |
# Enable new architecture for Android | |
cd android || exit | |
sed -i '' 's/newArchEnabled=false/newArchEnabled=true/g' gradle.properties | |
cd .. | |
echo -e "\n${Blue}Installing pods and rebuilding iOS project...${Color_Off}}" | |
# Install pods and rebuild projects | |
npx pod-install | |
echo -e "\n${Blue}Syncing Gradle and rebuilding Android project...${Color_Off}}" | |
# Sync Gradle and rebuild projects | |
cd android || exit | |
./gradlew clean | |
cd .. | |
if ! $no_expo; then | |
echo -e "\n${Blue}Starting Expo...${Color_Off}" | |
yarn start | |
else | |
echo -e "\n${Blue}Skipping Expo start. You can run 'yarn start' manually later if needed.${Color_Off}}" | |
fi | |
echo -e "\n${Blue}Project setup completed successfully!${Color_Off}" | |
code . |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I use a bare project with Expo installed because I'm more used to having the granular access having been an RN dev since 2016. I can use a standard Expo project without issue, but I do prefer it this way.