Preguntas de entrevista de React Native con respuestas

En React Native se pregunta por el layout y el rendimiento de las listas, por lo que cambia entre plataformas y por dónde guardar los datos. Estas preguntas son de nivel 2, las que tienen trampa, y cada una trae su explicación.

Piensa la respuesta antes de abrirla: la explicación dice por qué fallan las demás opciones. En Streakode tienes 23 preguntas como estas de React Native, y un simulacro de 10 preguntas en 15 minutos, sin corrección hasta el final, para ver cómo irías en una entrevista de verdad.

Prueba cuatro ejercicios sin cuenta Crear cuenta y hacer el simulacro

12 preguntas de React Native

Temas: Almacenamiento · Arquitectura · Interacción · Layout · Listas · Multiplataforma · Rendimiento · Teclado.

1 · Elige la respuesta · nivel 2
Se guardó el tema dark antes. ¿Qué imprime este código?
```
const theme = AsyncStorage.getItem("theme");console.log(theme === "dark");
```
- Afalse, porque getItem devuelve una promesa
- Btrue
- Cundefined
- DLanza un error: AsyncStorage no existe en móvil
Ver la respuesta
Respuesta: A. false, porque getItem devuelve una promesa
AsyncStorage es asíncrono: getItem devuelve una Promise<string | null>. Hay que esperarla con await o then. Una promesa nunca es igual a un string.
2 · Elige la respuesta · nivel 2
En React Native 0.87, ¿qué arquitectura usan las apps?
- ASolo la Nueva Arquitectura, con Fabric y TurboModules
- BSolo la antigua, con el bridge asíncrono
- CLas dos, a elegir con un flag de configuración
- DDepende de si el proyecto usa Expo
Ver la respuesta
Respuesta: A. Solo la Nueva Arquitectura, con Fabric y TurboModules
La Nueva Arquitectura es la opción por defecto desde la 0.76 y, desde la 0.82, la única: ya no se puede volver al bridge. Las librerías nativas antiguas necesitan una versión compatible.
3 · Completa el hueco · nivel 2
Completa para cambiar el estilo mientras se mantiene pulsado el botón. Una ficha se puede usar más de una vez.
```
<Pressable  style={({ ___ }) => [styles.button, ___ && styles.pressed]}  onPress={onSave}>  <Text>Guardar</Text></Pressable>
```
- pressed
- hovered
- active
- focused
- isPressed
- touched
Ver la respuesta
Respuesta: pressed · pressed
```
<Pressable  style={({ pressed }) => [styles.button, pressed && styles.pressed]}  onPress={onSave}>  <Text>Guardar</Text></Pressable>
```
La prop style de Pressable admite una función que recibe el estado de la interacción. pressed es true mientras el dedo está encima, y un array de estilos combina el base con el condicional.
4 · Elige la respuesta · nivel 2
¿Qué se recomienda hoy para que el contenido no quede bajo el notch ni la barra de gestos?
- Areact-native-safe-area-context, con SafeAreaView o useSafeAreaInsets
- BEl SafeAreaView de react-native, que funciona igual en Android
- CUn paddingTop fijo de 44
- DStatusBar.currentHeight en todas las plataformas
Ver la respuesta
Respuesta: A. react-native-safe-area-context, con SafeAreaView o useSafeAreaInsets
El SafeAreaView de react-native solo funcionaba en iOS y está obsoleto desde la 0.81. react-native-safe-area-context funciona en todas las plataformas y viene incluido en las plantillas de Expo.
5 · Elige la respuesta · nivel 2
¿Qué valor tiene flexShrink por defecto en React Native?
- A0
- B1
- Cauto
- DDepende de la plataforma
Ver la respuesta
Respuesta: A. 0
En la web, flex-shrink vale 1 por defecto; en React Native vale 0, así que un hijo no se encoge aunque no quepa. Es un motivo típico de textos que se salen de la fila: añade flexShrink: 1.
6 · Elige la respuesta · nivel 2
¿Para qué sirve onEndReached en una FlatList?
```
<FlatList data={posts} renderItem={renderPost} onEndReached={loadMore} onEndReachedThreshold={0.5} />
```
- APara cargar más datos cuando el scroll se acerca al final
- BPara saber cuándo se ha pintado el último elemento por primera vez
- CPara volver arriba al llegar al final
- DPara avisar de que la lista está vacía
Ver la respuesta
Respuesta: A. Para cargar más datos cuando el scroll se acerca al final
onEndReached se dispara cuando el final del contenido queda a menos de onEndReachedThreshold (medido en pantallas) de la zona visible. Es la base del scroll infinito. Puede llamarse varias veces: controla que no haya una carga en curso.
7 · Completa el hueco · nivel 2
Completa una cuadrícula de 3 columnas con un aviso cuando no haya fotos.
```
<FlatList  data={photos}  ___={3}  renderItem={({ item }) => <Thumb uri={item.uri} />}  ___={() => <Text>No hay fotos</Text>}/>
```
- numColumns
- ListEmptyComponent
- columns
- EmptyComponent
- gridColumns
- ListFooterComponent
Ver la respuesta
Respuesta: numColumns · ListEmptyComponent
```
<FlatList  data={photos}  numColumns={3}  renderItem={({ item }) => <Thumb uri={item.uri} />}  ListEmptyComponent={() => <Text>No hay fotos</Text>}/>
```
numColumns reparte los elementos en filas de n columnas sin perder la virtualización. ListEmptyComponent se muestra cuando data está vacío; ListHeaderComponent y ListFooterComponent van arriba y abajo.
8 · Elige la respuesta · nivel 2
En una app de Expo que sale para móvil y web, ¿qué valores puede tener Platform.OS?
```
const shadow = Platform.OS === "android" ? { elevation: 4 } : { shadowOpacity: 0.2 };
```
- Aios, android o web
- Bmobile o desktop
- Capple o google
- DSolo ios o android
Ver la respuesta
Respuesta: A. ios, android o web
Platform.OS dice en qué plataforma se ejecuta el código. Con Expo se compila para iOS, Android y web. Para varias ramas es más cómodo Platform.select.
9 · Elige la respuesta · nivel 2
¿Qué tamaño tendrá el título en la web con react-native-web?
```
const styles = StyleSheet.create({  title: {    fontSize: Platform.select({ ios: 20, android: 18, default: 16 }),  },});
```
- A16
- B20
- C18
- Dundefined
Ver la respuesta
Respuesta: A. 16
Platform.select elige la clave de la plataforma actual. En la web no hay ios ni android, así que usa default.
10 · Elige la respuesta · nivel 2
Para mostrar 5.000 elementos, ¿qué conviene usar?
- AFlatList, que solo renderiza lo que está cerca de la pantalla
- BScrollView con .map()
- CUn View con overflow: 'scroll'
- DUn SectionList, siempre
Ver la respuesta
Respuesta: A. FlatList, que solo renderiza lo que está cerca de la pantalla
FlatList virtualiza: monta los elementos visibles y recicla el resto. ScrollView renderiza los 5.000 de golpe y dispara memoria y tiempo de carga.
11 · Elige la respuesta · nivel 2
En iOS, el teclado tapa el campo de texto del final del formulario. ¿Qué componente lo resuelve?
- AKeyboardAvoidingView con behavior="padding"
- BSafeAreaView
- CUn ScrollView con keyboardHidden
- DStatusBar
Ver la respuesta
Respuesta: A. KeyboardAvoidingView con behavior="padding"
KeyboardAvoidingView ajusta su altura, posición o padding cuando aparece el teclado. En iOS suele usarse behavior="padding"; en Android el sistema ya redimensiona la ventana en muchos casos.
12 · Encuentra el fallo · nivel 2
Con el teclado abierto, el primer toque en el botón solo cierra el teclado y hay que volver a pulsar. ¿Qué línea hay que cambiar?
```
1<ScrollView>2  <TextInput placeholder="Buscar" />3  <Button title="Buscar" onPress={search} />4</ScrollView>
```
Ver la respuesta
El fallo está en la línea 1: <ScrollView>
Por defecto, un toque fuera del campo dentro de un ScrollView cierra el teclado y no llega al botón. Con <ScrollView keyboardShouldPersistTaps="handled">, los toques sobre elementos pulsables sí se atienden.

Preguntas de entrevista de otras rutas

Ver todos los ejercicios de React Native