React Native Summarised

React Native is a framework for building mobile applications using JavaScript and React. It allows developers to create high-quality, native mobile apps for iOS and Android using the same codebase. Here’s a brief summary of React Native development with some code examples:

Components: Like in React, React Native also relies heavily on components. React Native provides a set of core components like View, Text, and Image, as well as platform-specific components like StatusBar and ActivityIndicator. Here's an example of a basic component in React Native:

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

const App = () => {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
};
export default App;

Styles: React Native provides a StyleSheet API for styling components. This API is similar to CSS, but uses JavaScript objects instead. Here's an example of a styled component in React Native:

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});
const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  );
};
export default App;

Navigation: React Navigation is a popular library for handling navigation in React Native. It provides a simple API for creating stack, tab, and drawer navigators, as well as handling deep linking and custom transitions. Here’s an example of a stack navigator in React Navigation:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
export default App;

API Integration: React Native provides a fetch API for making HTTP requests. It also supports third-party libraries like axios and superagent for more advanced HTTP requests. Here's an example of using fetch in React Native:

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

const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }, []);
  return (
    <View>
      <Text>{data ? data.title : 'Loading...'}</Text>
    </View>
  );
};
export default App;

These are just a few examples of what you can do with React Native. There are many more libraries and APIs available for building mobile apps using React Native.