Haremos una pequeña aplicacion en React Native desde 0, instalaremos todo lo necesario, ayudandonos de Expo. Por ultimo agregaremos una libreria de emojis para que la aplicacion quede bonita.
Este es el codigo completo del archivo modificado App.js
import { StatusBar } from ‘expo-status-bar’;
import { StyleSheet, Text, View, ToolbarAndroid } from ‘react-native’;
import { useState } from ‘react’
import EmojiPicker from ‘rn-emoji-keyboard’;
export default function App() {
const [isOpen, setIsOpen] = useState(false);
const [newItem, setNewItem] = useState({
emoji: »,
name: »,
price: 0,
isSold: false,
createdAt: new Date(),
});
const handlePick = (emojiObject) => {
setNewItem({
…newItem,
emoji: emojiObject.emoji,
});
}
return (
<View style={styles.container}>
<ToolbarAndroid
logo={require(‘./app_logo.png’)}
title=»AwesomeApp»
actions={[{title: ‘Settings’, icon: require(‘./icon_settings.png’), show: ‘always’}]}
onActionSelected={this.onActionSelected} />
<Text style={styles.title}>Tienda de emoji</Text>
<Text onPress={() => setIsOpen(true)} style={styles.emoji}>{newItem.emoji}</Text>
<EmojiPicker
onEmojiSelected={handlePick}
open={isOpen}
onClose={() => setIsOpen(false)}
/>
<StatusBar style=»light» />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#fff’,
alignItems: ‘center’,
},
title: {
fontSize: 32,
fontWeight: ‘700’,
},
inputContainer: {
width: ‘90%’,
padding: 13,
marginVertical: 6,
borderWidth: 1,
borderColor: ‘#ddd’,
borderRadius: 6,
},
emoji: {
fontSize: 100,
borderWidth: 1,
borderColor: ‘#ddd’,
borderRadius: 6,
padding: 10,
marginVertical: 6,
}
});
Comandos en la terminal:
npm install -g expo-cli exp
expo init nombreApp
cd nombreApp
expo start
npm install rn-emoji-keyboard
Enlaces utiles:
Descargar Node: https://nodejs.org/es
Documentacion de react native: https://reactnative.dev/docs/environment-setup
Instalar Expo: https://gist.github.com/mrcodedev/37b463ae63c0c1d762e6efaf4c26af4f
Instalar Emojis: https://reactnativeexample.com/a-lightweight-and-customizable-emoji-picker/
Espero que les sirva y cualquier duda estoy aqui, comenten y pregunten sin miedo, saludos a todos gente linda!
Bonus track: Para correr nuestra app desde el celular Android en nuestro caso, debemos instalarnos Expo desde el Play Store:
Expo en Play Store
Luego desde nuestra app Expo desde el celu debemos escanear el codigo QR que nos brinda nuestro visual studio code luego de correr nuestra app, esperamos unos segundos que se instale nuestra app y listo ya tenemos nuestra aplicacion en nuestro celular.
