How to bundle/export a git repo as a single file without losing the git history

Princewill Iroka — Sat, 22 May 2021 13:54:28 +0000

Sometimes, you need to export and send a git repository to someone for code review.
In such cases, you may not have the option of adding the person to the repository as a collaborator on Github, Gitlab, Bitbucket or any other git-based version control platform.
You can use these steps to export the git repo as a single file:

Clone the repo if you haven't already done so:

git clone reponame

Inside the root directory of the project, bundle the repo by running this from the command line:

git bundle create reponame.bundle --all

Note: This will bundle all the branches in the repo in a repo.bundle file that can be easily sent to someone.

Use this to bundle only the main branch:

git bundle create reponame.bundle main

When the person receives the file, the person can unbundle it using this command:

git clone reponame.bundle

Note: Ensure to delete the node_modules folder before bundling your repo

For more info on bundling Git repos, read this Stackoverflow question or the official Git docs

How to add SplashScreen to a ReactNative app with react-native-bootsplash

Princewill Iroka — Sat, 05 Dec 2020 20:30:30 +0000

In this article, I'll show you how to easily add a splash screen to a react-native app using react-native-bootsplash library. As at the time of writing this, I found it to be a better option than react-native-splash-screen.

Firstly, if you don't have a running ReactNative app, you can create one by simply running this command npx react-native init MyTestApp

After creating your project, open the terminal and install the library with any of these commands:

$ npm install --save react-native-bootsplash
# --- or ---
$ yarn add react-native-bootsplash

I assume you're using React Native 0.60.0+, so I'm not going to talk about Manual linking or Pod linking here.

Next step is to add a logo(image) that will be displayed on the splash screen.

In the root folder, you can create an assets folder where you'll keep your logo and other images too.

Use this command to generate the necessary Android & iOS assets from your logo.

npx react-native generate-bootsplash ./path-to-your-logo-in-assets-folder

iOS
Edit the ios/YourProjectName/AppDelegate.m file:

To import your header, add this line

#import "RNBootSplash.h"

immediately after the

#import <React/RCTRootView.h>

Then, inside the didFinishLaunchingWithOptions block, add this line:

[RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

before the

return YES;

statement to do the initialization using the storyboard file name.

Lastly, ensure to set the BootSplash.storyboard as launch screen file.

Android
Step 1
Edit the android/app/src/main/java/com/yourprojectname/MainActivity.java file:

Firstly, immediately after the package declaration add this line:

import android.os.Bundle;

Next is to import RNBootSplash, immediately after importing React

import com.zoontek.rnbootsplash.RNBootSplash;

Then, add the onCreate method, where we'll display the generated bootsplash.xml drawable over the MainActivity:

@Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    RNBootSplash.init(R.drawable.bootsplash, MainActivity.this);
  }

Step 2
Edit the android/app/src/main/res/values/styles.xml file:
Set the generated bootsplash.xml drawable as activity background

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Step 3
Edit the android/app/src/main/AndroidManifest.xml file:
Remove the intent-filter tag from .MainActivity and use the .RNBootSplashActivity theme you created.
That means, you'll have this inside application tag:

<activity android:name=".MainActivity" 
  android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize"></activity>
<activity android:name="SomeOtherActivity></activity>
<activity
  android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
  android:theme="@style/BootTheme"
  android:launchMode="singleTask">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category 
      android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>

Note:
On Android, if you get an error like this Security exception: Permission Denial: starting Intent { com.app_name/.MainActivity....

You should go back to your AndroidManifest.xml file and add android:exported="true" as one of the parameters to your .MainActivity tag.
Then delete the .gradle folder inside android folder, open your terminal, run

cd android

and

gradlew clean

Step 4
Go to your App.js and

import RNBootSplash from 'react-native-bootsplash';

Then if you're using functional components, your useEffect hook may look like this:

useEffect(() => {
    // Hide SplashScreen after 3secs or Make an async task
    setTimeout(() => {
      RNBootSplash.hide({ fade: true });
    }, 3000);
  }, []);

Step 5
Enjoy your splash screen. 😄

DEV Community: Princewill Iroka

How to bundle/export a git repo as a single file without losing the git history

How to add SplashScreen to a ReactNative app with react-native-bootsplash