Steldev

import Main from './components/Main';

function App() {
  return (
    <div className='App'>
      <Main />
    </div>
  );
}

Steldev

import React, {memo, useState, useCallback, InputHTMLAttributes} from 'react';
import Profile from '../../../shared/src/components/Profile';

const Main: React.FC = () => {
  const [name, setName] = useState<string>('');
  const [id, setId] = useState<string>('');

  const onNameChanged = useCallback<
    NonNullable<InputHTMLAttributes<HTMLInputElement>['onChange']>
  >((event) => setName(event.target.value), []);

Steldev

import Profile, {ProfileProps} from '../shared/src/components/Profile';

const profileMock: ProfileProps = {name: 'John Doe', id: '123456'};

const App = () => (
  <SafeAreaView>
    <Profile {...profileMock} />
  </SafeAreaView>
);

Steldev

import React from 'react';
import {View, Text} from 'react-native';

export interface ProfileProps {
  name: string;
  id: string;
}

const Profile: React.FC<ProfileProps> = ({name, id}) => (
  <View>

Steldev

# dependencies
**/node_modules/
**/.pnp
**/.pnp.js

# env
**/.env

# production
**/build/

Steldev

const path = require('path');
const {
  override,
  babelInclude,
  addBabelPlugins,
  removeModuleScopePlugin,
  addWebpackModuleRule,
} = require('customize-cra');

module.exports = override(

Steldev

. . .
const path = require('path');

module.exports = {
  projectRoot: path.resolve(__dirname, '../'),
  . . .
};
. . .

Steldev

. . .
@Override
protected String getJSMainModuleName() {
  return "app/index";
}
. . .

Steldev

. . .
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"app/index" fallbackResource:nil];
#else
. . .

Steldev

. . .
project.ext.react = [
  enableHermes: false,
  entryFile: "app/index.js",
  root: "../../../",
  cliPath: '../../../node_modules/react-native/cli.js'
]

apply from: "../../../node_modules/react-native/react.gradle"
. . .