React Native Refresher

If you already know React, diving into React Native is a breeze. With React Native, you can leverage your existing knowledge and skills to build powerful mobile apps for iOS and Android. In this refresher, we'll walk through a simple example to demonstrate how React Native works and how easy it is to get started if you already know React.

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
 
const CounterApp = () => {
  const [count, setCount] = useState(0);
 
  const incrementCount = () => {
    setCount(count + 1);
  };
 
  const decrementCount = () => {
    setCount(count - 1);
  };
 
  return (
    <View style={styles.container}> {/*  <--- reference style */}
      <Text style={{fontSize: 24}}>Welcome to counter app</Text> {/*  <--- inline style, just like React */}
      <Text style={styles.text}>Count: {count}</Text>
      <Button title="Increment" onPress={incrementCount} />
      <Button title="Decrement" onPress={decrementCount} />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    marginBottom: 10,
  },
});
 
export default CounterApp;

Looks familiar? Except for the StyleSheet part, it's essentially pretty much the React you already know.

• StyleSheet is equivalent to css and it's what you use to style your components in React Native. You position your components with flexbox (learn more about layout with flexbox (opens in a new tab)). And use properties like color, backgroundColor, padding, margin etc to decorate. React Native does not support all css properties. You can see all supported properties here (opens in a new tab).
• React Native has some built-in components.
  • View (it's like div)
  • Text (all texts must be in Text component),
  • Button (View and Text do not have onPress prop),
  • FlatList (to make lists/grids) etc. Learn more about built-in React Native components (opens in a new tab).

That's enough to get you started!