@sekizlipenguen/react-native-splash-helper 0.0.1

package/README.md

@@ -0,0 +1,158 @@
+![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat-square&colorB=191A17)
+[![npm](https://img.shields.io/npm/v/@sekizlipenguen/react-native-splash-helper.svg?style=flat-square)](https://www.npmjs.com/package/@sekizlipenguen/react-native-splash-helper)
+[![npm](https://img.shields.io/npm/dm/@sekizlipenguen/react-native-splash-helper.svg?style=flat-square&colorB=007ec6)](https://www.npmjs.com/package/@sekizlipenguen/react-native-splash-helper)
+
+
+# @sekizlipenguen/react-native-splash-helper
+
+A lightweight React Native library to automatically configure splash screens for both Android and iOS platforms. Simplifies the splash screen setup process for developers.
+
+## Features
+
+- **Automatic Splash Screen Setup**: Configures splash screens for both Android and iOS with minimal setup.
+- **Theme Detection**: Automatically detects application and activity themes in `AndroidManifest.xml`.
+- **Cross-Platform Support**: Works seamlessly on macOS, Linux, and Windows.
+- **Customizable**: Easily define splash image and background color through a simple configuration.
+
+---
+
+## Installation
+
+Install the library using Yarn or npm:
+
+YARN
+```bash
+yarn add @sekizlipenguen/react-native-splash-helper --dev
+```
+NPM
+```bash
+npm install @sekizlipenguen/react-native-splash-helper --save-dev
+```
+
+
+> Note: The `xml2js` package is included as a dependency and used internally.
+
+---
+
+## Configuration
+
+### Configuration Options
+
+| Option                  | Platform | Type     | Description                                                            |
+|-------------------------|----------|----------|------------------------------------------------------------------------|
+| `splashImage`           | Both     | `string` | Path to the splash image file.                                         |
+| `backgroundColor`       | Android  | `string` | Background color in HEX format (e.g., `#ffffff`).                      |
+
+To configure the splash helper, add a section to your `react-native.config.js` file:
+
+```javascript
+module.exports = {
+  dependencies: {},
+  '@sekizlipenguen/react-native-splash-helper': {
+    android: {
+      splashImage: './assets/splash_image.png' // Path to your splash image
+    },
+    ios: {
+      splashImage: './assets/splash_image.png'  // Path to your splash image
+    }
+  }
+};
+```
+
+---
+
+## Usage
+
+Run the following command to generate the splash screens:
+
+```bash
+npx @sekizlipenguen/react-native-splash-helper generate-splash
+```
+
+---
+
+## What It Does
+
+1. **Android**:
+
+    - Updates `styles.xml` to include the `android:windowBackground` property for detected themes.
+    - Updates or creates `colors.xml` with the specified background color.
+    - Generates the drawable resource for the splash screen.
+    - Updates the `AndroidManifest.xml` to ensure consistency in theme configuration.
+
+2. **iOS**:
+
+    - Updates the `LaunchScreen.storyboard` file with the splash image and background color.
+    - Creates the necessary image assets in the `Images.xcassets` directory.
+
+---
+
+## Example
+
+### Android Output
+
+- Updates the following in `styles.xml`:
+  ```xml
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+      <item name="android:windowBackground">@drawable/splash_background</item>
+  </style>
+  ```
+- Updates or creates `colors.xml`:
+  ```xml
+  <resources>
+      <color name="splash_background">#ffffff</color>
+  </resources>
+  ```
+- Creates `splash_background.xml` in `drawable`:
+  ```xml
+  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+      <item android:drawable="@color/splash_background" />
+      <item>
+          <bitmap android:gravity="fill" android:src="@drawable/splash_image" />
+      </item>
+  </layer-list>
+  ```
+
+### iOS Output
+
+- Updates `LaunchScreen.storyboard` with:
+  ```xml
+  <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" ...>
+      <scene>
+          ...
+          <view key="view" contentMode="scaleToFill">
+              <color key="backgroundColor" systemColor="systemBackgroundColor" />
+              <subviews>
+                  <imageView contentMode="scaleAspectFill" image="splash_image" ... />
+              </subviews>
+          </view>
+      </scene>
+  </document>
+  ```
+
+---
+
+## Screenshots
+
+###  Splash Screen Example
+![Android Splash Screen](assets/splash_1.webp)
+---
+
+## Notes
+
+- Make sure your splash image is available at the specified path.
+- If any required file (e.g., `styles.xml`, `colors.xml`) does not exist, it will be created automatically.
+- The script is non-destructive and will not overwrite existing configurations unless necessary.
+
+---
+
+## Contributing
+
+Contributions are welcome! Please submit an issue or pull request on the [GitHub repository](https://github.com/sekizlipenguen/react-native-splash-helper).
+
+---
+
+## License
+
+MIT © [Sekizli Penguen](https://github.com/sekizlipenguen)
+

package/bin/react-native-splash-helper

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+const path = require('path');
+const generateSplash = require(path.join(__dirname, '../scripts/generateSplash'));
+
+generateSplash();

package/index.d.ts

@@ -0,0 +1,27 @@
+// Splash konfigürasyonu tiplerini tanımlıyoruz
+export interface AndroidConfig {
+    backgroundColor: string; // Hex renk kodu (#FFFFFF gibi)
+    splashImage: string; // Splash görselinin yolu
+}
+
+export interface IOSConfig {
+    backgroundColor: string; // Hex renk kodu
+    splashImage: string; // Splash görselinin yolu
+}
+
+export interface SplashConfig {
+    android?: AndroidConfig;
+    ios?: IOSConfig;
+}
+
+// Komut tipi
+export interface Command {
+    name: string; // Komutun adı
+    description: string; // Komut açıklaması
+    func: (config?: SplashConfig) => void; // Komutun çalıştırdığı fonksiyon
+}
+
+// Modül tanımı
+declare const commands: Command[];
+
+export default commands;

package/index.js

@@ -0,0 +1,11 @@
+const generateSplash = require('./scripts/generateSplash');
+
+module.exports = {
+  commands: [
+    {
+      name: 'generate-splash',
+      description: 'Generates splash screen assets for iOS and Android',
+      func: generateSplash,
+    },
+  ],
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sekizlipenguen/react-native-splash-helper",
+  "version": "0.0.1",
+  "description": "A lightweight React Native library to automatically configure splash screens for both Android and iOS platforms. Simplifies the splash screen setup process for React Native developers.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "author": "Sekizli Penguen (https://github.com/sekizlipenguen)",
+  "license": "MIT",
+  "homepage": "https://github.com/sekizlipenguen/react-native-splash-helper#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sekizlipenguen/react-native-splash-helper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sekizlipenguen/react-native-splash-helper/issues"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.60"
+  },
+  "dependencies": {
+    "xml2js": "^0.4.23"
+  },
+  "scripts": {
+    "postinstall": "node scripts/cleanBin.js"
+  },
+  "bin": {
+    "@sekizlipenguen/react-native-splash-helper": "./bin/react-native-splash-helper"
+  },
+  "keywords": [
+    "react-native",
+    "splash-screen",
+    "react-native-splash",
+    "android-splash-screen",
+    "ios-splash-screen",
+    "react-native-library",
+    "native-module",
+    "automated-splash-screen",
+    "react-native-splash-helper"
+  ]
+}

package/scripts/cleanBin.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Bin dizinindeki dosyanın yolunu belirle
+const binPath = path.join(process.cwd(), 'node_modules/.bin/react-native-splash-helper');
+
+try {
+  // Eğer dosya mevcutsa, önce sil
+  if (fs.existsSync(binPath)) {
+    fs.unlinkSync(binPath);
+    console.log('Removed old bin file: react-native-splash-helper');
+  }
+
+  // Yeni dosya oluşturulmadan önce izinleri ayarla
+  const newBinPath = path.join(process.cwd(), 'bin/react-native-splash-helper');
+  if (fs.existsSync(newBinPath)) {
+    // Yeni dosya kopyalanmadan önce izinleri kontrol et ve düzenle
+    execSync(`chmod +x ${newBinPath}`);
+    console.log('Updated permissions for: react-native-splash-helper');
+  }
+} catch (error) {
+  console.error(`Error during cleanBin operation: ${error.message}`);
+}

package/scripts/generateSplash.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+const updateStyles = require('./updateStyles');
+const updateStoryboard = require('./updateStoryboard');
+
+async function generateSplash() {
+  console.log('Generating splash screens...');
+
+  try {
+    // React Native config dosyasını yükle
+    const config = require(`${process.cwd()}/react-native.config.js`)['@sekizlipenguen/react-native-splash-helper'];
+
+    if (!config) {
+      console.error(
+          'Splash configuration not found in react-native.config.js. Please add the required configuration.'
+      );
+      process.exit(1);
+    }
+
+    // Android işlemleri
+    if (config.android) {
+      try {
+        await updateStyles(config.android); // Android için splash ekranını oluştur
+        console.log('Android splash screen setup completed.');
+      } catch (error) {
+        console.error('Error generating Android splash screen:', error.message);
+      }
+    } else {
+      console.log('No Android configuration found. Skipping Android splash screen setup.');
+    }
+
+    // iOS işlemleri
+    if (config.ios) {
+      try {
+        updateStoryboard(config.ios); // iOS için splash ekranını oluştur
+        console.log('iOS splash screen setup completed.');
+      } catch (error) {
+        console.error('Error generating iOS splash screen:', error.message);
+      }
+    } else {
+      console.log('No iOS configuration found. Skipping iOS splash screen setup.');
+    }
+
+    console.log('Splash screens have been successfully generated!');
+  } catch (error) {
+    console.error('Error during splash screen generation:', error.message);
+    process.exit(1);
+  }
+}
+
+module.exports = generateSplash;

package/scripts/updateStoryboard.js

@@ -0,0 +1,97 @@
+const fs = require('fs');
+const path = require('path');
+
+function updateStoryboard(iosConfig) {
+  const iosAppName = fs
+  .readdirSync(path.join(process.cwd(), 'ios'))
+  .find((dir) => fs.existsSync(path.join(process.cwd(), 'ios', dir, 'Info.plist')));
+
+  if (!iosAppName) {
+    console.error('iOS app name could not be resolved.');
+    return;
+  }
+
+  const storyboardPath = path.join(process.cwd(), `ios/${iosAppName}/LaunchScreen.storyboard`);
+  const assetsPath = path.join(process.cwd(), `ios/${iosAppName}/Images.xcassets`);
+  const splashImagePath = path.join(assetsPath, 'splash_image.imageset');
+
+  // Assets ve splash image için dizinler oluşturuluyor
+  if (!fs.existsSync(assetsPath)) {
+    fs.mkdirSync(assetsPath, { recursive: true });
+  }
+  if (!fs.existsSync(splashImagePath)) {
+    fs.mkdirSync(splashImagePath, { recursive: true });
+  }
+
+  // Splash görseli kopyalanıyor
+  const splashImageSource = path.resolve(iosConfig.splashImage);
+  const splashImageTarget = path.join(splashImagePath, 'splash_image.png');
+  fs.copyFileSync(splashImageSource, splashImageTarget);
+
+  // Contents.json dosyasını oluştur
+  const contentsJson = {
+    images: [
+      { idiom: 'universal', filename: 'splash_image.png', scale: '1x' },
+      { idiom: 'universal', filename: 'splash_image.png', scale: '2x' },
+      { idiom: 'universal', filename: 'splash_image.png', scale: '3x' },
+    ],
+    info: { version: 1, author: 'xcode' },
+  };
+  fs.writeFileSync(
+      path.join(splashImagePath, 'Contents.json'),
+      JSON.stringify(contentsJson, null, 2),
+      'utf8'
+  );
+
+  // Storyboard içeriği
+  const storyboardContent = `<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="23504" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23506"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash_image" translatesAutoresizingMaskIntoConstraints="NO" id="img-splash">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                            </imageView>
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="jCx-lo-f50"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                        <constraints>
+                            <constraint firstItem="img-splash" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="bottom-constraint"/>
+                            <constraint firstItem="img-splash" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="leading-constraint"/>
+                            <constraint firstItem="img-splash" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="top-constraint"/>
+                            <constraint firstItem="img-splash" firstAttribute="trailing" secondItem="Ze5-6b-2t3" secondAttribute="trailing" id="trailing-constraint"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="52.173913043478265" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="splash_image" width="645" height="1398"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>`;
+
+  fs.writeFileSync(storyboardPath, storyboardContent, 'utf8');
+  console.log('LaunchScreen.storyboard updated successfully.');
+}
+
+module.exports = updateStoryboard;

package/scripts/updateStyles.js

@@ -0,0 +1,125 @@
+const fs = require('fs');
+const path = require('path');
+const { parseStringPromise, Builder } = require('xml2js');
+
+async function updateStyles(androidConfig) {
+  const stylesPath = path.join(process.cwd(), 'android/app/src/main/res/values/styles.xml');
+  const colorsPath = path.join(process.cwd(), 'android/app/src/main/res/values/colors.xml');
+  const manifestPath = path.join(process.cwd(), 'android/app/src/main/AndroidManifest.xml');
+  const drawablePath = path.join(process.cwd(), 'android/app/src/main/res/drawable');
+  const splashImageSource = path.resolve(androidConfig.splashImage);
+
+  // ** Retrieve theme name from AndroidManifest.xml **
+  if (!fs.existsSync(manifestPath)) {
+    console.error('AndroidManifest.xml not found. Please check the path.');
+    return;
+  }
+
+  const manifestContent = fs.readFileSync(manifestPath, 'utf8');
+  const manifestJson = await parseStringPromise(manifestContent);
+
+  const applicationNode = manifestJson.manifest.application[0];
+  const themeAttribute = applicationNode.$['android:theme'];
+  const mainActivityNode = applicationNode.activity.find(
+      (activity) => activity.$['android:name'] === '.MainActivity'
+  );
+
+  if (!themeAttribute) {
+    console.error('No theme found in AndroidManifest.xml at the application level.');
+    return;
+  }
+
+  const appThemeName = themeAttribute.replace('@style/', '');
+  console.log(`Using application theme: ${appThemeName}`);
+
+  let mainActivityThemeName = null;
+  if (mainActivityNode && mainActivityNode.$['android:theme']) {
+    mainActivityThemeName = mainActivityNode.$['android:theme'].replace('@style/', '');
+    console.log(`Using MainActivity theme: ${mainActivityThemeName}`);
+  }
+
+  const themeNames = [appThemeName, mainActivityThemeName].filter(Boolean);
+
+  // ** Update styles.xml **
+  if (fs.existsSync(stylesPath)) {
+    const stylesContent = fs.readFileSync(stylesPath, 'utf8');
+    const stylesJson = await parseStringPromise(stylesContent);
+
+    themeNames.forEach((themeName) => {
+      const appTheme = stylesJson.resources.style.find((style) => style.$.name === themeName);
+      if (appTheme && !appTheme.item.some((item) => item.$.name === 'android:windowBackground')) {
+        appTheme.item.push({ $: { name: 'android:windowBackground' }, _: '@drawable/splash_background' });
+        console.log(`Added android:windowBackground to theme: ${themeName}`);
+      }
+    });
+
+    const updatedStylesContent = new Builder().buildObject(stylesJson);
+    fs.writeFileSync(stylesPath, updatedStylesContent, 'utf8');
+    console.log('styles.xml updated.');
+  } else {
+    console.error('styles.xml not found. Please check the path.');
+    return;
+  }
+
+  // ** Update colors.xml **
+  let colorsJson;
+  if (fs.existsSync(colorsPath)) {
+    const colorsContent = fs.readFileSync(colorsPath, 'utf8') || '<resources></resources>';
+    colorsJson = await parseStringPromise(colorsContent);
+
+    if (typeof colorsJson.resources === 'string') {
+      colorsJson.resources = {};
+    }
+
+    if (!colorsJson.resources.color) {
+      colorsJson.resources.color = [];
+    }
+
+    const splashColor = colorsJson.resources.color.find((color) => color.$.name === 'splash_background');
+    if (splashColor) {
+      splashColor._ = androidConfig.backgroundColor;
+    } else {
+      colorsJson.resources.color.push({
+        $: { name: 'splash_background' },
+        _: androidConfig.backgroundColor,
+      });
+    }
+  } else {
+    console.log('colors.xml not found. Creating a new colors.xml file.');
+    colorsJson = {
+      resources: {
+        color: [
+          {
+            $: { name: 'splash_background' },
+            _: androidConfig.backgroundColor,
+          },
+        ],
+      },
+    };
+  }
+
+  const updatedColorsContent = new Builder().buildObject(colorsJson);
+  fs.writeFileSync(colorsPath, updatedColorsContent, 'utf8');
+  console.log('colors.xml created or updated.');
+
+  // ** Update Drawable Splash **
+  if (!fs.existsSync(drawablePath)) {
+    fs.mkdirSync(drawablePath, { recursive: true });
+  }
+
+  const splashDrawableContent = `
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splash_background" />
+  <item>
+    <bitmap android:gravity="fill" android:src="@drawable/splash_image" />
+  </item>
+</layer-list>
+`;
+
+  const splashImageTarget = path.join(drawablePath, 'splash_image.png');
+  fs.copyFileSync(splashImageSource, splashImageTarget);
+  fs.writeFileSync(path.join(drawablePath, 'splash_background.xml'), splashDrawableContent, 'utf8');
+  console.log('Drawable splash resources updated.');
+}
+
+module.exports = updateStyles;