Essential React Native UI & Interaction Components

React Native provides a powerful set of built-in components for creating native mobile apps. Below is a detailed guide to the core UI and interaction components with practical examples and explanations of their importance.

📦 Core UI Components

1. View

The View component is the fundamental building block for layout. It’s like a div in HTML and is used to group other components.

<View style={{ padding: 20 }}>
  <Text>Hello World!</Text>
</View>

2. Text

Used to display text in your app. You can style it with font size, color, alignment, etc.

<Text style={{ fontSize: 18, color: 'blue' }}>This is a text</Text>

3. Image

Displays images from local or remote sources.

<Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 100, height: 100 }} />

4. ScrollView

Allows scrolling through long content. Useful for vertical layouts that don’t fit the screen.

<ScrollView>
  <Text>Content...</Text>
</ScrollView>

5. FlatList

Efficient way to render lists with performance optimizations.

<FlatList
  data={[{ key: 'Item 1' }, { key: 'Item 2' }]}
  renderItem={({ item }) => <Text>{item.key}</Text>}
/>

6. TextInput

Captures user input like email, password, etc.

<TextInput placeholder="Enter your name" style={{ borderWidth: 1, padding: 10 }} />

7. Button

Triggers actions on press. Simple and native-looking.

<Button title="Click Me" onPress={() => alert('Clicked!')} />

8. Pressable

More flexible touch component with advanced interactions.

<Pressable onPress={() => console.log('Pressed')}>
  <Text>Press here</Text>
</Pressable>

9. Modal

Displays content over the rest of the app. Useful for dialogs and popups.

<Modal visible={true} transparent={true}>
  <View style={{ marginTop: 100 }}>
    <Text>This is a modal</Text>
  </View>
</Modal>

🎯 Interaction Components

1. Alert

Shows a system dialog with messages and actions.

Alert.alert("Warning", "Are you sure?")

2. BackHandler

Handles Android back button presses.

BackHandler.addEventListener('hardwareBackPress', () => {
  // Custom logic
  return true;
});

3. KeyboardAvoidingView

Moves UI elements above the keyboard when it appears.

<KeyboardAvoidingView behavior="padding">...</KeyboardAvoidingView>

📱 Animation Components

1. Animated

Creates complex animations for components.

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

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true
}).start();

2. LayoutAnimation

Automatically animates layout changes.

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);