Domande e risposte colloquio Junior React Native Developer

// React (Web)
import React from 'react';

function App() {
  return <div className="container">Hello Web</div>;
}

// React Native (Mobile)
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello Mobile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

import {
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome</Text>
      <Image source={{ uri: 'https://example.com/image.jpg' }} style={styles.image} />
      <TextInput placeholder="Enter name" style={styles.input} />
      <TouchableOpacity style={styles.button} onPress={() => console.log('Pressed')}>
        <Text style={styles.buttonText}>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
}

// View - non scorrevole
<View style={{ height: 200 }}>
  <Text>Content 1</Text>
  <Text>Content 2</Text>
  {/* Se il contenuto supera i 200px, viene tagliato */}
</View>

// ScrollView - scorrevole
<ScrollView style={{ height: 200 }}>
  <Text>Content 1</Text>
  <Text>Content 2</Text>
  <Text>Content 3</Text>
  {/* Puoi scorrere per vedere tutto il contenuto */}
</ScrollView>

// FlatList - efficiente per liste di grandi dimensioni
<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id}
/>

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

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`Count changed to: ${count}`);
    
    // Cleanup function
    return () => {
      console.log('Cleanup');
    };
  }, [count]); // Runs when count changes
  
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  // Runs once on mount
  useEffect(() => {
    console.log('Component mounted');
  }, []);
  
  // Runs when userId changes
  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);
  
  // Runs after every render (avoid this)
  useEffect(() => {
    console.log('Rendered');
  });
  
  // Cleanup function
  useEffect(() => {
    const subscription = subscribeToUpdates();
    
    return () => {
      subscription.unsubscribe(); // Cleanup on unmount
    };
  }, []);
  
  return <Text>{user?.name}</Text>;
}

// Parent component
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <ChildComponent 
      title="Counter"  // Props
      count={count}    // Props
      onIncrement={() => setCount(count + 1)}  // Props
    />
  );
}

// Child component
function ChildComponent({ title, count, onIncrement }) {
  // Cannot modify props
  // title = "New Title"; // Error!
  
  return (
    <View>
      <Text>{title}</Text>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={onIncrement} />
    </View>
  );
}

// Functional Component (Modern)
function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Mounted');
  }, []);
  
  return <Text>Hello, {name}</Text>;
}

// Class Component (Legacy)
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    console.log('Mounted');
  }
  
  render() {
    return <Text>Hello, {this.props.name}</Text>;
  }
}

// Parent component
function ParentComponent() {
  const [message, setMessage] = useState('');
  
  const handleMessageFromChild = (msg) => {
    setMessage(msg);
  };
  
  return (
    <View>
      <Text>Message from child: {message}</Text>
      <ChildComponent onSendMessage={handleMessageFromChild} />
    </View>
  );
}

// Child component
function ChildComponent({ onSendMessage }) {
  const [input, setInput] = useState('');
  
  const sendMessage = () => {
    onSendMessage(input); // Chiama la funzione del genitore
  };
  
  return (
    <View>
      <TextInput value={input} onChangeText={setInput} />
      <Button title="Send to Parent" onPress={sendMessage} />
    </View>
  );
}

// Good - using unique ID
function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id} // Unique key
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

// Bad - using index (avoid if list can change)
function BadList({ items }) {
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text> // Don't use index
      ))}
    </View>
  );
}

// Good - using unique property
function GoodList({ items }) {
  return (
    <View>
      {items.map(item => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
}

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

function StyledComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Title</Text>
      <Text style={[styles.text, styles.bold]}>Multiple styles</Text>
      <Text style={{ color: 'red' }}>Inline style</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
  bold: {
    fontWeight: 'bold',
  },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Layout orizzontale
    justifyContent: 'space-between', // Spazia gli elementi in modo uniforme
    alignItems: 'center', // Centra verticalmente
  },
  box1: {
    flex: 1, // Prende 1/3 dello spazio
    backgroundColor: 'red',
  },
  box2: {
    flex: 2, // Prende 2/3 dello spazio
    backgroundColor: 'blue',
  },
});

function FlexExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    margin: 20,        // Spazio esterno
    padding: 10,       // Spazio interno
    backgroundColor: 'lightblue',
  },
  // Specific sides
  specificBox: {
    marginTop: 10,
    marginBottom: 20,
    paddingLeft: 15,
    paddingRight: 15,
  },
  // Horizontal and vertical
  shorthand: {
    marginHorizontal: 20,  // left and right
    marginVertical: 10,    // top and bottom
    paddingHorizontal: 15,
    paddingVertical: 5,
  },
});

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', { itemId: 42 })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  
  return (
    <View>
      <Text>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
}

// Navigate with parameters
function HomeScreen({ navigation }) {
  const user = { id: 1, name: 'John', email: '[email protected]' };
  
  return (
    <Button
      title="View Profile"
      onPress={() => navigation.navigate('Profile', { user })}
    />
  );
}

// Receive parameters
function ProfileScreen({ route }) {
  const { user } = route.params;
  
  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>Email: {user.email}</Text>
    </View>
  );
}

// Update parameters
function EditScreen({ navigation }) {
  const updateUser = () => {
    navigation.setParams({ user: updatedUser });
  };
  
  return <Button title="Update" onPress={updateUser} />;
}

function HomeScreen({ navigation }) {
  useEffect(() => {
    navigation.setOptions({
      title: 'My Home',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      headerRight: () => (
        <Button title="Info" onPress={() => alert('Info')} />
      ),
    });
  }, [navigation]);
  
  return <View><Text>Home</Text></View>;
}

// Or set in navigator
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    title: 'My Home',
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
  }}
/>

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

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetchUsers();
  }, []);
  
  const fetchUsers = async () => {
    try {
      const response = await fetch('https://api.example.com/users');
      
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      
      const data = await response.json();
      setUsers(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error}</Text>;
  
  return (
    <FlatList
      data={users}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={item => item.id.toString()}
    />
  );
}

import AsyncStorage from '@react-native-async-storage/async-storage';

const savePreference = async (theme) => {
  await AsyncStorage.setItem('theme', theme);
};

const loadPreference = async () => {
  return await AsyncStorage.getItem('theme');
};

// ScrollView - renders everything
<ScrollView>
  {items.map(item => (
    <View key={item.id}>
      <Text>{item.name}</Text>
    </View>
  ))}
</ScrollView>

// FlatList - renders only visible items
<FlatList
  data={items}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
  keyExtractor={item => item.id}
  // Performance optimizations
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

import { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  
  const validate = () => {
    const newErrors = {};
    
    if (!email) {
      newErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Email is invalid';
    }
    
    if (!password) {
      newErrors.password = 'Password is required';
    } else if (password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = () => {
    if (validate()) {
      console.log('Form submitted:', { email, password });
      // Submit to API
    }
  };
  
  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
      
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="Login" onPress={handleSubmit} />
    </View>
  );
}