Creación de componentes

Otro aporte por aquí chicos:

Para los que vienen de React, sabrán que también pueden utilizar un Fragment para definir un nivel más alto dentro de un componente, prácticamente un View o múltiples View.

Pueden hacerlo así en el caso de que lo necesiten:

<>
<View>
	<Text>/<Text>
</View>
<View>
	<TextInput />
</View>
</>

Recuerden que existen componentes que se autocierran como:

<TextInput />, <FlatList />, etc.

También existen los higherOrderComponents (un componente que devuelve o encapsula a otro componente)

<View>
</View>

<PokeBackground>
	<View>
		<Text>
		</Text>
	</View>
</PokeBackground>

Como aporte, quiero añadir que ya no es necesario importar React en cada componente. Desde las ultimas versiones de React hace ninguna diferencia Por lo que el código podría quedar así y seguir funcionando
.

Para crear un input tipo contraseña, podemos usar el atributo “secureTextEntry”

<TextInput placeholder='Pass' secureTextEntry />
<TextInput placeholder='Pass' secureTextEntry={true} />

Tiene mucha similitud a React, bueno creo que era obvio.

<Text> Hola </Text>
<Text> Adios </Text>

Un View es como un Div en HTML?🤔

Vas muy rapido y no se te entiende mucho 😦

No soy un experto, pero el curso esta desactualizado, en relacion con los programas de node.js, sin embargo los codigos que se manejan para su instalación funcionan, para lo cual es muy importante tener configuradas las variables de entorno. les comparto el codigo de package.json, con el que estoy trabajando(difiere un poco del que esta en el curso):{
“name”: “myhc”,
“version”: “1.0.0”,
“main”: “node_modules/expo/AppEntry.js”,
“scripts”: {
“start”: “expo start”,
“android”: “expo start --android”,
“ios”: “expo start --ios”,
“web”: “expo start --web”,
“eject”: “expo eject”
},
“dependencies”: {
“expo”: “~49.0.8”,
“expo-status-bar”: “~1.6.0”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“react-native”: “0.72.4”
},
“devDependencies”: {
"@babel/core": “^7.20.0”
},
“private”: true
}
Con esta configuración, logre instalar expo-go, en el emulador y funciona bien. Espero les sirva

[](

src/components/LoginForm.jsx

Usando inputs de react native:

• TextInput
• Button

import React from "react";
import { TextInput, Button, Text, View } from "react-native";

export default function LoginForm() {
  return (
    <View>
      <Text>Login</Text>
      <TextInput placeholder="Email" />
      <TextInput placeholder="Password" />
      <Button title="Send" onPress={() => console.log("Sending...")} />
    </View>
  );
}