React Native Native Modules (Android)

In this blog, you can create the LoginActivity and SignupActivity in Java, then expose them to React Native using a native module.

Step 1: Create the Native Android Login and Signup Screens

1. Login Screen Layout (activity_login.xml): In android/app/src/main/res/layout, create activity_login.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login" />
</LinearLayout>

2-Signup Screen Layout (activity_signup.xml): Create another layout for the signup screen:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/signup_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sign Up" />
</LinearLayout>

3-Create LoginActivity: In android/app/src/main/java/com/yourprojectname/nativeauth, create LoginActivity.java:

package com.yourprojectname.nativeauth;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class LoginActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        EditText usernameEditText = findViewById(R.id.username);
        EditText passwordEditText = findViewById(R.id.password);
        Button loginButton = findViewById(R.id.login_button);

        loginButton.setOnClickListener(view -> {
            String username = usernameEditText.getText().toString();
            String password = passwordEditText.getText().toString();

            if (username.equals("user") && password.equals("pass")) {
                Toast.makeText(this, "Login Successful", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(this, "Invalid Credentials", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

4- Create SignupActivity: In android/app/src/main/java/com/yourprojectname/nativeauth, create SignupActivity.java:

package com.yourprojectname.nativeauth;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class SignupActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_signup);

        EditText emailEditText = findViewById(R.id.email);
        EditText passwordEditText = findViewById(R.id.password);
        Button signupButton = findViewById(R.id.signup_button);

        signupButton.setOnClickListener(view -> {
            String email = emailEditText.getText().toString();
            String password = passwordEditText.getText().toString();

            // You would add real sign-up logic here.
            if (!email.isEmpty() && !password.isEmpty()) {
                Toast.makeText(this, "Sign Up Successful", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(this, "Fill all fields", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Step 2: Expose Native Module to React Native

1. Create AuthModule.java: In android/app/src/main/java/com/yourprojectname/nativeauth, create AuthModule.java:

package com.yourprojectname.nativeauth;

import android.content.Intent;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class AuthModule extends ReactContextBaseJavaModule {

    public AuthModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "AuthModule";
    }

    @ReactMethod
    public void openLogin() {
        ReactApplicationContext context = getReactApplicationContext();
        Intent intent = new Intent(context, LoginActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        context.startActivity(intent);
    }

    @ReactMethod
    public void openSignup() {
        ReactApplicationContext context = getReactApplicationContext();
        Intent intent = new Intent(context, SignupActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        context.startActivity(intent);
    }
}

2-Create AuthPackage.java: In android/app/src/main/java/com/yourprojectname/nativeauth, create AuthPackage.java:

package com.yourprojectname.nativeauth;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class AuthPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new AuthModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Step 3: Connect Module in MainApplication.java

1. Update MainApplication.java: In android/app/src/main/java/com/yourprojectname/, open MainApplication.java and add your AuthPackage.

import com.yourprojectname.nativeauth.AuthPackage; // Add this line

public class MainApplication extends Application implements ReactApplication {

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new AuthPackage()  // Add this line
        );
    }
}

Step 4: Update AndroidManifest.xml

In android/app/src/main/AndroidManifest.xml, add your LoginActivity and SignupActivity under the <application> tag:

<application
    ...>
    <activity android:name=".nativeauth.LoginActivity" />
    <activity android:name=".nativeauth.SignupActivity" />
</application>

Step 5: Use Native Module in React Native

Now, from your React Native JavaScript code, you can invoke the native Android activities.

1. Import Native Module:

import { NativeModules } from 'react-native';
const { AuthModule } = NativeModules;

2-Open Login and Signup Screens:

// Call this to open login screen
const openLogin = () => {
    AuthModule.openLogin();
};

// Call this to open signup screen
const openSignup = () => {
    AuthModule.openSignup();
};

Step 6: Test Your Application

1. Run your application:

npx react-native run-android

2-Use the buttons or links in your React Native app to trigger openLogin or openSignup, which will open the native Android activities.