React Native Overview
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
Key Features
- Cross-Platform: Single codebase for iOS and Android.
- Native Performance: Uses native components.
- Hot Reloading: See changes without recompiling.
- React Knowledge: Leverage existing React skills.
- Community: Large ecosystem of libraries.
- Live Reload: Automatically reload on code changes.
- Flexbox Layout: Familiar CSS-like styling.
Common Use Cases
Cross-Platform Apps
Build for both iOS and Android with one codebase.
Prototyping
Quickly build mobile app prototypes.
Startup MVPs
Launch mobile products quickly.
Enterprise Apps
Internal tools and business apps.
Example Code
// React Native component example
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.text}>Count: {count}</Text>
<Button
title="Increment"
onPress={() => setCount(count + 1)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
marginBottom: 20,
},
});
export default App;
// Navigation example (with React Navigation)
/*
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
*/
// API call example
/*
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(json => setData(json))
.catch(error => console.error(error));
}, []);
*/