JIT
Creating a cross-platform react native app for iOS and Android
Log in
@rushikeshp
i need a app which is able to run on android as well as ios my xcode version is 15.2 and device software version is 15.8.3 so provide me a sample dummy app for ios and android we need a react native cli app instead of expo working code zip file
DeepSeek V3

React Native CLI App for iOS and Android

I'll provide a basic React Native CLI app structure that works on both iOS and Android. This will be a simple app with a welcome screen that you can expand upon.

Project Structure

<project-root>
├── android/ (Android specific files)
├── ios/ (iOS specific files)
├── src/
│   ├── components/
│   │   └── Welcome.js
│   ├── App.js
│   └── index.js
├── package.json
└── babel.config.js

Here's the code for each file:

<project-root>/src/App.js:

import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import Welcome from './components/Welcome';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Welcome />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

export default App;

<project-root>/src/components/Welcome.js:

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

const Welcome = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native!</Text>
      <Text style={styles.subtitle}>This app works on both iOS and Android</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});

export default Welcome;

<project-root>/src/index.js:

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from '../app.json';

AppRegistry.registerComponent(appName, () => App);

<project-root>/babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

Setup Instructions

  1. First, install React Native CLI globally:
npm install -g react-native-cli
  1. Create a new React Native project:
npx react-native init MyApp --version 0.72.0

  1. Replace the contents of the generated files with the code above.

  2. Install dependencies:

cd MyApp
npm install
  1. For iOS:
cd ios && pod install && cd ..
npx react-native run-ios
  1. For Android:
npx react-native run-android

Notes

  1. Make sure you have Xcode 15.2 installed for iOS development
  2. For Android, ensure you have Android Studio with the correct SDKs installed
  3. The app is configured to work with React Native 0.72.0 which is compatible with your target OS versions
  4. You'll need to configure the iOS and Android projects according to your specific needs (app icons, splash screen, etc.)

This is a basic starting point that you can expand with additional screens, navigation, and features as needed. The app will run on both iOS 15.8.3 and Android devices.

@rushikeshp
i create my app but i can't found android and ios folder
DeepSeek V3

Missing Android and iOS Folders in React Native Project

The issue you're experiencing is because you created a React Native project with the new architecture (which doesn't automatically generate these folders) or there was an error during project creation.

Solution

  1. First, make sure you're using the correct command to create your project:
npx react-native init MyApp --version 0.72.0
  1. If you've already created the project and the folders are missing, you can generate them manually:

For Android:

npx react-native eject

For iOS:

npx react-native run-ios

(Just running the iOS command will generate the iOS folder)

Alternative Solution

If you want to ensure you get the full project structure, you can:

  1. Delete your current project
  2. Run this command to create a new one:
npx react-native init MyApp --version 0.72.0 --template react-native-template-typescript
  1. Then check that both android and ios folders are present

Important Notes

  • Make sure you have all required dependencies installed:
    • Node.js (v16+)
    • Java JDK (v11+)
    • Android Studio (for Android)
    • Xcode (for iOS)
  • The android and ios folders should appear immediately after project creation if everything is set up correctly
  • If you're on Windows, you might need to run the commands in Administrator mode

Would you like me to provide more specific troubleshooting steps for your environment?

Preview not available