React Native Basics

React Native allows you to build real native apps using JavaScript.

1. Core Components

Component	Usage
View	Container (div)
Text	Typography (span/p)
Image	Media (img)
ScrollView	Scrollable container
TextInput	Input fields

2. Layout (Flexbox)

React Native uses Flexbox. Default direction is Column.

Main Axis: Vertical by default. Align with justifyContent.
Cross Axis: Horizontal by default. Align with alignItems.

3. Responsive Design

Screens come in all sizes. Do not use fixed pixels for everything.

Percentage Width

Jsx

<View style={{ width: '100%', height: 200 }} />

`useWindowDimensions`

Get the screen size dynamically.

Jsx

import { useWindowDimensions } from 'react-native';

const ResponsiveBox = () => {
  const { width, height } = useWindowDimensions();
  
  return <View style={{ width: width * 0.9 }} />; // 90% of screen width
};

4. Handling Touches

The old way was TouchableOpacity. The modern way is Pressable.

Jsx

import { Pressable, Text } from 'react-native';

### Our Custom Button
We wrap `Pressable` to add variants and loading states.

```tsx
// src/ui/components/button.tsx - [Source: mobileLauncherStandard]
export const Button = ({ title, onPress, loading, variant = "primary" }) => {
  return (
    <Pressable onPress={onPress} disabled={loading}>
        <Box 
            backgroundColor={variant === "primary" ? "primary" : "transparent"}
            padding="m"
            borderRadius="md"
        >
            {loading ? <ActivityIndicator /> : (
                <Text color="white">{title}</Text>
            )}
        </Box>
    </Pressable>
  );
};

5. Animations

React Native has a built-in Animated API for performant animations.

Jsx

import { useRef, useEffect } from 'react';
import { Animated } from 'react-native';

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value: 0

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true, // Run on UI thread (smoother)
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View style={{ ...props.style, opacity: fadeAnim }}>
      {props.children}
    </Animated.View>
  );
};

6. Platform Specific Code

Javascript

import { Platform } from 'react-native';

const headerHeight = Platform.select({
  ios: 44,
  android: 56,
  default: 50,
});

Summary Checklist

Use View and Text correctly
Master Flexbox layout
Handle touches with Pressable
Create a simple animation

7. Boilerplate Components

We use custom wrappers for consistency.

Custom Input

Tsx

// src/ui/components/input.tsx - [Source: mobileLauncherStandard]
export const Input = forwardRef(({ label, error, ...props }, ref) => {
  const { theme } = useTheme();
  
  return (
    <Box>
      {label && <Text variant="label">{label}</Text>}
      
      <Box 
        borderWidth={1} 
        borderColor={error ? "error" : "border"} 
      >
        <TextInput 
            {...props} 
            placeholderTextColor={theme.colors.textTertiary}
        />
      </Box>
      
      {error && <Text color="error">{error}</Text>}
    </Box>
  );
});

React Native Basics

On this page