1
2
3
4
5
6
7
8
9
# Install React Native CLI globally
npm install -g react-native-cli

# Create a new project
npx react-native init MyProject

# Or using Expo CLI
npx create-expo-app MyProject

1
2
3
4
5
6
7
# Add to ~/.bash_profile or ~/.zshrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulators
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

1
2
3
4
5
6
7
8
9
10
11
import { View, Text, Image, ScrollView } from 'react-native';

// View: Container component (like div)
<View style={styles.container}>
  <Text>Hello React Native!</Text>
</View>

// ScrollView: Scrollable container
<ScrollView>
  {items.map(item => <ItemComponent key={item.id} />)}
</ScrollView>

// FlatList: Efficient list rendering
<FlatList
  data={items}
  renderItem={({item}) => <ItemComponent item={item} />}
  keyExtractor={item => item.id}
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { StyleSheet, Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Platform.OS === 'ios' ? 'white' : 'blue'
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black'
  }
});

1
2
3
4
5
6
7
8
9
const styles = StyleSheet.create({
  container: {
    flex: 1,                  // Take full available space
    flexDirection: 'column',  // Main axis vertical
    justifyContent: 'center', // Center vertically
    alignItems: 'center'      // Center horizontally
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

1
2
3
4
5
6
7
8
9
10
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button 
        title="Increment" 
        onPress={() => setCount(count + 1)} 
      />
    </View>
  );
}

1
2
3
4
5
6
7
8
9
10
const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
  const [isDarkMode, setIsDarkMode] = useState(false);
  
  return (
    <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Platform, StatusBar } from 'react-native';

// Conditional rendering
const styles = {
  container: Platform.select({
    ios: { paddingTop: 30 },
    android: { paddingTop: StatusBar.currentHeight }
  })
};

// Platform-specific code
if (Platform.OS === 'ios') {
  // iOS-specific implementation
} else if (Platform.OS === 'android') {
  // Android-specific implementation
}

1
2
3
4
5
6
7
8
9
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

const openCamera = () => {
  launchCamera({ mediaType: 'photo' }, (response) => {
    if (response.didCancel) return;
    // Handle selected image
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    setData(json);
  } catch (error) {
    console.error(error);
  }
};

// Using Axios
import axios from 'axios';
const fetchWithAxios = async () => {
  try {
    const { data } = await axios.get('https://api.example.com/data');
    setData(data);
  } catch (error) {
    console.error(error);
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import AsyncStorage from '@react-native-async-storage/async-storage';

// Store data
const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error(error);
  }
};

// Retrieve data
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value != null ? JSON.parse(value) : null;
  } catch (error) {
    console.error(error);
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Animated, Easing } from 'react-native';

function AnimatedComponent() {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>Fading View</Text>
    </Animated.View>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { PanGestureHandler, State } from 'react-native-gesture-handler';

function GestureComponent() {
  const dragHandler = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      // Handle drag gesture
    }
  };

  return (
    <PanGestureHandler onGestureEvent={dragHandler}>
      <View>...</View>
    </PanGestureHandler>
  );
}

1
2
3
4
5
6
# Install testing libraries
npm install --save-dev jest @testing-library/react-native detox

# Run tests
npm test

1
2
3
4
# Generate signed APK
cd android
./gradlew bundleRelease

1
2
3
# Build for App Store
xcodebuild -workspace MyApp.xcworkspace -scheme MyApp archive

1
2
3
4
5
6
7
8
9
10
11
import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled = /* check permission status */;
}

messaging().onMessage(async remoteMessage => {
  // Handle foreground messages
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { PermissionsAndroid, Platform } from 'react-native';

const requestCameraPermission = async () => {
  if (Platform.OS === 'android') {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA
      );
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    } catch (err) {
      console.warn(err);
      return false;
    }
  }
  return true;
};