Working with Custom Native Code

export default function configPlugin(config) {
  // Modify the config object
  config.android.permissions = ['CAMERA', 'RECORD_AUDIO'];
  config.ios.infoPlist.NSCameraUsageDescription = 'This app uses the camera to take photos.';
  return config;
}

export default function conditionalPlugin(config, { platform }) {
  if (platform === 'android') {
    config.android.permissions.push('ACCESS_FINE_LOCATION');
  }
  return config;
}

import { requireNativeModule } from 'expo-modules-core';

const MyModule = requireNativeModule('MyModule');

export function getDeviceName() {
  return MyModule.getDeviceName();
}

expo prebuild

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.CAMERA" />
</manifest>

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to scan QR codes.</string>

import ExpoModulesCore

public struct MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")
    
    Function("getValue") { () -> String in
      return "Hello from native module!"
    }
  }
}

package com.example.mymodule

import expo.modules.core.ModuleDefinition
import expo.modules.core.functions.Promise

class MyModule : Module() {
  fun definition() = ModuleDefinition {
    Name("MyModule")
    
    Function("getValue") { promise: Promise ->
      promise.resolve("Hello from native module!")
    }
  }
}

{
  "name": "expo-module-config",
  "version": "1.0.0",
  "platforms": [
    "ios",
    "android"
  ],
  "config": {}
}

// Example of a simple native view implementation in React Native
import { requireNativeComponent } from 'react-native';

const NativeView = requireNativeComponent('NativeView');

export default function App() {
  return (
    <NativeView style={{ flex: 1 }} />
  );
}

import { NativeModules } from 'react-native';<br><br>const { MyNativeModule } = NativeModules;<br><br>async function callNativeMethod() {<br>&nbsp;&nbsp;const result = await MyNativeModule.fetchData();<br>&nbsp;&nbsp;console.log(result);<br>}

expo build --platform native --watch

import { Camera } from 'expo-camera';

export default function CameraExample() {
  const [cameraPermission, setCameraPermission] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setCameraPermission(status === 'granted');
    })();
  }, []);

  if (cameraPermission === null) return <View />;
  if (cameraPermission === false) return <Text>Access denied</Text>;

  return (
    <Camera style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: 'transparent' }}>
        <Button title="Take Photo" onPress={handleCapture} />
      </View>
    </Camera>
  );
}

npx expo install expo@latest

npx expo run:android
npx expo run:ios

export default function configPlugin(config) {
  return {
    name: 'my-config-plugin',
    async configure(projectConfig) {
      // Modify project config here
      return projectConfig;
    }
  };
}

export default function androidPermissionPlugin(config) {
  return {
    name: 'android-permission-plugin',
    async configure(projectConfig) {
      if (projectConfig.android) {
        projectConfig.android.permissions = [
          ...projectConfig.android.permissions,
          'android.permission.CAMERA'
        ];
      }
      return projectConfig;
    }
  };
}